遮罩層沒有消失 - 我們來說說 async、promise 和 yield 之間的那些事

彭加李發表於2022-01-07
遮罩Promise

遮罩層沒有消失 - 我們來說說 async、promise 和 yield 之間的那些事

我們請求資料時，通常會先開啟一個 loading，資料回來後，做一些處理，然後再將 loading 關閉。

但有時也會出現 loading 沒有關閉的情況。就像這樣：

async function request() {
    console.log('開啟遮罩')
    let json = await requestUserList() // {1}
    // 處理資料...
    console.log('關閉遮罩');
}

request()

// 模擬 ajax 請求使用者列表
// code 等於 2000 則為成功，否則是失敗
function requestUserList(json = { code: 2001, msg: '引數不正確', data: {} }) {
    if (Object.is(json.code, 2000)) {
        Promise.resolve(json)
    } else {
        Promise.reject(`請求失敗：${json.msg}`)
    }
}

由於請求失敗，進入 reject，於是 await（行 {1}） 後面的程式碼將不在執行。

async 的本質

async 的本質是生成器。

Tip: 如果沒有接觸過生成器，可以看筆者的另一篇文章 - 迭代器 (Iterator) 和 生成器 (Generator)

接下來我將做一個實驗，首先用 async 寫一個小功能，再用生成器實現相同的功能。請看示例：

// 公共程式碼

let seed = 0
// 模擬ajax。一秒後返回資料
function fetchData(isResolve = true) {
    return new Promise((resolve, reject) => {
        let method = isResolve ? resolve : reject
        setTimeout(() => method({
            code: 200,
            data: seed++
        }), 1000)
    })
}

// async 版本

async function fn1() {
    let d1 = await fetchData()
    console.log(d1)
    let d2 = await fetchData()
    console.log(d2)
}
fn1()

/*
輸出：
{ code: 200, data: 0 }
{ code: 200, data: 1 }
*/

用生成器實現相同功能：

// 生成器版本

function fn2() {
    // 生成器
    function* generator() {
        let d1 = yield fetchData()
        console.log(d1)
        let d2 = yield fetchData()
        console.log(d2)
    }
    // 任務執行器
    return run(generator)
}

// 任務執行器。
// 由於執行 yield 會導致暫停當前函式，並等待下一次 next() 的呼叫，
// 因此我們可以建立一個函式，讓其自動幫我們依次呼叫 next()
function run(genF) {
    return new Promise((resolve, reject) => {
        let gen = genF()

        function step(nextF) {
            let next
            try {
                next = nextF()
            } catch (e) {
                return reject(e)
            }

            if (next.done) {
                return resolve(next.value)
            }
            Promise.resolve(next.value).then(
                v => step(() => gen.next(v)),
                e => step(() => gen.throw(e))
            )
        }
        step(() => gen.next())
    })
}

fn2()

/*
輸出：
{ code: 200, data: 0 }
{ code: 200, data: 1 }
*/

我們對比下核心功能：

// async 版本
async function fn1() {
    let d1 = await fetchData()
    console.log(d1)
    let d2 = await fetchData()
    console.log(d2)
}

// 生成器版本
function* generator() {
    let d1 = yield fetchData()
    console.log(d1)
    let d2 = yield fetchData()
    console.log(d2)
}

不同的地方就是：

  1. async 換成 *
  2. await 換成了 yield

async 內建執行器

async 通常有如下特性：

  • async 返回一個 Promise
  • 只要有一個 await 失敗，就不會在執行下面的程式碼，直接進入 reject
  • await 報錯，例如訪問一個不存在的變數 let d2 = await xx，也會進入 reject

請看示例：

async function fn1() {
    let d1 = await fetchData()
    console.log('d1: ', d1);
    let d2 = await xx
    console.log('d2: ', d2);
}
fn1().catch(() => { console.log('error') })

// d1:  { code: 200, data: 0 }
// error

