[[403926]]

本文轉(zhuǎn)載自微信公眾號「五月君」，作者五月君。轉(zhuǎn)載本文請聯(lián)系五月君公眾號。

“Give me a promise, I will not go anywhere, just stand here and wait for you.”

“給我一個承諾，我哪里都不會去，就在原地等你。” 這句話形式 Promise 還挺有意思的，文中我會在提及!

隨著 ES6 標準的出現(xiàn)，給我們帶來了一個新的異步解決方案 Promise。目前絕大多數(shù) JavaScript 新增的異步 API 無論是在瀏覽器端還是 Node.js 服務(wù)端都是基于 Promise 構(gòu)建的，以前基于 Callback 形式的也有解決方案將其轉(zhuǎn)為 Promise。

看過筆者上一節(jié)對 “Promise 前世 Deferred 的講解”，對于本章學(xué)習(xí)相對會更輕松一些，開始前我們還是先了解下 Promise/A+ 規(guī)范，更好的理解下 Promise 的一些思想和規(guī)則。

了解下 Promise 是什么?

Promise 是一個對象用來表示異步操作的結(jié)果，我們沒有辦法同步的知道它的結(jié)果，但是這個結(jié)果可以用來表示未來值，將來的某個時間點我們可以拿到該值，它可能成功，也可能失敗，也會一直等待下去(這個請看下文 “無法取消的承諾”)。

在 Promise A+ 規(guī)范中有一些專業(yè)的術(shù)語，先了解下：

• fulfill：Promise 在成功時的一個結(jié)果，表示解決，在很多的 Promise 實現(xiàn)中會使用 resolve 代替，這是一個意思，通常在 resolve 里我們接收程序的正確響應(yīng)。
• reject：Promise 在失敗時的一個結(jié)果，通常在 reject 里我們接收一個錯誤信息。
• eventual value：代表終值，這是 Promise 被解決時傳遞給解決回調(diào)的值，例如 resolve(value) 這時 Promise 狀態(tài)就會結(jié)束進入 fulfill。
• reason：拒因，指 Promise 在被拒絕時傳遞給拒絕回調(diào)的值，例如 reject(reason) 這時 Promise 狀態(tài)結(jié)束進入 reject。

這些概念在我們想要更深入的了解 Promise 是需要的，例如，我們實現(xiàn)一個自己的 Promise 最好也是按照這種規(guī)范去做，本節(jié)我們主要將 Promise 的基礎(chǔ)使用，后面也會在異步進階里去講 Promise 的實現(xiàn)原理，實現(xiàn)一個自己的 Promise 對象。

Promise 狀態(tài)流轉(zhuǎn)

一個 Promise 在被創(chuàng)建出來時是一個等待態(tài)，最后要么成功、要么失敗這個狀態(tài)是不能夠逆轉(zhuǎn)的：

• 等待態(tài)(Pending)
• 執(zhí)行態(tài)(Fulfilled)
• 拒絕態(tài)(Rejected)

這幾個狀態(tài)流轉(zhuǎn)就像一個狀態(tài)機，通過這個圖也可看到狀態(tài)只能從 Pending -> Fulfilled 或 Pending -> Rejected

將一個 Callback 改造為 Promise

目前有些 API 直接是基于 Promise 的形式，例如 Fetch API 從網(wǎng)絡(luò)獲取數(shù)據(jù)。

fetch('http://example.com/movies.json') 
  .then(function(response) { 
    // TODO 
  }); 

舉一個 Node.js 的示例，例如 fs.readFile() 這個 API 默認是 callback 的形式，如果要轉(zhuǎn)為 Promise 也很方便。

fs.readFile('xxx', function(err, result) { 
  console.error('Error: ', err);  
  console.log('Result: ', result); 
}); 

方式一：new Promise 實現(xiàn)

new Promise() 是創(chuàng)建一個新的 Promise 對象，之后我們可以在里面使用 resolve、reject 返回結(jié)果信息。

const readFile = filename => new Promise((resolve, reject) => { 
 fs.readFile(filename, (err, file) => { 
   if (err) { 
     reject(err); 
    } else { 
     resolve(file); 
    } 
  }) 
}); 
 
readFile('xxx') 
 .then(result => console.log(result)) 
  .catch(err => console.log(err)); 

方式二：Node.js util.promisify 工具

Node.js util 模塊提供了很多工具函數(shù)。為了解決回調(diào)地獄問題，Nodejs v8.0.0 提供了 promisify 方法可以將 Callback 轉(zhuǎn)為 Promise 對象。筆者之前也曾寫過一篇解析 “Node.js 源碼解析 util.promisify 如何將 Callback 轉(zhuǎn)為 Promise”

