JavaScript Promise 物件

阿新 • • 發佈：2020-10-14

一、概念

Promise 是一個物件，也是一個建構函式。
Promise 物件代表了未來將要發生的事件，用來傳遞非同步操作的訊息。

二、特點

ES6 規定，Promise物件是一個建構函式，用來生成Promise例項。

1. 有三種狀態：
pending（進行中）,
fulfilled（已成功）,
rejected（已失敗）。只有非同步操作的結果，可以決定當前是哪一種狀態，
任何其他操作都無法改變這個狀態。

2. 有了Promise物件，就可以將非同步操作以同步操作的流程表達出來，
避免了層層巢狀的回撥函式。

3. Promise也有一些缺點。首先，無法取消Promise，一旦新建它就會立即執行
當處於pending狀態時，無法得知目前進展到哪一個階段

三、基本用法

reject。它們是兩個函式，由 JavaScript 引擎提供，不用自己部署。
resolve函式的作用是，將Promise物件的狀態變成成功
reject函式的作用是，將Promise物件的狀態變成失敗

function timeout(ms) {
  return new Promise((resolve, reject) => {
    console.log('立即執行');    // Promise 新建後就會立即執行。這一行先輸出;
    setTimeout(resolve, ms, 'done');
  });
}

timeout(100).then((value) => {
  console.log(value);
});
timeout方法返回一個Promise例項，表示一段時間以後才會發生的結果。
過了指定的時間（ms引數）以後，Promise例項的狀態變為resolved，
就會觸發then方法繫結的回撥函式。

1.呼叫resolve或reject並不會終結 Promise 的引數函式的執行。
 resolved 的 Promise 是在本輪事件迴圈的末尾執行，總是晚於本輪迴圈的同步任務
new Promise((resolve, reject) => {
  resolve(1);
  console.log(2);
}).then(r => {
  console.log(r);
});
// 2
// 1
一般來說，呼叫resolve或reject以後，Promise 的使命就完成了，後繼操作應該放到then方法裡面，
而不應該直接寫在resolve或reject的後面。所以，最好在它們前面加上return語句，這樣就不會有意外。
new Promise((resolve, reject) => {
  return resolve(1);
  // 後面的語句不會執行
  console.log(2);
})

四、Promise.prototype.then()

Promise 例項具有then方法，也就是說，then方法是定義在原型物件上
它的作用是為 Promise 例項新增狀態改變時的回撥函式。
then方法的第一個引數是resolved狀態的回撥函式，第二個引數（可選）是rejected狀態的回撥函式。

then方法返回的是一個新的Promise例項（注意，不是原來那個Promise例項）。因此可以採用鏈式寫法，即then方法後面再呼叫另一個then方法。

getJSON("/posts.json").then(function(json) {
  return json.post;
}).then(function(post) {
  // ...
});
採用鏈式的then，可以指定一組按照次序呼叫的回撥函式。這時，前一個回撥函式，
有可能返回的還是一個Promise物件（即有非同步操作），
這時後一個回撥函式，就會等待該Promise物件的狀態發生變化，才會被呼叫。

五、Promise.prototype.catch()

Promise.prototype.catch()方法是.then(null, rejection)或.then(undefined, rejection)的別名，用於指定發生錯誤時的回撥函式。

getJSON('/posts.json').then(function(posts) {
  // ...
}).catch(function(error) {
  // catch會捕獲 getJSON()方法中的錯誤 和 then()方法指定的回撥函式中的錯誤;
 
  console.log('發生錯誤！', error);

});

1.  如果 Promise 狀態已經變成resolved，再丟擲錯誤是無效的。

const promise = new Promise(function(resolve, reject) {
  resolve('ok');
  throw new Error('test');
});
promise
  .then(function(value) { console.log(value) })
  .catch(function(error) { console.log(error) });
// ok

2.  Promise 物件的錯誤具有“冒泡”性質，會一直向後傳遞，直到被捕獲為止。
也就是說，錯誤總是會被下一個catch語句捕獲。

getJSON('/post/1.json').then(function(post) {
  return getJSON(post.commentURL);
}).then(function(comments) {
  // some code
}).catch(function(error) {
  // 處理前面三個Promise產生的錯誤
});

一共有三個 Promise 物件：一個由getJSON()產生，兩個由then()產生。它們之中任何一個丟擲的錯誤，都會被最後一個catch()捕獲。

一般來說，不要在then()方法裡面定義 Reject 狀態的回撥函式（即then的第二個引數），
總是使用catch方法。

六、Promise.prototype.finally()

finally()方法用於指定不管 Promise 物件最後狀態如何，都會執行的操作。
該方法是 ES2018 引入標準的。
finally方法的回撥函式不接受任何引數，這意味著沒有辦法知道，
前面的 Promise 狀態到底是fulfilled還是rejected。這表明，finally方法裡面的操作，應該是與狀態無關的，不依賴於 Promise 的執行結果。

七、Promise.all()

