关于前端:过程详解async-await综合题

前言

如果你之前跟我一样始终对async`await`相熟又生疏的话（相熟是可能每天都在用，生疏是针对一些组合题又丈二和尚摸不着头脑），无妨能够边看边练，总结法则，置信会逐步清晰并有所得。本文对每个案例都详细描述了代码的执行流程，如有不妥欢送斧正。

async 函数return值

async函数默认会返回一个Promise对象，不论最初函数有没有return值。然而针对具体的返回值状况，实际上体现会有所不同，上面别离看看。

return值为一般值

这里的一般值是指根底类型值（Number、String和Boolean等）和非thenable和非Promise的值

async function foo() {
  return 'foo'
}
foo().then(() => console.log('a'))
Promise.resolve()
  .then(() => console.log('b'))
  .then(() => console.log('c'))
// 输入后果：a b c

很简略，不出意外输入a b c，也就是async函数在执行实现后是没有期待的。

foo()执行实现没有期待，遇到then将console.log('a')放入微工作队列；
持续往下执行Promise.resolve()，遇到then将console.log('b')入队，以后同步工作全副执行实现；
开始执行微工作队列，首先取出并执行console.log('a')输入a；
而后取出并执行console.log('b')输入b，此时遇到then将console.log('c')入队；
最初取出并执行console.log('c')输入c，至此微工作队列清空，代码执行完结；

return值为thenable

所谓值为thenable是指定义了then办法的对象，能够是一个字面对象，也能够是一个Class实例。
```
class Bar {
 then(resolve) {
 resolve()
 console.log('then')
  }
}

async function foo() {
  // return new Bar()
  return {
 then(resolve, reject) {
   resolve()
   console.log('then')
 }
  }
}
foo().then(() => console.log('a'))
Promise.resolve()
  .then(() => console.log('b'))
  .then(() => console.log('c'))
// 输入后果：then b a c
```
怎么程序不一样了呢？

如果async函数的返回值是一个thenable，等同于生成一个Promise，在foo函数执行实现，并且Promise状态变更（resolve或者reject）后，还要等1个then的时长
foo()返回thenable值，执行then办法，Promise状态变更，执行console.log('then')输入then，期待1个then时长；
持续往下执行Promise.resolve()，遇到then将console.log('b')放入微工作队列，以后同步工作执行实现；
开始执行微工作队列，首先取出并执行console.log('b')输入b，以后微工作队列清空；
此时步骤1期待时长到期，遇到then将console.log('a')放入队列，取出执行输入a；
持续步骤3遇到then将console.log('c')放入队列，取出执行输入c，至此微工作队列清空，代码执行完结；

这里如果foo函数返回的thenable办法的状态没有变更，则前面的foo().then将永远不会执行。

async function foo() {
  return {
    then(resolve, reject) {
      console.log('then')
    }
  }
}
foo().then(() => console.log('a'))
Promise.resolve()
  .then(() => console.log('b'))
  .then(() => console.log('c'))
// 输入后果：then b c

return 值为Promise

return前面的值是Promise，比方 new Promise(resolve=>resolve())和Promise.resolve。

async function foo() {
  return Promise.resolve('foo')
}
foo().then(() => console.log('a'))
Promise.resolve()
  .then(() => console.log('b'))
  .then(() => console.log('c'))
  .then(() => console.log('d'))

// 输入后果：b c a d

显著能够看出async函数执行完后提早了2个then时长。

foo()返回Promise值，Promise状态变更，期待2个then时长；
持续往下执行Promise.resolve()，遇到then将console.log('b')放入微工作队列，以后同步工作执行实现；
开始执行微工作队列，首先取出并执行console.log('b')输入b，以后微工作队列清空；
遇到then将console.log('c')放入队列，取出执行输入c；
此时步骤1期待时长到期，遇到then将console.log('a')放入队列，取出执行输入a；
持续步骤4遇到then将console.log('d')放入队列，取出执行输入d，至此微工作队列清空，代码执行完结；

综合上述体现能够总结出如下法则

await 表达式值

既然async函数返回值对代码执行程序有影响，那么await前面的表达式值是否也有影响呢？上面同样分为上述三种场景进行试验剖析

await值为一般值

async function foo() {
  await 'foo'
  console.log('a')
}
foo().then(() => console.log('b'))
Promise.resolve()
  .then(() => console.log('c'))
  .then(() => console.log('d'))
// 输入后果：a c b d

能够判断，await前面的表达式值如果是一般值，毋庸期待then时长。那么，为什么b会在c前面输入呢？

在await表达式有执行后果后，await下一行到函数完结局部代码codex能够看做搁置到微工作队列中，等同于Promise.resolve(await xxx).then(()=>codex)，这里是伪代码，await在工夫程序上等效于Promise.prototype.then。

