鱈魚的魚缸搬家了！新家文章有重新修訂，歡迎來新家看看喔。(´▽`ʃ♡ƪ)
前陣子意外注意到一個有趣的套件，名為 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，請依照實際情況挑選適合的寫法喔。(｡･∀･)ﾉﾞ