這些特性由 async 內建執行器提供。我們通過上面提到的 run() 方法來分析:

// 任務執行器
function run(genF) {
    // 返回一個  promise
    return new Promise((resolve, reject) => {
        let gen = genF()

        function step(nextF) {
            let next
            try {
                next = nextF()
            } catch (e) { // 語句報錯，會被捕獲，並進入到 reject
                return reject(e)
            }

            // 處理迭代器結束的情況
            if (next.done) {
                return resolve(next.value)
            }
            // Promise.resolve(11) 等價於 new Promise(resolve => resolve(11))
            // 如果給 Promise.resolve() 方法傳入一個 Promise，那麼這個 Promise 會被直接返回
            Promise.resolve(next.value).then(           // {1}
                v => step(() => gen.next(v)),
                // 生成器丟擲錯誤，會讓 promise 進入 reject
                e => step(() => gen.throw(e))           // {2}
            )
        }
        step(() => gen.next())
    })
}

這裡有 2 處需要專門說一下：Promise.resolve(next.value) 和 gen.throw(e)。請接著看：

gen.throw(e)

執行 gen.throw(e) 會讓 Promise 進入 reject。

我們將這個現象提取出來做個實驗：建立一個 Promise，在內部的一個函式作用域內在定義一個生成器，並讓其丟擲錯誤

let aPromise = new Promise((resolve, reject) => {
    (function () {
        function* fn1() {
            yield 1
            yield 2
        }

        let gen = fn1()
        // 丟擲錯誤
        gen.throw()
    }())
})

aPromise.then(() => {
    console.log('then')
}).catch(() => {
    console.log('catch')
})

// catch

實驗表明：Promise 中的生成器，哪怕內嵌在函式作用域內，一旦生成器丟擲錯誤，Promise 將進入 reject。

Promise.resolve(next.value)

Promise.resolve(value)，只接受一個引數並返回一個 Promise，如果給 Promise.resolve() 方法傳入一個 Promise，那麼這個 Promise 會被直接返回。

它總是返回一個 promise 物件。這個特性很重要。而且 await 1（等價於 await Promise.resolve(1)） 就使用了此特性。

在不知道輸入是同步還是非同步的時候，很有用。比如我要統計一個輸入花費時間：

// 可能會報錯
const recordTime = (makeRequest) => {
  const timeStart = Date.now();
  makeRequest().then(() => { // throws error for sync functions (.then is not a function)
    const timeEnd = Date.now();
    console.log('time take:', timeEnd - timeStart);
  })
}

// 正常執行
const recordTime = async (makeRequest) => {
  const timeStart = Date.now();
  await makeRequest(); // works for any sync or async function
  const timeEnd = Date.now();
  console.log('time take:', timeEnd - timeStart);
}

使用 promise 還是 async/await

7 Reasons Why JavaScript Async/Await Is Better Than Plain Promises 這篇文章講述了 7 個 async/await 比 Promise 更好的方面。大部分我是贊同的，比如：

  • 更簡潔
const makeRequest = () =>
  getJSON()
    .then(data => {
      console.log(data)
      return "done"
    })

const makeRequest = async () => {
  console.log(await getJSON())
  return "done"
}
  • 更具可讀性
// 條件 - 有很多條件時，我們會這麼寫：
const makeRequest = () => {
  return getJSON()
    .then(data => {
      if (data.needsAnotherRequest) {
        return makeAnotherRequest(data)
          .then(moreData => {
            console.log(moreData)
            return moreData
          })
      } else {
        console.log(data)
        return data
      }
    })
}

// VS

const makeRequest = async () => {
  const data = await getJSON()
  if (data.needsAnotherRequest) {
    const moreData = await makeAnotherRequest(data)
    console.log(moreData)
    return moreData
  } else {
    console.log(data)
    return data    
  }
}

