前言：

Promisification 是一個(gè)很長(zhǎng)的詞，表示一個(gè)編程范式的轉(zhuǎn)變，即將接受回調(diào)的函數(shù)轉(zhuǎn)換為一個(gè)返回類型為 Promise 的函數(shù)。

我們現(xiàn)實(shí)的開發(fā)項(xiàng)目中經(jīng)常需要這種轉(zhuǎn)換，因?yàn)樵S多函數(shù)和庫(kù)都是基于回調(diào)的，但是 Promise 更方便，所以對(duì)它們進(jìn)行 Promisification 處理是有意義的。

下面是一個(gè)簡(jiǎn)單的例子：

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);
}

這段代碼，動(dòng)態(tài)創(chuàng)建一個(gè) script 元素，待其加載完畢后，會(huì)觸發(fā) onload 事件指定的回調(diào)函數(shù)。

運(yùn)行時(shí)，loadScript 的調(diào)用者，負(fù)責(zé)指定回調(diào)函數(shù)：

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

下面我們將會(huì)對(duì)這個(gè)函數(shù)進(jìn)行 Promisification 改造。

我們將創(chuàng)建一個(gè)新函數(shù) loadScriptPromise(src)，它執(zhí)行相同的操作（加載腳本），但返回一個(gè) Promise 而不是使用回調(diào)。

換句話說(shuō)，我們只傳遞 src （沒(méi)有回調(diào)）并得到一個(gè) Promise 作為返回參數(shù)，當(dāng)加載成功時(shí)使用創(chuàng)建并加載好的 script 進(jìn)行 resolve，否則通過(guò) reject 拋出錯(cuò)誤。

改造后的函數(shù)：

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

消費(fèi)代碼：

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

正如我們所見，新函數(shù)是原始 loadScript 函數(shù)的包裝器。

在實(shí)踐中，我們可能需要 Promisify 多個(gè)函數(shù)，所以構(gòu)造一個(gè) helper 函數(shù)顯得更有意義。

我們稱這個(gè)函數(shù)為 promisify(f)：它接受一個(gè)準(zhǔn)備被改造成 Promise 的函數(shù) f， 并返回一個(gè) wrapper 函數(shù)。

完整實(shí)現(xiàn)如下：

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
    });
  };
}

消費(fèi)代碼：

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

到此這篇關(guān)于JavaScript 異步函數(shù) Promisification 處理詳情的文章就介紹到這了,更多相關(guān)JavaScript Promisification 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論