个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
正如标题所说，我在捕获 Vue 方法 getTodo 中的错误时遇到了问题。
点击 Set incorrect url 然后点击 Get Todo，你可以看到商店中出现了预期的错误，但是在 Vue 中 getTodo promise 的 then 被执行了，没有错误。如果您选择 Set correct url 那么它工作正常。控制台日志应如下所示:
error on store
error on vue
JavaScript 和 HTML 下面:
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
如何从 promise 中退出 promise ？ perl6 文档没有提供简单的方法。例如: my $x = start { loop { # loop forever until "qui
我的用户 Controller 中有一个索引操作，其中我试图连续做两件事，并且在它们都有机会完成之前不执行所需的 res.json() 方法。 我有一个加入用户的友谊加入模型。一列是 friender
请帮我解释一下为什么日志结果有两种不同: 方式 1:每 1 秒顺序记录一次 方式 2:1 秒后记录所有元素。 // Way 1 let sequence = Promise.resolve(); [1
我的问题很简单。 Promise.all() 方法可以返回 Promise 吗？让我解释一下: function simpleFunction() { let queue = [];
我正在使用 Promise 从存储中读取文件并转换为 base64 字符串。我有图像数组，使用 RNFS 读取图像 const promise_Images = _Images.map(async (
如果使用非空数组调用 Promise.all 或 Promise.race，它们将返回一个待处理的 Promise: console.log(Promise.all([1])); // prints
Promise.all 是否可以在没有包装 promise 的情况下返回链的最后一个值？ 如果不使用 await，它在我的上下文中不起作用 没有包装的例子: function sum1(x){ r
我一直在玩 promise，通常能想出如何处理好它们，但在这种情况下，我不知道如何删除一个 promise-wrapping level。 代码如下: let promise2 = promise1.
考虑以下嵌套的Promises结构: const getData = async() => { const refs = [{ name: "John33", age: 3
我已经阅读了 Promise/A+ 规范，但据我了解，还有诸如 Promise/A 和 Promise 之类的东西。它们之间有什么区别？ Promise 和 Promise/A 规范也是如此吗？如果是
当我运行以下代码时: my $timer = Promise.in(2); my $after = $timer.then({ say "2 seconds are over!"; 'result'
以下简单的 promise 是发誓的，我不允许打破它。 my $my_promise = start { loop {} # or sleep x; 'promise re
我正在尝试扩展Promise: class PersistedPromise extends Promise { } 然后在派生类上调用静态resolve以直接创建一个已解决的Promise: Per
我有两个返回 promise 的函数，我独立使用它们作为: getLocal().then(...) 和 getWeb().then(...) 但是现在我遇到了一个奇怪的问题: 1) 我需要第三个
我不知道 promise.all 解决方案中的 promise.all 是否是一个好的实践。我不确定。 我需要从一组用户获取信息，然后通过此信息响应，我需要发送消息通知。 let userList =
我一直在尝试使用 queueMicrotask() 函数，但我没有弄清楚当回调是微任务时回调的优先级如何。查看以下代码: function tasksAndMicroTasks() { const
我一直在尝试使用 queueMicrotask() 函数，但我没有弄清楚当回调是微任务时回调的优先级如何。查看以下代码: function tasksAndMicroTasks() { const
今年早些时候，我在 Pharo Smalltalk 参与了一个 promise 项目。这个想法是为了实现以下行为: ([ 30 seconds wait. 4 ]promiseValue )then:
大家好，提前感谢您的帮助。 下面是我正在尝试做的事情 function1(){ throw some error(); } function2() { // dosomething suc
我有以下未解析的代码。f2 解决了，所以我不会添加该代码，它是 f1 我有问题。 我调用函数，它到达最里面如果，它调用函数“find”，它执行函数 findId，完美返回 Id，然后执行 editId
我是一名优秀的程序员,十分优秀！