// 中間值：請求依賴中間值，可能會這麼寫
const makeRequest = () => {
  return promise1()
    .then(value1 => {
      // do something
      return promise2(value1)
        .then(value2 => {
          // do something          
          return promise3(value1, value2)
        })
    })
}

// VS

const makeRequest = async () => {
  const value1 = await promise1()
  const value2 = await promise2(value1)
  return promise3(value1, value2)
}

在前面我們已經知道 async/await 的本質就是生成器和執行器，而執行器（run() 方法）是通過 Promise 實現。所以 async 也就是 Promise 的語法糖，並且是一個實現了固定功能的語法糖。

所以，就靈活程度來講，Promise 可能更好。

所以，這兩個東西就不是替換關係，而是有他們各自使用的場景。

以下是我的一些個人習慣：

  • 只有一個非同步請求，並且需要處理錯誤情況，傾向 Promise
fetchData(false).then(() => {
    // do ...
}).catch(() => {
    console.log('error')
})

try {
    let p = await fetchData(false)
    // do ...
} catch (e) {
    console.log('error')
}
  • async/await 可以使用 try...catch 處理同步和非同步錯誤
async () => {
  try {
    let p1 = await fetchData()
    // 依賴於第一個請求的引數值
    let p2 = await fetchData(p1.role === 1 ? option1 : option2)
    // 其他複雜邏輯
  } catch (err) {
    // do something...
  }
}
  • 邏輯比較複雜，比如非同步巢狀、條件、中間值等等，使用 async

容易忽略的幾點

await 與並行

如果多個請求沒有依賴關係，就讓他們同時發出。

下面這段程式碼是序列：

async function foo() {
    let a = await createPromise(1)
    let b = await createPromise(2)
}

可以通過下面兩種方法改為並行：

// 方式一
async function foo() {
    let p1 = createPromise(1)
    let p2 = createPromise(2)
    // 至此，兩個非同步操作都已經發出
    await p1
    await p2
}

// 方式二
async function foo() {
    let [p1, p2] = await Promise.all([createPromise(1), createPromise(2)])
}

Tip：更多細節請看 async -> await 與並行。

錯誤堆疊

在 vue-cli + element-ui 這種專案（已配置 source-map）中測試，發現下面兩種寫法報錯都只能定位到行{2}。async 並不能定位到出錯的那一行（行{1}）：

const makeRequest = () => {
  return fetchData()
    .then(() => fetchData())
    .then(() => fetchData())
    .then(() => fetchData())
    .then(() => fetchData())
    .then(() => {
      throw new Error('oops')
    })
}

const makeRequest = async () => {
  await fetchData()
  await fetchData()
  await fetchData()
  await fetchData()
  await fetchData()
  throw new Error('oops')         // {1}
}

makeRequest()
  .catch(err => {
    // {2}
    console.log(err)
  })

除錯

async 有時會比 Promise 更容易除錯。請看示例：

const makeRequest = () => {
  return fetchData()
    .then(() => fetchData())
    .then(() => fetchData())
    // 不允許這麼寫
    .then(() => debugger fetchData())
    // 可以
    .then(() => {
      debugger
      fetchData()
    })
    .then(() => {
      throw new Error('oops')
    })
}

const makeRequest = async () => {
  await fetchData()
  await fetchData()
  await fetchData()
  await fetchData()
  // 最佳
  debugger
  await fetchData()
  throw new Error('oops')
}

yield 傳參注意點

直接看示例：

function* fn2() {
    let a = yield 1
    // 沒有傳參，a 的值也不會是 1
    console.log('a: ', a);
    let b = yield a + 2
    // 傳入 3，所以輸出 6
    yield b + 3
}

let gen = fn2()
console.log('gen.next(): ', gen.next())
console.log('gen.next(): ', gen.next())
console.log('gen.next(): ', gen.next(3))

// gen.next():  { value: 1, done: false }
// a:  undefined
// gen.next():  { value: NaN, done: false }
// gen.next():  { value: 6, done: false }

相關文章