gpt4 book ai didi

javascript - Axios promise 不会在 vue 方法中抛出错误

转载 作者:行者123 更新时间:2023-11-30 20:03:37 25 4
gpt4 key购买 nike

正如标题所说,我在捕获 Vue 方法 getTodo 中的错误时遇到了问题。
点击 Set incorrect url 然后点击 Get Todo,你可以看到商店中出现了预期的错误,但是在 Vue 中 getTodo promise 的 then 被执行了,没有错误。如果您选择 Set correct url 那么它工作正常。控制台日志应如下所示:

error on store  
error on vue

JavaScriptHTML 下面:

const store = new Vuex.Store({
state: {
todo: '',
msg: '',
url: 'https://jsonplaceholder.typicode.com/todos/test',
correct: false
},
mutations: {
setTodo(state, payload) {
state.todo = payload;
},
setMsg(state, payload) {
state.msg = payload;
},
setCorrect(state) {
state.url = 'https://jsonplaceholder.typicode.com/todos/1';
state.correct = true;
},
setIncorrect(state) {
state.url = 'https://jsonplaceholder.typicode.com/todos/test';
state.correct = false;
}
},
actions: {
getTodo({ state, commit }) {
return axios.get(state.url)
.then(response => {
console.log('success on store');
commit('setMsg', 'success on store');
commit('setTodo', response.data);
})
.catch(error => {
console.log('error on store');
commit('setMsg', 'error on store');
});
}
}
})
new Vue({
el: '#app',
data: {
message: ''
},
computed: {
todo() {
return store.state.todo;
},
msg() {
return store.state.msg;
},
correctUrl() {
return store.state.correct;
}
},
methods: {
getTodo() {
store.dispatch('getTodo').then(() => {
console.log('success on vue');
this.message = 'success on vue'
}).catch((e) => {
console.log('error on vue');
this.message = 'error on vue';
});
},
setCorrect() {
store.commit('setCorrect');
},
setIncorrect() {
store.commit('setIncorrect');
}
}
})
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
<div id="app">
<p>{{ message }}</p>
<p>{{ todo }}</p>
<p>Correct url: {{ correctUrl }}</p>
<button @click="getTodo">Get Todo</button>
<button @click="setCorrect">Set correct url</button>
<button @click="setIncorrect">Set incorrect url</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.0.1/dist/vuex.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</body>

</html>

最佳答案

您需要在 getTodo 操作中捕获错误后重新抛出错误..

actions: {
getTodo({ state, commit }) {
return axios.get(state.url)
.then(response => {
console.log('success on store');
commit('setMsg', 'success on store');
commit('setTodo', response.data);
})
.catch(error => {
console.log('error on store');
commit('setMsg', 'error on store');
throw error;
});
}
}

const store = new Vuex.Store({
state: {
todo: '',
msg: '',
url: 'https://jsonplaceholder.typicode.com/todos/test',
correct: false
},
mutations: {
setTodo(state, payload) {
state.todo = payload;
},
setMsg(state, payload) {
state.msg = payload;
},
setCorrect(state) {
state.url = 'https://jsonplaceholder.typicode.com/todos/1';
state.correct = true;
},
setIncorrect(state) {
state.url = 'https://jsonplaceholder.typicode.com/todos/test';
state.correct = false;
}
},
actions: {
getTodo({ state, commit }) {
return axios.get(state.url)
.then(response => {
console.log('success on store');
commit('setMsg', 'success on store');
commit('setTodo', response.data);
})
.catch(error => {
console.log('error on store');
commit('setMsg', 'error on store');
throw error;
});
}
}
})
new Vue({
el: '#app',
data: {
message: ''
},
computed: {
todo() {
return store.state.todo;
},
msg() {
return store.state.msg;
},
correctUrl() {
return store.state.correct;
}
},
methods: {
getTodo() {
store.dispatch('getTodo').then(() => {
console.log('success on vue');
this.message = 'success on vue'
}).catch((e) => {
console.log('error on vue');
this.message = 'error on vue';
});
},
setCorrect() {
store.commit('setCorrect');
},
setIncorrect() {
store.commit('setIncorrect');
}
}
})
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
<div id="app">
<p>{{ message }}</p>
<p>{{ todo }}</p>
<p>Correct url: {{ correctUrl }}</p>
<button @click="getTodo">Get Todo</button>
<button @click="setCorrect">Set correct url</button>
<button @click="setIncorrect">Set incorrect url</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.0.1/dist/vuex.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</body>

</html>

关于javascript - Axios promise 不会在 vue 方法中抛出错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53137135/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com