const { promisify } = require('util'); 
const readFilePromisify = util.promisify(fs.readFile); // 轉(zhuǎn)為 Promise 
 
readFilePromisify('xxx') 
  .then(result => console.log(result)) 
  .catch(err => console.log(err)); 

除此之外 Node.js fs 模塊的 fs.promises API 提供了一組備用的異步文件系統(tǒng)的方法，它們返回 Promise 對象而不是使用回調(diào)。API 可通過 require('fs').promises 或 require('fs/promises') 訪問。

const fsPromises = require('fs/promises'); 
fsPromises('xxx') 
  .then(result => console.log(result)) 
  .catch(err => console.log(err)); 

Promise 錯誤管理

Promise 實例提供了兩種錯誤捕獲的方式：一是 Promise.then() 方法傳入第二個參數(shù)，另一種是 Promise 實例的 catch() 方法。

• .then() 第二個回調(diào)參數(shù)捕獲錯誤具有就近的原則，不會影響后續(xù) then 的進行。
• Promise 拋錯具有冒泡機制，能夠不斷傳遞，可以使用 catch() 統(tǒng)一處理。

const ajax = function(){ 
  console.log('promise 開始執(zhí)行'); 
  return new Promise(function(resolve,reject){ 
    setTimeout(function(){ 
      reject(`There's a mistake`); 
    },1000); 
  }); 
} 
 
ajax() 
  .then(function(){ 
    console.log('then1'); 
    return Promise.resolve(); 
  }, err => { 
    console.log('then1里面捕獲的err: ', err); 
  }) 
  .then(function(){ 
    console.log('then2'); 
    return Promise.reject(`There's a then mistake`); 
  }) 
  .catch(err => { 
    console.log('catch里面捕獲的err: ', err); 
  }); 
 
// 輸出 
// promise開始執(zhí)行 
// then1里面捕獲的err:  There's a mistake 
// then2 
// catch里面捕獲的err:  There's a then mistake 

Promise 幾個方法

Promise.all() 并行執(zhí)行

Promise.all() 以數(shù)組的形式接收多個 Promise 實例，內(nèi)部好比一個 for 循環(huán)執(zhí)行傳入的多個 Promise 實例，當(dāng)所有結(jié)果都成功之后返回結(jié)果，執(zhí)行過程中一旦其中某個 Promise 實例發(fā)生 reject 就會觸發(fā) Promise.all() 的 catch() 函數(shù)。以下示例，加載 3 張圖片，如果全部成功之后渲染結(jié)果到頁面中。

function loadImg(src){ 
  return new Promise((resolve,reject) => { 
    let img = document.createElement('img'); 
    img.src = src; 
    img.onload = () => { 
      resolve(img); 
    } 
    img.onerror = (err) => { 
      reject(err) 
    } 
  }) 
} 
function showImgs(imgs){ 
  imgs.forEach(function(img){ 
    document.body.appendChild(img) 
  }) 
} 
Promise.all([ 
  loadImg('http://www.xxxxxx.com/uploads/1.jpg'), 
  loadImg('http://www.xxxxxx.com/uploads/2.jpg'), 
  loadImg('http://www.xxxxxx.com/uploads/3.jpg') 
]).then(showImgs) 

在 Promise 鏈式調(diào)用中，任意時刻都只有一個任務(wù)執(zhí)行，下一個任務(wù)要等待這個任務(wù)完成之后才能執(zhí)行，如果現(xiàn)在我有兩個或以上的任務(wù)，之間沒有順序依賴關(guān)系，希望它們能夠并行執(zhí)行，這樣可以提高效率，此時就可以選擇 Promise.all()。

Promise.race() 率先執(zhí)行

Promise.race() 只要其中一個 Promise 實例率先發(fā)生改變，其它的將不在響應(yīng)。好比短跑比賽，我只想知道第一是誰，當(dāng)?shù)谝粋€人跨越終點線之后，我的目的就達到了。還是基于上面的示例，只要有一個圖片加載完成就直接添加到頁面。

function showImgs(img){ 
  let p = document.createElement('p'); 
  p.appendChild(img); 
  document.body.appendChild(p); 
} 
 
Promise.race([ 
  loadImg('http://www.xxxxxx.com/uploads/1.jpg'), 
  loadImg('http://www.xxxxxx.com/uploads/2.jpg'), 
  loadImg('http://www.xxxxxx.com/uploads/3.jpg') 
]).then(showImgs) 

Promise.finally()

Promise 在執(zhí)行后最終結(jié)果要么成功進入 then，要么失敗 進入 catch。也許某些時候我們需要一個總是能夠被調(diào)用的回調(diào)，以便做一些清理工作，ES7 新加入了 finally 也許是你不錯的選擇。

