必备知识点
- axios请求会生成一个Promise实例对象
- await后面可以直接跟一个Promise实例对象，返回值不是Promise对象，而是Promise对象处理之后的结果（await后面跟一个axios请求时，返回值即请求的响应结果 res）
- 若await 后的表达式的值不是一个 Promise，则该值将被转换为一个已正常处理的 Promise
- await 只能在使用async定义的函数中使用
- async函数都会隐式返回一个promise，要获取Promise的返回值应该用then方法
async function timeout(){ return "helloworld"; } timeout().then((result)=>{ console.log(result); }); console.log("我在异步函数后面，会先执行谁呢"); // 我在异步函数后面，会先执行谁呢 // helloworld
await 在 .then 中使用
// 内部有 await 的箭头函数前要用 async ***.then( async (res)=>{ let a = await this.$http(***) });
await 在 forEach 中使用
// 内部有 await 的箭头函数前要用 async list.forEach( async (item)=>{ let a = await this.$http(item.url) });
async 、await 与Promise对比
1、不再需要多层.then方法
假设一个业务分很多步骤完成，并且每个步骤都是异步，依赖上一个步骤的结果。
function takeLongTime(n) { return new Promise(resolve => { setTimeout(() => resolve(n + 200), n); }); } function step1(n) { console.log(`step1 with ${n}`); return takeLongTime(n); } function step2(n) { console.log(`step2 with ${n}`); return takeLongTime(n); } function step3(n) { console.log(`step3 with ${n}`); return takeLongTime(n); } // Promise方式 function doIt() { console.time("doIt"); const time1 = 300; step1(time1) .then(time2 => step2(time2)) .then(time3 => step3(time3)) .then(result => { console.log(`result is ${result}`); console.timeEnd("doIt"); }); } doIt(); // async await方式 async function doIt() { console.time("doIt"); const time1 = 300; const time2 = await step1(time1); const time3 = await step2(time2); const result = await step3(time3); console.log(`result is ${result}`); console.timeEnd("doIt"); } doIt();
2、可以对Promise进行并行处理
案例需求描述
执行保存用户信息的操作，对新录入的用户信息进行校验，若数据库中存在相同name的用户，则提示修改；若不存在相同name的用户，则可以保存
代码实现
methods: { async ifvalid() { // 校验：数据库中是否存在name为张三的用户; let res = await this.$http.get("/user/ifexist?name=张三"); if (res.data) { return true; } else { return false; } }, async save() { if (await this.ifvalid()) { alert("校验通过，可以保存啦！"); } else { alert("校验未通过，请修改后重试！"); } } }
