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

> 原文链接：Better error handling with async/await，by Sobio Darlington

### callback hell
了解 Promise 原理，先從 callback hell 開始，因為 callback 的嵌套，會使程式碼向右邊排不而不是垂直向下排版

// 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
用來更好的處理異步問題，避免 callback hell 問題

// 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));

### async / await Promise
Promise 的語法糖，讓 Promise 更簡潔的寫法
在 function 前面加上 async 就可以將 function 轉換成 Promise

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

add(1, 2).then(result => conosle.log(result));

### async / await Promise 遇到的情境，及優化方式

async function userProfile() {
    let user = await getUser();
    let friendOfUser = await fetFriendOfUser(userId);
    let posts = await getUsersPosts(userId);
    
    showUserProfilePage(user, friendOfUser, posts);
}

在以上 如果有一個 Promise 失敗的話就會回傳一個 reject，會拋出 Unhandled promise rejection 異常。處理這問題比較容易的方式是在外層加一個 try...catch

async function userProfile() {
    try {
        let user = await getUser();
        let friendOfUser = await fetFriendOfUser(userId);
        let posts = await getUsersPosts(userId);
        
        showUserProfilePage(user, friendOfUser, posts);
    } catch (e) {
        console.log(e);
    }
}

但是無法知道是哪一個 Promise 發生錯誤，可以在異步請求上使用 catch

async function userProfile() {
    let user = await getUser().catch(e => console.log(e.message));
    let friendOfUser = await fetFriendOfUser(userId).catch(e => console.log(e.message));
    let posts = await getUsersPosts(userId).catch(e => console.log(e.message));
    
    showUserProfilePage(user, friendOfUser, posts);
}

### 更好的錯誤處理方式

 /**
 * @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 報錯，還能細度處理錯誤。
- 如果 Promise resolve，handle 回傳 [data, undefined]
- 如果 Promise reject，handle 回傳 [undefined, Error]

[[译] 在 async/await 中更好的处理错误](https://juejin.im/post/6844904071124500488#heading-12)