JavaScript 如何優雅的處理 async/await 異常

Async/await 是 ES7 中的新特性，它可以讓開發者編寫異步代碼像同步代碼一樣，它的優勢我們通過 Async/Await 這篇文章來了解。

的確它給我們帶來了很多方便的地方，但是在 async/await 中如何來處理錯誤呢？在異步的調用中，會產生各種不同的錯誤，例如：HTTP 請求產生了錯誤、訪問 DB 產生的異常、操作文件產生異常。在 Promise 的使用中，當承諾遇到了錯誤，它會拋出一個異常，該異常將被捕獲到一個方法回調中。在 async/await 中，我們又如何處理呢，當然很多人會回答：使用 try/catch 來捕獲這些錯誤，這樣一來代碼會看起來像這樣：

async function asyncFunc() {
    try {
        const product = await Api.product({ id : 10 });
        if(!product) {
            console.log('No product found');
        }
    }
    catch(err) {
        console.log(err);
    }

    try {
        const saveProduct = await Api.save({
            id: product.id,
            name: product.name
        });
    }
    catch(err) {
        console.log(err);
    }

}

回顧上面的代碼，try/catch 的確可以來解決錯誤異常的處理，但是讓代碼非常的不干凈，原本 async/await 的優勢就是讓代碼更佳的簡約，這樣一來又違背了它的初中，這讓我們進入了新的思考。

// to.js
export default function to(promise) {
   return promise.then(data => {
      return [null, data];
   })
   .catch(err => [err]);
}

這一個工具方法接收一個承諾，讓后將異步獲取到的數據作為返回數組的第二個值，捕捉到的錯誤作為返回數組第一個值。然后我們的異步代碼會變成這樣：

import to from './to.js';

async function asyncFunc() {
    let err, product, saveProduct;

    [err, product] = await to(Api.product({ id : 10 }));
    if(!product) {
        console.log('No product found');
    }

    [err, saveProduct] = await to(Api.save({
        id: product.id,
        name: product.name
    }));

    if(err) {
        console.log(err);
    }
}

由此一來，async/await 又回到了最初的簡潔。