2024-06-28|閱讀時間 ‧ 約 24 分鐘

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

raw-image

前陣子意外注意到一個有趣的套件,名為 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 操作的場合的很方便,從此以後寫法再也回不去了。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 的話,也可以直接貼到自己的專案使用。ヾ(◍'౪`◍)ノ゙

分享至
成為作者繼續創作的動力吧!
從 Google News 追蹤更多 vocus 的最新精選內容從 Google News 追蹤更多 vocus 的最新精選內容

鱈魚的魚缸 的其他內容

發表回應

成為會員 後即可發表留言
© 2024 vocus All rights reserved.