await 'foo'执行实现后，console.log('a')被增加到微工作队列；
持续往下执行同步工作Promise.resolve()，遇到then将console.log(c)增加到微工作队列，以后同步工作执行实现；
而后执行微工作队列中工作，取出并执行console.log('a')输入a；
此时foo函数执行实现，遇到then将console.log('b')入队；
继续执行微工作队列中console.log('c')输入c，此时遇到then将console.log('d')入队；

最初顺次执行取出残余微工作，执行并输入b和d，至此微工作队列清空，代码执行完结；

await值为thenable

async function foo() {
  await {
 then(resolve) {
   resolve()
   console.log('then')
 }
  }
  console.log('a')
}
foo().then(() => console.log('b'))
Promise.resolve()
  .then(() => console.log('c'))
  .then(() => console.log('d'))
  .then(() => console.log('e'))
// 输入后果 then c a d b e

await前面表达式值如果是thenable，须要期待1个then时长，才会去执行后续代码。

foo()执行await是一个thenable，Promise状态变更，执行同步代码console.log('then')，输入then，此时期待1个then时长；
持续往下执行同步工作Promise.resolve()，遇到then将console.log('c')退出到微工作队列，以后同步工作执行实现；
开始执行微工作队列，取出并执行console.log('c')，输入c，微工作队列清空；
此时步骤1期待时长到期，将await后续代码console.log('a')入队；
持续步骤3，遇到then将console.log('d')入队，而后顺次取出console.log('a')和console.log('d')并执行，输入a和d；
执行完console.log('d')遇到then将console.log('e')放入队列，取出执行，输入e;

的确有点绕，咱们将1个then期待时长看做是下一个微工作从入队到执行实现出队的工夫就好。比方这里c工作执行实现，下一个工作d正筹备进入被a插了队。

await值为Promise

async function foo() {
  await Promise.resolve('foo')
  console.log('a')
}
foo().then(() => console.log('b'))
Promise.resolve()
  .then(() => console.log('c'))
  .then(() => console.log('d'))
  .then(() => console.log('e'))
// 输入后果 a c b d e

await前面表达式如果是Promise，和一般值的后果是一样，毋庸期待then时长。

为什么不和return为Promise的情景一样是2次呢？原来这是nodejs在前期版本优化后的后果：移除了2个微工作，1个throwaway promise，具体起因能够查看「译」更快的 async 函数和 promises。
。

对于晚期版本（node 11及以前），输入的后果是c d a e b，须要期待2个then期待时长。

foo()执行await是一个Promise，Promise状态变更，此时期待2个then时长；
持续往下执行同步工作Promise.resolve()，遇到then将console.log('c')退出到微工作队列，以后同步工作执行实现；
开始执行微工作队列，取出并执行console.log('c')，输入c，微工作队列清空；
遇到then将console.log('d')入队，去除并执行，输入d，微工作队列清空；
此时步骤1期待时长到期，将await后续代码console.log('a')入队；
持续步骤4，遇到then将console.log('e')入队，而后顺次取出console.log('a')和console.log('e')并执行，输入a和e；
执行完console.log('a')遇到then将console.log('b')放入队列，取出执行，输入b;

综合await表达式值的后果，咱们能够总结

综合async await

以上咱们仅仅从async的return值和await表达式值繁多视角来看，上面综合他们两个来剖析（对立在node 12+环境）。

await一个一般函数

首先，await是一个一般函数（非async函数）

function baz() {
  // console.log('baz')
  // return 'baz'

  // return {
  //   then(resolve) {
  //     console.log('baz')
  //     resolve()
  //   }
  // }

  return new Promise((resolve) => {
    console.log('baz')
    resolve()
  })
}

async function foo() {
  await baz()
  console.log('a')
}
foo().then(() => console.log('b'))
Promise.resolve()
  .then(() => console.log('c'))
  .then(() => console.log('d'))
  .then(() => console.log('e'))
// await baz函数return是一般值 输入后果是baz a c b d e
// await baz函数return是thenable 输入后果是 baz c a d b e
// await baz函数return是Promise 输入后果 baz a c b d e

与间接await表达式值输入统一。

baz函数return是一般值，不期待then时长；
baz函数return是thenable，期待1个then时长；

baz函数return是Promise，不期待then时长；

await一个async函数

而后将baz函数改成async

async function baz() {
// console.log('baz')
// return 'baz'

// return {
//   then(resolve) {
//     console.log('baz')
//     resolve()
//   }
// }

return new Promise((resolve) => {
  console.log('baz')
  resolve()
})
}