Promise.finally() 在 Node.js 10.3.0 版本之后支持。

const p = Promise.resolve(); 
p 
 .then(onSuccess) 
 .catch(onFailed) 
 .finally(cleanup); 

Promise.any()

Promise.any() 接收一個數(shù)組作為參數(shù)，可傳入多個 Promise 實例，只要其中一個 Promise 變?yōu)?Fulfilled 狀態(tài)，就返回該 Promise 實例，只有全部 Promise 實例都變?yōu)?Rejected 拒絕態(tài)，Promise.any() 才會返回 Rejected。Promise.any() 在 Node.js 15.14.0 版本之后支持。

Promise.any([ 
  Promise.reject('FAILED'), 
  Promise.resolve('SUCCESS1'), 
  Promise.resolve('SUCCESS2'),  
]).then(result => { 
  console.log(result); // SUCCESS1 
}); 

Promise.allSettled()

Promise.allSettled() 與 Promise.all() 類似，不同的是 Promise.allSettled() 執(zhí)行完成不會失敗，它會將所有的結(jié)果以數(shù)組的形式返回，我們可以拿到每個 Promise 實例的執(zhí)行狀態(tài)和結(jié)果。

Promise.allSettled() 在 Node.js 12.10.0 版本之后支持。

Promise.allSettled([ 
  Promise.reject('FAILED'), 
  Promise.resolve('SUCCESS1'), 
  Promise.resolve('SUCCESS2'),  
]).then(results => { 
  console.log(results); 
}); 
 
// [ 
//   { status: 'rejected', reason: 'FAILED' }, 
//   { status: 'fulfilled', value: 'SUCCESS1' }, 
//   { status: 'fulfilled', value: 'SUCCESS2' } 
// ] 

無法取消的承諾

剛開始引用了一句話 “Give me a promise, I will not go anywhere, just stand here and wait for you.” 就好比一個小伙子對一個心儀的姑娘說：“給我一個承諾，我哪里都不會去，就在原地等你”。

好比我們的程序，創(chuàng)建了一個 Promise 對象 promise，并為其注冊了完成和拒絕的處理函數(shù)，因為一些原因，我們沒有給予它 resolve/reject，這個時候 promise 對象將會一直處于 Pending 等待狀態(tài)。我們也無法從外部取消。如果 then 后面還有業(yè)務(wù)需要處理，也將會一直等待下去，當(dāng)我們自己去包裝一個 Promise 對象時要盡可能的避免這種情況發(fā)生。

const promise = new Promise((resolve, reject) => { 
  // 沒有 resolve 也沒有 reject 
}); 
 
console.log(promise); // Promise {<pending>} 
promise 
  .then(() => { 
    console.log('resolve'); 
  }).catch(err => { 
    console.log('reject');          
  }); 

使用 Promise 改造 Callback 回調(diào)地獄示例

這是我們之前在講解 JavaScript 異步編程指南 Callback 一節(jié)寫的例子：

fs.readdir('/path/xxxx', (err, files) => { 
  if (err) { 
    // TODO... 
  } 
  files.forEach((filename, index) => { 
    fs.lstat(filename, (err, stats) => { 
      if (err) { 
        // TODO... 
      } 
      if (stats.isFile()) { 
        fs.readFile(filename, (err, file) => { 
          // TODO 
        }) 
      } 
    }) 
  }) 
}); 

Node.js 的 fs 模塊為我們提供了 promises 對象，現(xiàn)在解決了深層次嵌套問題，這個問題還有更優(yōu)雅的寫法，在之后的 Async/Await 章節(jié)我們會繼續(xù)介紹。

const fs = require('fs').promises; 
const path = require('path'); 
const rootDir = '/path/xxxx'; 
fs.readdir('/path/xxxx') 
 .then(files => { 
  files.forEach(checkFileAndRead); 
  }) 
  .catch(err => { 
    // TODO 
  }); 
 
function checkFileAndRead(filename, index) { 
  const file = path.resolve(rootDir, filename); 
  return fs.lstat(file) 
    .then(stats => { 
      if (stats.isFile()) { 
        return fs.readFile(file); 
      } 
    }) 
    .then(chunk => { 
      // TODO 
    }) 
    .catch(err => { 
      // TODO 
    }) 
} 

總結(jié)

Promise 是很好的，它解決了 callback 形式的回調(diào)地獄、難以管理的錯誤處理問題， Promise 提供了一種鏈式的以線性的方式(.then().then().then()...)來管理我們的異步代碼，這種方式是可以的，解決了我們一些問題，但是并非完美，在 Async/Await 章節(jié)你會看到關(guān)于異步編程問題更好的解決方案，但是 Promise 是基礎(chǔ)，請掌握它。以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系麒思妙想公眾號。