前言

Promise 是一種在 JavaScript 中用于處理異步操作的機(jī)制。Promise 在開(kāi)發(fā)中被廣泛使用，這篇文章將學(xué)習(xí)如何優(yōu)雅的捕獲 await 的錯(cuò)誤。

資源：

• 倉(cāng)庫(kù)地址：await-to-js
• 參考文章：How to write async await without try-catch blocks in Javascript (grossman.io)

Promise 的使用方法

• 創(chuàng)建一個(gè) Promise 實(shí)例。這通常是通過(guò)調(diào)用 Promise 構(gòu)造函數(shù)來(lái)完成的，并將一個(gè)函數(shù)作為參數(shù)傳遞給構(gòu)造函數(shù)，該函數(shù)接收兩個(gè)參數(shù)：resolve 和 reject。resolve 和 reject 分別用于處理 Promise 的成功和失敗結(jié)果。
• 在函數(shù)體內(nèi)執(zhí)行異步操作。當(dāng)異步操作完成時(shí)，如果執(zhí)行成功，則調(diào)用 resolve 函數(shù)來(lái)將 Promise 的狀態(tài)變?yōu)?ldquo;已完成”，并將結(jié)果作為參數(shù)傳遞給 resolve 函數(shù)；如果執(zhí)行失敗，則調(diào)用 reject 函數(shù)將 Promise 的狀態(tài)變?yōu)?ldquo;已拒絕”，并將失敗的原因作為參數(shù)傳遞給 reject 函數(shù)。
• 使用 then 方法來(lái)處理 Promise 的成功和失敗結(jié)果。then 方法接收兩個(gè)參數(shù)：一個(gè)處理成功結(jié)果的函數(shù)和一個(gè)處理失敗結(jié)果的函數(shù)。在 Promise 狀態(tài)變?yōu)?ldquo;已完成”或“已拒絕”后，then 方法會(huì)自動(dòng)執(zhí)行相應(yīng)的處理函數(shù)。

示例代碼如下：

const myPromise = new Promise(function(resolve, reject) {
  // 執(zhí)行異步操作
  setTimeout(function() {
    // 異步操作成功
    resolve('Success');
  }, 1000);
});
// 處理 Promise 的成功和失敗結(jié)果
myPromise.then(function(result) {
  // 處理成功結(jié)果
  console.log(result);
}).catch(function(err){
  // 處理失敗
  console.log(err)
})

異步函數(shù)正在等待 Promise，因此當(dāng) promise 遇到錯(cuò)誤時(shí)，它會(huì)拋出一個(gè)異常，該異常將在 promise 的 catch 方法中捕獲。

其他處理錯(cuò)誤的方式：

try{
    const res = await myPromise()
}catch(e){
    console.log(e)
}

當(dāng)代碼中有大量的異步操作時(shí)，就需要有很多的try/catch 塊，代碼看起來(lái)就很臃腫，那么有什么更好的處理這些錯(cuò)誤的辦法呢？

await-to-js

await-to-js

這個(gè)項(xiàng)目的 slogan 是：

Async await wrapper for easy error handling

異步等待包裝,方便錯(cuò)誤處理

用法：

import to from 'await-to-js';
[ err, user ] = await to(UserModel.findById(1));
if(!user) return cb('No user found');

to 函數(shù)接收一個(gè) Promise，然后將成功響應(yīng)解析為數(shù)組，并將返回?cái)?shù)據(jù)作為第二項(xiàng)。從捕獲中收到的錯(cuò)誤作為第二項(xiàng)。

源碼

/**
 * @param { Promise } promise
 * @param { Object= } errorExt - Additional Information you can pass to the err object
 * @return { Promise }
 */
export function to<T, U = Error> (
  promise: Promise<T>,
  errorExt?: object
): Promise<[U, undefined] | [null, T]> {
  return promise
    .then<[null, T]>((data: T) => [null, data])
    .catch<[U, undefined]>((err: U) => {
      if (errorExt) {
        const parsedError = Object.assign({}, err, errorExt);
        return [parsedError, undefined];
      }
      return [err, undefined];
    });
}
export default to;

接收一個(gè) Promise 實(shí)例和一個(gè)可選的 errorExt 對(duì)象作為參數(shù)。該函數(shù)返回一個(gè)新的 Promise。

原理是使用 then 方法處理 Promise 的成功結(jié)果，并使用 catch 方法處理 Promise 的失敗結(jié)果。如果 Promise 執(zhí)行成功，則會(huì)將結(jié)果包裝成一個(gè)包含兩個(gè)元素的數(shù)組并作為新的 Promise 的成功結(jié)果返回；如果 Promise 執(zhí)行失敗，則會(huì)將錯(cuò)誤對(duì)象包裝成一個(gè)包含兩個(gè)元素的數(shù)組并作為新的 Promise 的失敗結(jié)果返回。

總結(jié)

使用await-to-js,得以一行代碼完成對(duì)異步代碼錯(cuò)誤的捕獲，閱讀文章得知，await-to-js 是作者通過(guò)goLang啟發(fā)得來(lái)的靈感。更加說(shuō)明了融會(huì)貫通，學(xué)以致用的重要性。

以上就是await 錯(cuò)誤捕獲實(shí)現(xiàn)方式源碼解析的詳細(xì)內(nèi)容，更多關(guān)于await 錯(cuò)誤捕獲的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！