async function foo() {
await baz()
console.log('a')
}
foo().then(() => console.log('b'))
Promise.resolve()
.then(() => console.log('c'))
.then(() => console.log('d'))
.then(() => console.log('e'))
// await baz函数return是一般值 输入后果是baz a c b d e
// await baz函数return是thenable 输入后果是 baz c a d b e
// await baz函数return是Promise 输入后果 baz c d a e b
// node12 以下版本 await baz函数return是Promise 输入后果 baz c d e a b

从中咱们能够发现：await`async函数的期待时长与async baz函数的return`值期待时长保持一致。

async baz函数return是一般值，不期待then时长；
async baz函数return是thenable，期待1个then时长；
async baz函数return是Promise，期待2个then时长，然而在node12以下版本会期待3个then时长；

综合async、await、Promise、then和setTimeout

上面咱们综合async、await、Promise、then和setTimeout来看一道题目

const async1 = async () => {
  console.log('async1')
  setTimeout(() => {
    console.log('timer1')
  }, 2000)
  await new Promise((resolve) => {
    console.log('promise1')
    resolve()
  })
  console.log('async1 end')
  return Promise.resolve('async1 success')
}
console.log('script start')
async1().then((res) => console.log(res))
console.log('script end')
Promise.resolve(1)
  .then(Promise.resolve(2))
  .catch(3)
  .then((res) => console.log(res))
setTimeout(() => {
  console.log('timer2')
}, 1000)

思考几分钟，输入后果

// script start
// async1
// promise1
// script end
// async1 end
// 1
// async1 success
// timer2
// timer1

执行同步工作输入script start和async1，遇到setTimeout放入宏工作队列；
持续往下执行await表达式，执行new Promise输入promise1，Promise状态变更，不期待then时长，将后续代码增加到微工作队列；
持续往下执行输入script end，执行Promise.resolve(1)遇到then将Promise.resolve(2)放入微工作队列；
再往下执行遇到setTimeout放入宏工作队列，至此同步工作执行结束；
开始执行微工作队列，取出并执行步骤2的后续代码输入async1 end，返回一个已变更的Promise对象，须要期待2个then时长；
持续取出微工作Promise.resolve(2)并执行，状态为resolved前面走then;
遇到then将(res) => console.log(res)放入微工作队列，而后取出并执行输入1，留神：**then**中是非函数表达式会执行，默认返回的是上一个**Promise**的值，then(Promise.resolve(2))会透传上一层的1；
此时步骤5期待时长到期，将(res) => console.log(res)放入微工作队列，而后取出并执行输入async1 success；
最初2个定时器别离到期，输入timer2和timer1；

如果对这个案例再稍作革新

const async1 = async () => {
  console.log('async1')
  setTimeout(() => {
    console.log('timer1')
  }, 2000)
  await new Promise((resolve) => {
    console.log('promise1')
  })
  console.log('async1 end')
  return 'async1 success'
}
console.log('script start')
async1().then((res) => console.log(res))
console.log('script end')
Promise.resolve(1)
  .then(2)
  .then(Promise.resolve(3))
  .catch(4)
  .then((res) => console.log(res))
setTimeout(() => {
  console.log('timer2')
}, 1000)
// 输入后果：
// script start
// async1
// promise1
// script end
// 1
// timer2
// timer1

具体过程就不一一列举了，从输入后果能够发现：如果**await**表达式的**Promise**的状态没有变更，以下代码以及前面的**then**永远都不会执行。then的执行机会是在后面函数执行实现并且Promise状态变更当前才会被增加到微工作队列中期待执行。

总结

通过以上就是根本async`await的应用场景，以及综合then、Promise和setTimeout`的混合应用，大抵能够总结如下几条法则：

async函数的return值为thenable会期待1个then时长，值为Promise会期待2个时长；
await表达式值为thenable会期待1个then时长，值为Promise在node12+不期待then时长，低版本node期待2个then时长；
await一个async函数，async函数的return值为thenable会期待1个then时长，值为Promise在node12+会期待2个then时长，在低版本node期待3个then时长；
如果then中是非函数，表达式自身会执行，默认返回的是上一个Promise的值，也就是透传上一个Promise后果；
如果await表达式的Promise的状态没有变更，以下代码以及前面的then永远都不会执行；

以上案例均通过试验运行得出，流程如有解释谬误，欢送斧正，完~

关于前端:过程详解async-await综合题

前言

async 函数return值

return值为一般值

return值为thenable

return 值为Promise

await 表达式值

await值为一般值

await值为thenable

await值为Promise

综合async await

await一个一般函数

await一个async函数

综合async、await、Promise、then和setTimeout

总结

评论

发表回复取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

关于前端:过程详解async-await综合题

前言

async 函数return值

return值为一般值

return值为thenable

return 值为Promise

await 表达式值

await值为一般值

await值为thenable

await值为Promise

综合async await

await一个一般函数

await一个async函数

综合async、await、Promise、then和setTimeout

总结

评论

发表回复 取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

发表回复取消回复