快捷導(dǎo)航

JavaScript中async await更優(yōu)雅的錯誤處理方式

更新時間：2021年09月29日 10:58:42 作者：Gopal

async/await中的異常處理很讓人混亂,盡管有很多種方式來應(yīng)對async 函數(shù)的異常,但是連經(jīng)驗豐富的開發(fā)者有時候也會搞錯,所以這篇文章主要給大家介紹了關(guān)于JavaScript中async await更優(yōu)雅的錯誤處理方式的相關(guān)資料,需要的朋友可以參考下

背景

團(tuán)隊來了新的小伙伴，發(fā)現(xiàn)我們的團(tuán)隊代碼規(guī)范中，要給 async await 添加 try...catch。他感覺很疑惑，假如有很多個(不集中)，那不是要加很多個地方？那不是很不優(yōu)雅？

為什么要錯誤處理

JavaScript 是一個單線程的語言，假如不加 try ...catch ，會導(dǎo)致直接報錯無法繼續(xù)執(zhí)行。當(dāng)然不意味著你代碼中一定要用 try...catch 包住，使用 try...catch 意味著你知道這個位置代碼很可能出現(xiàn)報錯，所以你使用了 try...catch 進(jìn)行捕獲處理，并讓程序繼續(xù)執(zhí)行。

我理解我們一般在執(zhí)行 async await 的時候，一般運行在異步的場景下，這種場景一般不應(yīng)該阻塞流程的進(jìn)行，所以推薦使用了 try...catch 的處理。

async await 更優(yōu)雅的錯誤處理

但確實如那位同事所說，加 try...catch 并不是一個很優(yōu)雅的行為。所以我 Google 了一下，發(fā)現(xiàn) How to write async await without try-catch blocks in Javascript 這篇文章中提到了一種更優(yōu)雅的方法處理，并封裝成了一個庫——await-to-js。這個庫只有一個 function，我們完全可以將這個函數(shù)運用到我們的業(yè)務(wù)中，如下所示：

/**
 * @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]) // 執(zhí)行成功，返回數(shù)組第一項為 null。第二個是結(jié)果。
    .catch<[U, undefined]>((err: U) => {
      if (errorExt) {
        Object.assign(err, errorExt);
      }

      return [err, undefined]; // 執(zhí)行失敗，返回數(shù)組第一項為錯誤信息，第二項為 undefined
    });
}

export default to;

這里需要有一個前置的知識點：await 是在等待一個 Promise 的返回值。

正常情況下，await 命令后面是一個 Promise 對象，返回該對象的結(jié)果。如果不是 Promise 對象，就直接返回對應(yīng)的值。

所以我們只需要利用 Promise 的特性，分別在 promise.then 和 promise.catch 中返回不同的數(shù)組，其中 fulfilled 的時候返回數(shù)組第一項為 null，第二個是結(jié)果。rejected 的時候，返回數(shù)組第一項為錯誤信息，第二項為 undefined。使用的時候，判斷第一項是否為空，即可知道是否有錯誤，具體使用如下：

import to from 'await-to-js';
// If you use CommonJS (i.e NodeJS environment), it should be:
// const to = require('await-to-js').default;

async function asyncTaskWithCb(cb) {
     let err, user, savedTask, notification;

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

     [ err, savedTask ] = await to(TaskModel({userId: user.id, name: 'Demo Task'}));
     if(err) return cb('Error occurred while saving task');

    if(user.notificationsEnabled) {
       [ err ] = await to(NotificationService.sendNotification(user.id, 'Task Created'));
       if(err) return cb('Error while sending notification');
    }

    if(savedTask.assignedUser.id !== user.id) {
       [ err, notification ] = await to(NotificationService.sendNotification(savedTask.assignedUser.id, 'Task was created for you'));
       if(err) return cb('Error while sending notification');
    }

    cb(null, savedTask);
}