async 是"异步"的意思,await是async wait的简写,顾名思义我们就可以理解为等待异步函数的执行完成
async 函数返回的是一个 Promise 对象,如果在函数中直接 return 一个值,async 会把这个直接量通过 Promise.resolve( ) 封装成 Promise 对象。
我们可以通过以下这段代码来说明这个结论:
上面我们说到,await 用于等待 async 函数的返回值
await 不仅仅用于等 Promise 对象,它可以等任意表达式的结果
async function test() { return new Promise((resolve, reject) => { setTimeout(() => { resolve("完成") }, 1000); } ) } console.time('testForEach'); var result = await test() console.log(result) console.timeEnd('testForEach');
我们可以看到控制台在一秒后输出了"完成"
那我们什么情况下会使用呢?
当后面的请求依赖前面的请求的值时
举个例子:有一个列表页面,页面需要展示所有我预定的场次信息,第一个接口返回了所有场次id的合集,我需要根据这个合集去请求第二个接口,以此来获取场次的具体信息
async getinfor() { let that = this; let list = await this.getlist(); // 获取列表 let roundlist = await this.getroundlist(list); //根据roundid获取列次 }, getlist() { var that = this; return new Promise((resolve, reject) => { axios .get(url) .then(data => { resolve(data.data.data);//调用resolve()函数返回下一个请求需要的列表 }); }); },
再比如说:签到功能,若签到成功则返回座位历史预约情况,若签到失败则只显示签到失败的弹框
async getseathistory() { var msign = await this.handlesign(); swith(msign){ case "sucess": this.$vux.toast.text("签到成功"); ... //进行获取后续座位预约历史相关请求 break; case "fail": this.$vux.toast.text("签到失败"); break; } }, handlesign() { return new Promise((resolve, reject) => { Axios.post(url,data).then(res => { if (res.data.code != 200) { resolve("sucess"); } else if (res.data.code == 200) { resolve("fail"); } }); }); }
需要同时获取列表的多方面信息,而且信息需要多个请求才能获得,但是获取的信息没有依赖关系,可以同时请求
这个时候就需要用到 Promise.all([p1, p2, p3])
我们再来举个例子:还是获取预约列表,第一个接口返回了roundid(场次id)和orderid(预约id),我们需要roundid去请求场次信息,根据orderid请求预约信息,如果这个时候我们还按照顺序请求的话必然会费时
我们可以来验证一下:
顺序请求:
async getinfor() { let that = this; console.time("test"); let list = await this.getlist(); // 获取列表 let roundlist = await this.getroundlist(); //根据roundid获取列次 let getseatnum = await this.getseatnum(); // 抢座成功的获取抢座座次 // Promise.all([that.getroundlist(),that.getseatnum()]).then((value)=>{ // console.log(value) // }) console.timeEnd("test"); }
同时请求:
async getinfor() { let that = this; console.time("test"); let list = await this.getlist(); // 获取列表 // let roundlist = await this.getroundlist(); //根据roundid获取列次 // let getseatnum = await this.getseatnum(); // 抢座成功的获取抢座座次 Promise.all([that.getroundlist(), that.getseatnum()]).then(value => { console.log(value); console.timeEnd("test"); }); },
我们可以看到同时请求的速度快
当我们需要请求的信息在逻辑上比较复杂时,可以考虑使用async/await
当然也有人说为什么不用Promise而要用async/await呢?
在实践中我们可以发现:
Promise 方案的死穴 —— 参数传递太麻烦了
使用async/await既可以很方便的读取返回值,代码也比较清晰易读