優雅的 Promise 封裝:提升開發效率的秘訣

作者: Calpa Liu
字數:4044
出版日期:October 15, 2018
更新日期:December 7, 2023
分類: #前端開發
#JavaScript

在日常開發,Promise 是不可或缺的工具,但通過封裝和抽象方法,我們可以避免不必要的重複代碼,寫出更加優雅和可維護的程式碼。例如,我們可以將任意函數轉化為具有異步能力的函數,或者將其改造成可以處理上千萬個並行請求的函數。我們還可以使用Web Worker來實現多線程處理,或者實現在執行某些操作後暫停若干秒再繼續。在這裡,讓我們一同動手,學習如何封裝這些功能,使我們的代碼更加強大和靈活。

promisify

無論什麼函數,我們也可以將它化為異步函數。

這裡使用 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}`);
}

runAsync

使用 Web Worker 來在獨立線程調用函數,避免阻塞 UI 交互。

我們首先會使用Blob 對象鏈接來創建一個 Worker,裡面的內容是純字符串的函數。

然後,馬上使用這個 worker,並返回一個 Promise

監聽 onmessageonerror 事件,然後處理返回的 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

如果想要一次性地幾千個請求的話,使用 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]

runPromisesInSeries

如果你想要一個個串聯,運行一系列的 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);

sleep

簡單來說,就是讓函數等若干秒,然後再執行下一步。

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

使用方法

async function sleepyWork() {
  console.log("等一秒");
  await sleep(1000);
  console.log("一秒過去了");
}

isPromiseLike

我們可以簡單容易地判斷一個目標是否類似 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

One more thing

上面提到的方法,都是從 30-seconds-of-code ,裡面提到很多可以在三十秒內閱讀,開箱即用的方法。

如果有時間的話,可以研讀一下裡面的代碼。

參考資料

  1. 30-seconds-of-code
  2. Promise.all() - MDN web docs
感謝您閱讀我的文章。歡迎隨時分享你的想法。
關於 Calpa

Calpa 擅長使用 TypeScript、React.js 和 Vue.js 開發Responsive Web Design網站。

此外,Calpa 積極參與香港和台灣的開源社區,曾在2019年的香港開源大會上擔任講者,提供工作經驗和見解。此外,他也在 GitHub 上公開分享個人博客程式碼,已獲得超過300顆星星和60個分支的支持。

更多前端開發技術文章:傳送門