回不去惹，用 await-to-js 讓你的 Promise 操作簡潔又俐落！

鱈魚的魚缸搬家了！新家文章有重新修訂，歡迎來新家看看喔。(´▽`ʃ♡ƪ)

前陣子意外注意到一個有趣的套件，名為 await-to-js。

主要用途是改寫 Promise 與 await 的寫法，具體如下。

具體差在哪？

假設原本的 Promise 是這樣：

let isLoading = true;
task().then(() => {
    console.log('done');
}).catch(() => {
    console.error('error');
}).finally(() => {
    isLoading = false;
});

用 await 會這樣寫。

let isLoading = true;
try {
	await task()
	console.log('done');
} catch(){
	console.error('error');
}
isLoading = false;

使用 await-to-js 改寫後變成：

import to from 'await-to-js';

let isLoading = true;
const [error] = await to(task())
isLoading = false;

if (error) {
  console.error('error');
  retuen;
}

console.log('done');

除了看起來比較簡潔，不用 try catch 外，配合 early return 很有效。

在前端可能還好，在後端各種連續 Promise 操作的場合配合 early return 很方便，從此以後寫法再也回不去了。XD

await-to-js 的實現很簡單，他的原始碼只有 22 行。

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

如果不想 npm install 的話，也可以直接貼到自己的專案使用。ヾ(◍'౪`◍)ﾉﾞ

所以所有的 Promise 都改用 await to 嗎？

當然不是這樣啦，await to 只是多一個選擇。

實際上還是有些地方更適合使用 then 或 try catch，請依照實際情況挑選適合的寫法喔。(｡･∀･)ﾉﾞ