`Promisification` 是一個很長的詞，表示一個程式設計正規化的轉變，即將接受回撥的函式轉換為一個返回型別為 Promise 的函式。

我們現實的開發專案中經常需要這種轉換，因為許多函式和庫都是基於回撥的，但是 Promise 更方便，所以對它們進行 Promisification 處理是有意義的。

下面是一個簡單的例子。

```javascript
function loadScript(src, callback) {
  let script = document.createElement('script');
  script.src = src;

script.onload = () => callback(null, script);
  script.onerror = () => callback(new Error(`Script load error for ${src}`));

document.head.append(script);
}
```

這段程式碼，動態建立一個 script 元素，待其載入完畢後，會觸發 onload 事件指定的回撥函式。

執行時，loadScript 的呼叫者，負責指定回撥函式：

```javascript
loadScript('path/script.js', (err, script) => {...})
```

下面我們將會對這個函式進行 Promisification 改造。

我們將建立一個新函式 loadScriptPromise(src)，它執行相同的操作（載入指令碼），但返回一個 Promise 而不是使用回撥。

換句話說，我們只傳遞 src （沒有回撥）並得到一個 Promise 作為返回引數，當載入成功時使用建立並載入好的 script 進行 resolve，否則透過 reject 丟擲錯誤。

改造後的函式：

```javascript
let loadScriptPromise = function(src) {
  return new Promise((resolve, reject) => {
    loadScript(src, (err, script) => {
      if (err) reject(err);
      else resolve(script);
    });
  });
};
```

消費程式碼：

```javascript
loadScriptPromise('path/script.js').then(...)
```

正如我們所見，新函式是原始 loadScript 函式的包裝器。

在實踐中，我們可能需要 Promisify 多個函式，所以構造一個 helper 函式顯得更有意義。

我們稱這個函式為 promisify(f)：它接受一個準備被改造成 Promise 的函式 f， 並返回一個 wrapper 函式。

完整實現如下：

```javascript
function promisify(f) {
  return function (...args) { // return a wrapper-function (*)
    return new Promise((resolve, reject) => {
      function callback(err, result) { // our custom callback for f (**)
        if (err) {
          reject(err);
        } else {
          resolve(result);
        }
      }

args.push(callback); // append our custom callback to the end of f arguments

f.call(this, ...args); // call the original function
    });
  };
}

```

消費程式碼：

```javascript
let loadScriptPromise = promisify(loadScript);
loadScriptPromise(...).then(...);
```

JavaScript 非同步函式的 Promisification 處理

相關文章