await 錯誤捕獲實現(xiàn)方式源碼解析

更新時間：2022年12月25日 11:50:19 作者：codeniu

這篇文章主要為大家介紹了await 錯誤捕獲實現(xiàn)方式源碼示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

前言

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

資源：

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

Promise 的使用方法

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

示例代碼如下：

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

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

其他處理錯誤的方式：

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

當代碼中有大量的異步操作時，就需要有很多的try/catch 塊，代碼看起來就很臃腫，那么有什么更好的處理這些錯誤的辦法呢？

await-to-js

這個項目的 slogan 是：

Async await wrapper for easy error handling

異步等待包裝,方便錯誤處理

用法：

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

to 函數(shù)接收一個 Promise，然后將成功響應解析為數(shù)組，并將返回數(shù)據(jù)作為第二項。從捕獲中收到的錯誤作為第二項。

源碼

/**
 * @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;

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

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