async/await 可能会产生误导!!
在我没研究一下之前,本人也是一脸懵逼,什么同步,异步,串行,并行。await 不就是写异步代码的吗?
//噢不,我简直是SB,我怎么会说出 await 不就是写异步代码的吗?这样的话?
一些文章将 async/wait 与 Promise 进行了比较,并声称它是 JavaScript 下一代异步编程风格,事实上它只不过是一种语法糖,不会完全改变我们的编程风格。
从本质上说,async 函数仍然是 promise。在正确使用 async 函数之前,你必须先了解 promise,更糟糕的是,大多数时候你需要在使用 promises 的同时使用 async 函数。
算了,要理解这些,先从头复习一下吧
第一部分🌭🌭:
在当年写ajax的时候,多个请求的写法
假设 setTimeout 模拟请求,a和b模拟请求返回的数据并打印,一个请求假设4s
function b(){
let a = 0 ;
setTimeout(()=>{a=4;console.log(a)},4000)
let b = 0 ;
setTimeout(()=>{b=5;console.log(b)},4000)
}
写完觉得自己特牛B,两个请求并行(一起执行),只用了4.097s
如果两个请求的数据之间有依赖性,也就是b请求需要a请求返回的数据
function b(){
let a = 0 ;
let b = 0 ;
setTimeout(()=>{a=4;console.log(a)
setTimeout(()=>{b=5;console.log(b);},4000)}
,4000)
}
噢不,居然用了8.097 这就是
串行
。如果这个时候我写了回调函数进行。单个请求还无所谓,多个请求或者多次操作就会不优雅了.
第二部分🍔🍔
无所谓,promise会出手
随便去网上搜索一下promise的作用就知道promise就是解决回调地狱的
(以为多高大上呢,不就是优雅的问题吗?)
function c(){
new Promise((res,rej)=>{
setTimeout(() => {
res(1)
}, 2000);
}).then(v=>console.log(v))
console.log(4);
new Promise((res,rej)=>{
setTimeout(() => {
res(3)
}, 2000);
}).then(v=>console.log(v))
console.log(2);
}
Promise的意思是声明一个异步代码去执行,并承诺未来一段时间内会有结果返回(resolve,reject)这个结果使用 then函数来接受并实现链式调用
上边的代码也是并行
执行了两个promise。耗时 2.087s
何为异步代码?其实你看到4和2先打印了,这其实就是异步代码
的作用,在promise的同时js线程并不会阻塞
。
第三部分🌮🌮
但是 promise 感觉仍然不够优雅,无所谓,async 会出手
async function a(){
console.log(new Date().getSeconds());
const a = new Promise((res,rej)=>{
setTimeout(()=>res('fffa'),4000)
})
const a1 = await a
console.log(a1);
console.log(new Date().getSeconds());
const b = new Promise((res,rej)=>{
setTimeout(()=>res('fffb'),4000)
})
const b1 = await b
console.log(b1);
console.log(new Date().getSeconds());
}
这里是重点了,我们看到打印顺序是按照同步代码的结果来打印的,耗时8.098s
这就是 async/await 的作用。让
异步
的代码写起来更像是同步的代码
一样(目前暂时是串行的)抛开对async/await的认识,我们解读这段代码
1.分别写了两段异步代码 Promise,他们的结果是 a,b 并且分别打印。
2.两个异步代码的数据没有依赖性。执行耗时是8.098s是正确的。
3.前提是我们把他们看作是同步的代码
4.程序在8秒起步,过了4秒在12秒时候打印fffa ,再过4秒就是16秒的时候打印fffb
但这其实也是很多人在使用 async/await
时可能会犯的错误::
太过串行化!!!
尽管 await
可以使代码看起来像是同步的,但实际它们仍然是异步的,必须小心避免太过串行化。这会导致执行时间是多一倍的(8s),实际应该是4s左右
上述代码在逻辑上看似正确的,然而,这不是完全正确的。
await a 会等待 fffa 结束并返回结果。
然后 await b的部分才被调用。执行的总时间用了8s!
注意,b部分的代码 并不依赖于 a部分 的结果,实际上它们可以并行
调用!然而,用了 await,两个调用变成串行的,总的执行时间将比并行多一倍时间
下面是正确的方式:我们把 const a1 = await a 的执行时机放到了 两个promise 的后边
async function a(){
console.log(new Date().getSeconds());
const a = new Promise((res,rej)=>{
setTimeout(()=>res('fffa'),4000)
})
console.log(new Date().getSeconds());
const b = new Promise((res,rej)=>{
setTimeout(()=>res('fffb'),4000)
})
const a1 = await a
const b1 = await b
console.log(a1);
console.log(b1);
console.log(new Date().getSeconds());
}
为什么?为什么调换了 await a 的顺序就没问题了?
答🥩🥩:
先抛出 await 的术语解释:await
操作符用于等待一个 [Promise
]兑现并获取它兑现之后的值
但我个人用通俗的解释:await 有点像 then()/catch(),用来接受promise返回的值。
这里 await a 的时候,a是promise返回的值。后边的代码我们可以想象有点像被then()包裹起来了,貌似await不能很好的控制后边的代码哪些需要同步或异步
导致了
const a1 = await a
console.log(a1);
console.log(new Date().getSeconds());
const b = new Promise((res,rej)=>{
这段代码 b部分的Promise 也会等待 await a 拿到结果再去执行。就不小心串行
了
所以结果是 8s.
当我调换了顺序之后-->
const a1 = await a
const b1 = await b
console.log(a1);
console.log(b1);
这里的 两个await 并不会妨碍到 它上边两个promise 的执行,就像是 第二部分
的promise代码一样,是并行
执行的。不过这里有另一个细节!!
尽管 两个await 不会妨碍到promise的并行执行,但是 此时 await a 会等待 a返回结果,程序此时还没走到 await b.
也就是说
此时程序执行不是卡在 await b,而是卡在 await a,
当 fffa 被返回的时候,由于两个 promise 是并行执行的!
fffa 被返回的同时,await a 得到结果,程序就立马走到 await b,由于并行且时间差不大,刚好fffb也就被返回,
所以 await a 和 await b 是几乎同一时间结果被返回,但是实际开发环境可能是 await a返回之后要等个时间 b才会被返回,
具体看服务器接口请求时间。
然后 console.log(a1); console.log(b1); 被一起打印
这才是真正的 await 并行请求!
当然也不是完全否定了 串行,假如有一个需求,b的请求数据 需要包含 a请求返回的数据,那么 b 需要等待 a, 就可以用串行的写法了
虽然有点啰嗦,但是为了讲清楚点,我只能这么码字,希望有人看得懂,技术有限,欢迎喷我