前言
async函数其实它就是
Generator
函数的语法糖,至于它跟Generator
有什么区别、优势在哪里、基本用法、语义等直接去看文档会更加容易理解。这篇文章主要讲的是,如果首页中发生多个请求我们怎么使用async函数处理
一、使用async函数实现多个请求
因为async函数在awat后面是可以返回Promise 对象和原始类型的值(数值、字符串和布尔值,但这时会自动转成立即 resolved 的 Promise 对象)。所以我很喜欢定义一个对象去接受await返回的数据,如下:
async initData() {
const cache = await this.cachePromise;
}
思考:如果有多个请求呢?加入多个await返回promise实例吗?如果async函数内部出现异常会导致返回的 Promise
对象变为reject
状态,后面的请求就会等待造成请求堵塞,所以有时,我们希望即使前一个异步操作失败,也不要中断后面的异步操作。这时可以将 await 放在 try...catch 结构里面,这样不管这个异步操作是否成功,后面 await 都会执行。
async initData() {
const cache = await this.cachePromise; // 出错了
const cache2 = await this.cachePromise2; //不执行
const cache3 = await this.cachePromise3; //不执行
const cache4 = await this.cachePromise4; //不执行
}
// 修改后
async initData() {
try {
const cache = await this.cachePromise; // 出错了
const cache2 = await this.cachePromise2; //执行
const cache3 = await this.cachePromise3; //执行
const cache4 = await this.cachePromise4; //执行
} catch(err) {
console.log(err)
}
}
二、使用async函数实现多个请求并发
1.思考
由上面代码我们又得思考一个问题了,因为cachePromise、cachePromise2、cachePromise3、cachePromise4都是异步请求相互不依赖的,但是上面这样写就继发请求了要等上一个await请求结束才开始下一个请求,这样比较耗时。
2.解决方案
通过Promise.all实现并发请求,它们同时触发缩短程序的执行时间。
代码如下(示例):
注意:await必须放在async函数里面
// 写法一
let [cache, cache2] = await Promise.all([this.cachePromise, this.cachePromise2]);
// 写法二
let p= this.cachePromise();
let p2= this.cachePromise2();
let cache= await p;
let cache2= await p2;
总结
有时候处理多请求并发可以不用async函数不用async就then回调,这主要是看个人习惯。我觉得使用async函数很方便能直接请求返回数据,对于一些表单提交又能做提示处理非常香。本人菜鸡一个请多指教