| async await与promise的状态调整与错误处理 | 您所在的位置：网站首页 › promise状态改变 › async await与promise的状态调整与错误处理 |
async await与promise的状态调整与错误处理
|
async await与promise的状态调整与错误处理
async await与promise的状态调整案例一案例二应用
async await的错误处理案例一应用场景
async await与promise的状态调整
案例一
先看第一个案例 async function fn2() { console.log("fn2执行了"); return 1; //最后promise的状态和返回值无关，它的状态取决于当前函数体内有没有出现错误，如果出现错误了那么promise的状态就会变为reject } console.log(fn2()); //返回的是一个promise实例，所以可以调用then与catch function fn1() { fn2() .then(() => console.log("success")) .catch(() => console.log("err")); } fn1();结果如下： 结果如下： 案例二： 如果我们想要使用promise代替上面的方案该如何实现呢？ async function fn2() { return new Promise((resolve, reject) => { console.log("执行ok"); resolve(); }); } console.log(fn2()); //返回的是一个promise实例，所以可以调用then与catch function fn1() { fn2() .then(() => console.log("success")) .catch(() => console.log("err")); } fn1();结果如下： 如果想要变为失败的状态呢 async function fn2() { return new Promise((resolve, reject) => { console.log("执行ok"); reject(); }); } console.log(fn2()); //返回的是一个promise实例，所以可以调用then与catch function fn1() { fn2() .then(() => console.log("success")) .catch(() => console.log("err")); } fn1();结果如下： 在vuex的actions定义了一个一个方法： 然后调用这个方法，返回了一个promise实例，成功之后路由就会跳转 await是无法处理错误的，因此我们必须要采取一种措施去防止浏览器报错 这里推荐使用try catch async function fn2() { console.log("fn2执行了"); return Promise.reject(new Error(1)); //最后promise的状态和返回值无关，它的状态取决于当前函数体内有没有出现错误，如果出现错误了那么promise的状态就会变为reject } async function fn1() { let res; try { //新手用 async/await 容易犯的错误之一，是忘记捕获错误，这是大忌,await无法处理失败的情况，所以要使用try catch res = await fn2(); console.log("没有问题",res); } catch (error) { console.log("错误了",error); } } fn1();结果如下： 如果我们在vuecli中封装了响应拦截器，如下： |
可见只要是async函数就会返回一个promise实例（不管你想不想要），promise实例的状态就看函数体有没有出错，如果没有出错，那么状态就是fullid，如果执行中出做了那么就是reject，在这里promise的状态是成功的，但是如果我们想要修改他的状态怎么办呢？那么我们可以使用下面的方法：
因为我的b就没有定义过，执行不下去了，所以就会报错，然后他的状态就变成了失败。
如果拦截器拦截到错误了，那么我们该如何处理呢，这就好像是上面的那个例子，解决方法如下： 这是一个表单验证并且登录的方法： 方式一： 
方式二： 如果不用async await那么就不需要try catch了，使用then catch就可以了 
总结： 使用async await的时候一定要加try catch【本文地址】
公司简介
联系我们