js async await 多个请求串行与并行的讲解

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)
}

image.png

写完觉得自己特牛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)
}

image.png

噢不,居然用了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);
}
image.png
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());
}

image.png

这里是重点了,我们看到打印顺序是按照同步代码的结果来打印的,耗时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());
}
image.png

为什么?为什么调换了 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, 就可以用串行的写法了

虽然有点啰嗦,但是为了讲清楚点,我只能这么码字,希望有人看得懂,技术有限,欢迎喷我
\color{#228B22}{前端小总结,不对之处,欢迎大神们喷我。可以的话顺手点个赞吧~~!}
\color{red}{警: 禁止抄袭,转载说明出处 🤨}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,189评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,577评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,857评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,703评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,705评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,620评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,995评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,656评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,898评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,395评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,982评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2 342

推荐阅读更多精彩内容