關於async/await的小悟

關於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）