[譯] 在 async/await 中更好的處理錯誤

本篇文章介紹在使用 async/await 語法時，一種更好的處理錯誤的方式。在此以前，你們也須要先了解下 Promise 的工做原理。

從回調地獄到 Promise

回調地獄（callback Hell），也稱爲「末日金字塔（Pyramid of Doom）」，是在開發者代碼中看到的一種反模式（anti-pattern），這種異步編程方式並不明智。- Colin Toh

因爲回調函數的嵌套，回調地獄 會使你的代碼向右排布而不是垂直向下排版。

爲了更直觀的反映回調函數，這裏舉了一個例子。

用戶資料案例 1

// Code that reads from left to right 
// instead of top to bottom

let user;
let friendsOfUser;

getUser(userId, function(data) {
  user = data;

  getFriendsOfUser(userId, function(friends) {
    friendsOfUser = friends;

    getUsersPosts(userId, function(posts) {
      showUserProfilePage(user, friendsOfUser, posts, function() {
        // Do something here

      });
    });
  });
});
複製代碼

Promise

Promise 是 ES2015（即俗稱的 ES6）引入的一個語言特性，用來更好的處理異步操做，避免回調地獄的出現。

下例中使用 Promise 的 .then 鏈來解決回調地獄問題。

用戶資料案例 2

// A solution with promises

let user;
let friendsOfUser;

getUser().then(data => {
  user = data;

  return getFriendsOfUser(userId);
}).then(friends => {
  friendsOfUser = friends;

  return getUsersPosts(userId);
}).then(posts => {
  showUserProfilePage(user, friendsOfUser, posts);
}).catch(e => console.log(e));
複製代碼

Promise 的處理方式更加乾淨和可讀。

async/await Promise

async/await 是一種特殊的語法，能夠用更簡潔的方式處理 Promise。

在 funtion 前加 async 關鍵字就能將函數轉換成 Promise。

全部的 async 函數的返回值都是 Promise。

例子

// Arithmetic addition function
async function add(a, b) {
  return a + b;
}

// Usage: 
add(1, 3).then(result => console.log(result));

// Prints: 4
複製代碼

使用 async/await，可讓「用戶資料案例 2」看起來更棒。

用戶資料案例 3

async function userProfile() {
  let user = await getUser();
  let friendsOfUser = await getFriendsOfUser(userId);
  let posts = await getUsersPosts(userId);

  showUserProfilePage(user, friendsOfUser, posts);
}
複製代碼

等等！有個問題

在「用戶資料案例 3」中，若是有一個 Promise reject 了，就會拋出 Unhandled promise rejection 異常。

在此以前寫的代碼都沒有考慮 Promise reject 的狀況。未處理的 reject Promise 過去會以靜默的方式失敗，這可能會使調試成爲噩夢。

不過如今，Promise reject 時會拋出一個錯誤了。

• Google Chrome 拋出的錯誤：VM664:1 Uncaught (in promise) Error
• Node 拋出的錯誤則相似這樣：(node:4796) UnhandledPromiseRejectionWarning: Unhandled promise rejection (r ejection id: 1): Error: spawn cmd ENOENT

[1] (node:4796) DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code。

No promise should be left uncaught（每一個 Promise 都要使用 .catch 處理）. - Javascript

注意，「用戶資料案例 2」中的 .catch 方法。若是沒有寫 .catch 塊的話，JavaScript 會在 Promise reject 的時候拋出 Unhandled promise rejection 錯誤。

處理「用戶資料案例 3」中的問題比較容易。只要使用 try...catch 塊包裝下 await 語句就能避免 Unhandled promise rejection 錯誤了。

用戶資料案例 4

async function userProfile() {
  try {
    let user = await getUser();
    let friendsOfUser = await getFriendsOfUser(userId);
    let posts = await getUsersPosts(userId);

    showUserProfilePage(user, friendsOfUser, posts);
  } catch(e) {
    console.log(e);
  }
}

複製代碼

問題解決了！

可是錯誤處理還能夠再優雅點嗎？

我怎麼知道報錯是來自哪個異步請求的呢？

能夠在異步請求上使用 .catch 方法來處理錯誤。

用戶資料案例 5

let user = await getUser().catch(e => console.log('Error: ', e.message));

let friendsOfUser = await getFriendsOfUser(userId).catch(e => console.log('Error: ', e.message));

let posts = await getUsersPosts(userId).catch(e => console.log('Error: ', e.message));

showUserProfilePage(user, friendsOfUser, posts);
複製代碼

上面的解決方案將處理來自請求的單個錯誤，可是會混合使用多種模式。應該有一種更乾淨的方法來使用 async/await 而不使用 .catch 方法（嗯，若是你不介意的話，能夠這樣作）。

個人更好的 async/await 錯誤處理方案

用戶資料案例 6

/**
 * @description ### Returns Go / Lua like responses(data, err) 
 * when used with await
 *
 * - Example response [ data, undefined ]
 * - Example response [ undefined, Error ]
 *
 *
 * When used with Promise.all([req1, req2, req3])
 * - Example response [ [data1, data2, data3], undefined ]
 * - Example response [ undefined, Error ]
 *
 *
 * When used with Promise.race([req1, req2, req3])
 * - Example response [ data, undefined ]
 * - Example response [ undefined, Error ]
 *
 * @param {Promise} promise
 * @returns {Promise} [ data, undefined ]
 * @returns {Promise} [ undefined, Error ]
 */
const handle = (promise) => {
  return promise
    .then(data => ([data, undefined]))
    .catch(error => Promise.resolve([undefined, error]));
}

async function userProfile() {
  let [user, userErr] = await handle(getUser());

  if(userErr) throw new Error('Could not fetch user details');

  let [friendsOfUser, friendErr] = await handle(
    getFriendsOfUser(userId)
  );

  if(friendErr) throw new Error('Could not fetch user\'s friends');

  let [posts, postErr] = await handle(getUsersPosts(userId));

  if(postErr) throw new Error('Could not fetch user\'s posts');

  showUserProfilePage(user, friendsOfUser, posts);
}
複製代碼

這裏使用了一個工具函數 handle，如此就能夠避免 Unhandled promise rejection 報錯，還能細粒度的處理錯誤。

解釋

handle 函數接受一個 Promise 對象做爲參數，並老是 resolve 它，以 [data|undefined, Error|undefined] 的形式返回結果。

• 若是 Promise resolve 了，handle 函數返回 [data, undefined]；
• 若是 Promise reject 了，handle 函數返回 [undefined, Error]。

相似的解決方案

• 如何更輕鬆的處理 async/await 中的錯誤，Jesse Warden
• NPM 包 - await-to-js

結論

async/await 的語法很簡潔，但你仍是要處理異步函數裏的拋出的錯誤。

除非你實現了自定義錯誤類（custom error classes），不然很難處理 Promise.then 鏈中的 .catch 錯誤處理。

使用 handle 工具函數，咱們能夠避免 Unhandled promise rejection 報錯，還能細粒度的處理錯誤。

（正文完）

做者：zhangbao90s
連接：http://www.javashuo.com/article/p-vrozxkno-z.html