关于async/await的小悟

• 需要具备的前置知识
• 对于 async/await 理解

需要具备的前置知识

• es6 promise
  • 阮一峰老师 promise 解析
• async await 基本使用以及原理解析
  • 理解 JavaScript 的 async/await
  • 8 张图让你一步步看清 async/await 和 promise 的执行顺序

对于 async/await 理解

简述

带 async 的函数（async function fn(){}），会返回 Promise 函数

• 如果 fn 返回的是 promise，就直接返回该 promise
• 如果 fn 返回的不是 promise，则调用 Promise.resolve()转成 promise 后返回

await 相当于 promise 构造函数中的 resolve 参数

• await 只能在 async 中使用，而 resolve 在 promise 构造函数中使用
• await 等待到的右侧表达式（promise 或其他）的值将作为 promise 中的终值（value）
• await 运算符是个从右往左运算的运算符
  • resolve 函数调用时也要先计算参数表达式的值
  • 反向思考，如果不先计算右侧表达式，那么 await（等待）的表达式就没有触发的时机啦
• await 和 resolve 不同的地方就是 await 会把后面的所有操作都“转移”到 then 中操作，因为 await 具有阻塞的效果

表达式表示

async function fn(){
code1...;
const value=await fn2();
code2...;
}
复制代码

类等于

new Promise(resolve=>{
code1...;
resolve(fn2());
}).then(value=>{
code2...;
})
复制代码

示例比较打印是否相同

• 示例 1(同步方法)：

function syncFun() {
  console.log('syncFun start')
  return 'value'
}
async function asyncFun() {
  console.log('async start')
  const value = syncFun()
  console.log('value=' + value)
  console.log('async end')
}
asyncFun()
console.log('main end')
复制代码

function syncFun() {
  console.log('syncFun start')
  return 'value'
}
new Promise(resolve => {
  console.log('promise start')
  const value = syncFun()
  console.log('value=' + value)
  console.log('promise end')
})
console.log('main end')
复制代码

• 示例 2(异步方法-接收数值)：

function syncFun() {
  console.log('syncFun start')
  return 'value'
}
async function asyncFun() {
  console.log('async start')
  const value = await syncFun()
  console.log('value=' + value)
  console.log('async end')
}
asyncFun()
console.log('main end')
复制代码

function syncFun() {
  console.log('syncFun start')
  return 'value'
}
new Promise(resolve => {
  console.log('promise start')
  resolve(syncFun())
}).then(value => {
  console.log('value=' + value)
  console.log('promise end')
})
console.log('main end')
复制代码

• 示例 3(异步方法-接收 promise)：

async function syncFun() {
  console.log('syncFun start')
  return 'value'
}
async function asyncFun() {
  console.log('async start')
  const value = await syncFun()
  console.log('value=' + value)
  console.log('async end')
}
asyncFun()
console.log('main end')
复制代码

async function syncFun() {
  console.log('syncFun start')
  return 'value'
}
new Promise(resolve => {
  console.log('promise start')
  resolve(syncFun())
}).then(value => {
  console.log('value=' + value)
  console.log('promise end')
})
console.log('main end')
复制代码

后话

没看过 async/await 的源码，只是根据使用的时候的直觉而写，如有不妥之处，欢迎指正（欢迎加微信 772345373）