Promise.all()方法用於將多個 Promise 例項，包裝成一個新的 Promise 例項。
const p = Promise.all([p1, p2, p3]);
Promise.all()方法接受一個數組作為引數，p1、p2、p3都是 Promise 例項，如果不是，就會先呼叫下面講到的Promise.resolve方法，將引數轉為 Promise 例項，
再進一步處理。另外，Promise.all()方法的引數可以不是陣列，但必須具有 Iterator 介面，且返回的每個成員都是 Promise 例項。

 const p = Promise.all([p1, p2, p3]);

（1）只有p1、p2、p3的狀態都變成fulfilled，p的狀態才會變成fulfilled，此時p1、p2、p3的返回值組成一個數組，傳遞給p的回撥函式。

（2）只要p1、p2、p3之中有一個被rejected，p的狀態就變成rejected，此時第一個被reject的例項的返回值，會傳遞給p的回撥函式。


// 如果作為引數的 Promise 例項，自己定義了catch方法，那麼它一旦被rejected，並不會觸發
// Promise.all()的catch方法。

const p1 = new Promise((resolve, reject) => {
  resolve('hello');
})
.then(result => result)
.catch(e => e);

const p2 = new Promise((resolve, reject) => {
  throw new Error('報錯了');
})
.then(result => result)
.catch(e => e);

Promise.all([p1, p2])
.then(result => console.log(result))
.catch(e => console.log(e));
// ["hello", Error: 報錯了]

八、Promise.race()

Promise.race()方法同樣是將多個 Promise 例項，包裝成一個新的 Promise 例項。

const p = Promise.race([p1, p2, p3]);

上面程式碼中，只要p1、p2、p3之中有一個例項率先改變狀態，p的狀態就跟著改變。
那個率先改變的 Promise 例項的返回值，就傳遞給p的回撥函式。

九、Promise.allSettled()

Promise.allSettled()方法接受一組 Promise 例項作為引數，包裝成一個新的 Promise 例項。只有等到所有這些引數例項都返回結果，不管是fulfilled還是rejected，包裝例項才會結束。該方法由 ES2020 引入。

const resolved = Promise.resolve(42);
const rejected = Promise.reject(-1);

const allSettledPromise = Promise.allSettled([resolved, rejected]);

allSettledPromise.then(function (results) {
  console.log(results);
});
// [
//    { status: 'fulfilled', value: 42 },
//    { status: 'rejected', reason: -1 }
// ]

上面程式碼中，Promise.allSettled()的返回值allSettledPromise，
狀態只可能變成fulfilled。它的監聽函式接收到的引數是陣列results。
該陣列的每個成員都是一個物件，對應傳入Promise.allSettled()的兩個 Promise 例項。
每個物件都有status屬性，該屬性的值只可能是字串fulfilled或字串rejected。
fulfilled時，物件有value屬性，rejected時有reason屬性，對應兩種狀態的返回值。

十、Promise.resolve()

有時需要將現有物件轉為 Promise 物件，Promise.resolve()方法就起到這個作用。
const jsPromise = Promise.resolve($.ajax('/whatever.json'));

Promise.resolve()方法的引數分成四種情況。

1. 引數是一個 Promise 例項
    如果引數是 Promise 例項，那麼Promise.resolve將不做任何修改、原封不動地返回這個例項。

2. 引數是一個thenable物件
    Promise.resolve()方法會將這個物件轉為 Promise 物件，然後就立即執行thenable物件的then()方法。

3. 引數不是具有then()方法的物件，或根本就不是物件
    如果引數是一個原始值，或者是一個不具有then()方法的物件，則Promise.resolve()方法返回一個新的 Promise 物件，狀態為resolved。


4. 不帶有任何引數
    Promise.resolve()方法允許呼叫時不帶引數，直接返回一個resolved狀態的 Promise 物件。
    如果希望得到一個 Promise 物件，比較方便的方法就是直接呼叫Promise.resolve()方法。
    立即resolve()的 Promise 物件，是在本輪“事件迴圈”（event loop）的結束時執行，而不是在下一輪“事件迴圈”的開始時。

十一、Promise.reject()

Promise.reject(reason)方法也會返回一個新的 Promise 例項，該例項的狀態為rejected。
Promise.reject()方法的引數，會原封不動地作為reject的理由，變成後續方法的引數。

Promise.reject('出錯了')
.catch(e => {
  console.log(e === '出錯了')
})
// tru

十二、Promise.try()

實際開發中，經常遇到一種情況：不知道或者不想區分，函式f是同步函式還是非同步操作，
但是想用 Promise 來處理它。因為這樣就可以不管f是否包含非同步操作，
都用then方法指定下一步流程，用catch方法處理f丟擲的錯誤。一般就會採用下面的寫法。

Promise.resolve().then(f)
上面的寫法有一個缺點，就是如果f是同步函式，那麼它會在本輪事件迴圈的末尾執行

const f = () => console.log('now');
Promise.resolve().then(f);
console.log('next');
// next
// now

那麼有沒有一種方法，讓同步函式同步執行，非同步函式非同步執行，
並且讓它們具有統一的 API 呢？回答是可以的，並且還有兩種寫法。
第一種寫法是用async函式來寫。

const f = () => console.log('now');
(async () => f())();
console.log('next');
// now
// next


提供Promise.try方法替代上面的寫法。

const f = () => console.log('now');
Promise.try(f);
console.log('next');
// now
// next