關於那些變化萬千,開箱即用的 Promise 高度封裝方法
出版:2018-10-15
在日常開發中,我們少不了使用 Promise,而透過封裝抽象方法,可以避免造輪子,寫出更加優雅的代碼。例如:將任意函數,化為具有異步能力的函數、改裝成具有並發上千萬請求的函數、使用 Web Worker 來使用不同線程、暫停若干秒再繼續。這裡就讓我們一起來動手封裝這些方法吧。
無論什麼函數,我們也可以將它化為異步函數。
這裡使用 currying 來返回一個函數,再返回一個 Promise 來調用原本的函數。
而且,可以用 ...rest
來傳遞所有參數,而不是 arguments
。
const promisify = func => (...args) =>
new Promise((resolve, reject) =>
func(...args, (err, result) => (err ? reject(err) : resolve(result)))
);
const delay = promisify((d, cb) => setTimeout(cb, d));
delay(2000).then(() => console.log("Hello World!"));
值得一提的是,如果你的 Node.js 版本為 8 以上,你可以使用 util.promisify
。
const util = require("util");
const fs = require("fs");
const stat = util.promisify(fs.stat);
stat(".")
.then(stats => {
// 做你要做的事情
})
.catch(error => {
// 處理錯誤
});
你也可以使用 async/await 版本:
const util = require("util");
const fs = require("fs");
const stat = util.promisify(fs.stat);
async function callStat() {
const stats = await stat(".");
console.log(`This directory is owned by ${stats.uid}`);
}
使用 Web Worker 來在獨立線程調用函數,避免阻塞 UI 交互。
我們首先會使用Blob
對象鏈接來創建一個 Worker
,裡面的內容是純字符串的函數。
然後,馬上使用這個 worker,並返回一個 Promise
。
監聽 onmessage
及 onerror
事件,然後處理返回的 data。
代碼片段:
const runAsync = fn => {
const worker = new Worker(
URL.createObjectURL(new Blob([`postMessage((${fn})());`]), {
type: "application/javascript; charset=utf-8"
})
);
return new Promise((res, rej) => {
worker.onmessage = ({ data }) => {
res(data), worker.terminate();
};
worker.onerror = err => {
rej(err), worker.terminate();
};
});
};
使用例子:
const longRunningFunction = () => {
let result = 0;
for (let i = 0; i < 1000; i++) {
for (let j = 0; j < 700; j++) {
for (let k = 0; k < 300; k++) {
result = result + i + j + k;
}
}
}
return result;
};
runAsync(longRunningFunction).then(console.log); // 209685000000
runAsync(() => 10 ** 3).then(console.log); // 1000
值得注意的是,由於函數運行的環境不同,所有變量和函數都需要在裡面定義。
使用外部變量的話,會出現問題:
let outsideVariable = 50;
runAsync(() => typeof outsideVariable).then(console.log); // 'undefined'
如果想要一次性地幾千個請求的話,使用 Promise.all()
方法就可以達到並發的效果了。
const test = time =>
new Promise(resolve => {
setTimeout(() => resolve(time), time);
});
const temp = [test(1000), test(2000), test(3000)];
Promise.all(temp).then(console.log); // [1000, 2000, 3000]
如果你想要一個個串聯,運行一系列的 Promise
的話,可以使用 Array.prototype.reduce()
來製造一個 Promise 的鏈。當下個 Promise resolved
, 返回上一個 Promise。
const runPromisesInSeries = ps =>
ps.reduce((p, next) => p.then(next), Promise.resolve());
const delay = time =>
new Promise(resolve => {
console.log(time);
setTimeout(resolve, time);
});
const promiseSeries = [() => delay(1000), () => delay(2000)];
runPromisesInSeries(promiseSeries);
簡單來說,就是讓函數等若干秒,然後再執行下一步。
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
async function sleepyWork() {
console.log("等一秒");
await sleep(1000);
console.log("一秒過去了");
}
我們可以簡單容易地判斷一個目標是否類似 Promise
。
我們可以使用判斷對象是否為 null
,而且 typeof
的返回值是 object
或者 function
,而且它擁有 .then
的屬性。
const isPromiseLike = obj =>
obj !== null &&
(typeof obj === "object" || typeof obj === "function") &&
typeof obj.then === "function";
const promise = new Promise(resolve => {
resolve();
});
isPromiseLike(promise); // true
isPromiseLike({
then: function() {
return "";
}
}); // true
isPromiseLike(null); // false
isPromiseLike({}); // false
值得注意的是:
這個方法只是一個判斷類似 Promise
,並非完全等於 Promise
。
const fakePromise = {
then: () => {}
};
isPromiseLike(fakePromise); // true
上面提到的方法,都是從 30-seconds-of-code ,裡面提到很多可以在三十秒內閱讀,開箱即用的方法。
如果有時間的話,可以研讀一下裡面的代碼。
Calpa 是一個四天工作的系統架構師,日常幫助客戶構建一站式網站應用,手機應用,雲端架構。
2023 年 9 月,Calpa 收到來自國內外不同 Web3 團隊的邀請,參加韓國的 KBW 2023 和新加坡的 TOKEN 2049 活動。十二月份,Calpa 將參加台北區塊鏈週的 Hackathon 比賽。
Calpa 擅長運用各種前沿技術,包括 TypeScript、React.js 和 Vue.js,開發具有 Responsive Web Design 的網站。另外,他透過運用 aws-cdk 和 TypeScript 技術的融合,實現了基於雲端的「基礎即代碼」(Infrastructure as Code)部署策略,建立了多套高效且具有可伸縮性的全端架構。
同時,Calpa 積極參與各個社群,活躍於香港和台灣的開源社區,分享前沿知識。他曾在 2019 年的香港開源大會中擔任重要講者,為聽眾提供寶貴的工作經驗和深刻見解。此外,Calpa 在 GitHub 上公開分享了個人博客程式碼,已獲得超過 300 顆星星和 60 個分支。
如果您對系統架構有任何問題,或需要進一步交流,請隨時聯絡 Calpa,他非常歡迎討論。