Promise 物件學習筆記

一、Promise是什麼？
       Promise是非同步程式設計的一種解決方案，比傳統的解決方案--回撥函式和事件更合理和強大，由社群最早提出和實現，ES6將其寫進了語言標準，統一了用法，原生提供了Promise物件；
       簡單來說，Promise就是一個容器，裡面儲存著某個未來才會結束的事件（通常是一個非同步操作）的結果，從語法上來說，Promise是一個物件，從它可以獲取非同步操作的訊息，Promise提供統一的API，各種非同步操作都可以用同樣的方法進行處理；
       Promise物件的特點：
       ①物件的狀態不受外界影響，Promise物件代表一個非同步操作，有三種狀態：pending(進行中)、fulfilled（已成功）、rejected(已失敗)，只有非同步操作的結果可以決定當前是哪一種狀態，任何其他操作都無法改變這個狀態；
       ②一旦狀態改變，就不會再變，任何時候都可以得到這個結果，Promise物件的狀態改變，只有兩種可能：從pending變為fulfilled和從pending變為rejected，只要這兩種情況發生，狀態就凝固了，不會再變了，會一直保持這個結果，這時就稱為resolved（已定型），如果改變已經發生了，再對Promise物件新增回撥函式，也會立即得到這個結果，這與事件（Event）完全不同，事件的特點是：如果你錯過了它，再去監聽，是得不到結果的；
       Promise物件的優點：
       ①Promise物件將非同步操作以同步操作的流程表達出來，避免了層層巢狀的回撥函式；
       ②Promise物件提供統一的介面，使得控制非同步操作更加容易；
       Promise物件的缺點：
       ①無法取消Promise，一旦新建它就會立即執行，無法中途取消；
       ②如果不設定回撥函式，Promise內部丟擲的錯誤不會反應到外部；
       ③當處於pending狀態時，無法得知目前進展到哪一個階段（剛剛開始還是即將完成）；

二、Promise物件的基本用法
       Promise物件是一個建構函式，用來生成Promise例項；

// Promise例項
const promise = new Promise(function(resolve, reject) {
      // ... some code
      if ( /* 非同步操作成功 */ ) {
        resolve(value);
      } else {
        reject(error);
      }
    });
// 為Promise例項指定回撥函式
promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

       Promise建構函式接受一個函式作為引數，這個函式的引數分別是resolve和reject兩個函式，這兩個函式由JavaScript引擎提供，不用自己部署；
       resolve函式：將Promise物件的狀態由“未完成”變為“成功”（即從 pending 變為 resolved），在非同步操作成功時呼叫，並將非同步操作的結果作為引數傳遞出去；
       reject函式：將Promise物件的狀態從“未完成”變為“失敗”（即從 pending 變為 rejected），在非同步操作失敗時呼叫，並將非同步操作報出的錯誤，作為引數傳遞出去；
       .then函式：將Promise例項生成以後，可以用then方法分別指定resolved狀態和rejected狀態的回撥函式；then方法可以接受兩個回撥函式作為引數，第一個回撥函式是Promise物件的狀態變為resolved時呼叫，第二個回撥函式是Promise物件的狀態變為rejected時呼叫，其中第二個函式是可選的，不一定要提供，這兩個函式都接受Promise物件傳出的值作為引數；

// 一個例項
function timeout(ms) {
      return new Promise((resolve, reject) => {
        setTimeout(resolve, ms, 'done'); // resolve後才可以執行then
      });
    }

    timeout(100).then((value) => {
      console.log(value); // done
    });

// Promise 新建後就會立即執行
let promise=new Promise((resolve,reject)=>{
      console.log('Promise新建後立即執行');
      resolve(); // 如果沒有這句，then永遠不會執行
    })
    promise.then(()=>{
      console.log('回撥方法then在所有同步任務執行完後執行');
    })
    console.log('同步任務');
    // Promise新建後立即執行
    // 同步任務
    // 回撥方法then在所有同步任務執行完後執行

// 非同步載入圖片
function loadImageAsync(url) {
      return new Promise(function(resolve, reject) {
        const image = new Image();

        image.onload = function() {
          resolve(image); // 成功時resolve
        };

        image.onerror = function() { // 失敗時reject
          reject(new Error('Could not load image at ' + url));
        };

        image.src = url;
      });
    }

// Promise操作Ajax
const getJSON = function(url) {
  const promise = new Promise(function(resolve, reject){
    const handler = function() {
      if (this.readyState !== 4) {
        return;
      }
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    };
    const client = new XMLHttpRequest();
    client.open("GET", url);
    client.onreadystatechange = handler;
    client.responseType = "json";
    client.setRequestHeader("Accept", "application/json");
    client.send();

  });

  return promise;
};

getJSON("/posts.json").then(function(json) {
  console.log('Contents: ' + json);
}, function(error) {
  console.error('出錯了', error);
});
// 如果呼叫resolve函式和reject函式時帶有引數，那麼它們的引數會被傳遞給回撥函式，reject函式的引數通常是Error物件的例項，表示丟擲的錯誤；resolve函式的引數除了正常的值以外，還可能是另一個Promise例項；

// p1和p2都是Promise的例項，但是p2的resolve方法將p1作為引數，即一個非同步操作的結果是返回另一個非同步操作
// 此時p1的狀態決定了p2的狀態，如果p1的狀態是pending，那麼p2的回撥函式就會等待p1的狀態改變，如果p1的狀態已經是resolved或者rejected，那麼p2的回撥函式將會立刻執行；
const p1 = new Promise((resolve, reject) => {
      setTimeout(() => reject(new Error('fail')), 3000)
    })
    const p2 = new Promise((resolve, reject) => {
      setTimeout(() => resolve(p1), 1000)
    })
    p2.then(result => console.log(result))
      .catch(error => console.log(error)) // Error: fail
// 上面的程式碼中，p1是一個Promise，3秒之後變成rejected，p2的狀態在1秒之後改變，resolve方法返回的是p1
// 由於p2返回的是另一個Promise，導致p2自己的狀態無效了，由p1的狀態決定p2的狀態，所以後面的then語句都變成針對p1，又過了2秒，p1變為rejected，導致觸發catch方法指定的回撥函式；

// 呼叫resolve或reject並不會終結Promise的引數函式的執行，程式碼中，呼叫resolve(1)後，後面的console.log(2)還是會執行，並且會首先列印出來，
// 這是因為立即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); // 2不會被列印
    }).then(r => {
      console.log(r);
    })
    // 1

三、Promise.prototype.then()鏈式呼叫
       Promise例項具有then方法，即then方法是定義在原型物件Promise.prototype上的，它的作用是為Promise例項新增狀態改變時的回撥函式，then函式的第一個引數是resolved狀態的回撥函式，第二個引數（可選）是rejected狀態的回撥函式；
       then方法返回的是一個新的Promise例項（注意：不是原來那個Promise例項），因此可以採用鏈式寫法，即then方法後面再呼叫另一個then方法；

getJSON("/posts.json").then(function(json) {
      return json.post;
    }).then(function(post) {
      // ...
    });

       上面的程式碼使用then方法，依次指定了兩個回撥函式，第一個回撥函式完成以後，會將返回結果作為引數，傳入第二個回撥函式；採用鏈式的then，可以指定一組按照次序呼叫的回撥函式，這時前一個回撥函式有可能返回的還是一個Promise物件（即有非同步操作），這時後一個回撥函式就會等待該Promise物件的狀態發生變化，才會被呼叫；

getJSON("/post/1.json").then(function(post) {
      return getJSON(post.commentURL);
    }).then(function funcA(comments) {
      console.log("resolved: ", comments);
    }, function funcB(err) {
      console.log("rejected: ", err);
    });
// 第一個then方法指定的回撥函式返回的是另一個Promise物件，這時第二個then方法指定的回撥函式就會等待這個新的Promise物件狀態發生變化，如果變為resolved，就呼叫funcA，如果狀態變為rejected，就呼叫funB；

// 箭頭函式寫法
getJSON("/post/1.json").then(
  post => getJSON(post.commentURL)
).then(
  comments => console.log("resolved: ", comments),
  err => console.log("rejected: ", err)
);

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

getJSON('/posts.json').then(function(posts) {
      // ...
    }).catch(function(error) {
      // 處理 getJSON 和 前一個回撥函式執行時發生的錯誤
      console.log('發生錯誤！', error);
    });

上面程式碼中，getJSON方法返回一個 Promise 物件，如果該物件狀態變為resolved，則會呼叫then方法指定的回撥函式，如果非同步操作丟擲錯誤，狀態就會變為rejected，就會呼叫catch方法指定的回撥函式，處理這個錯誤，另外，then方法指定的回撥函式，如果執行中丟擲錯誤，也會被catch方法捕獲；

p.then((val) => console.log('fulfilled:', val))
      .catch((err) => console.log('rejected', err));

    // 等同於
    p.then((val) => console.log('fulfilled:', val))
      .then(null, (err) => console.log("rejected:", err));

// promise丟擲一個錯誤，被catch方法指定的回撥函式捕獲
// 寫法一
const promise = new Promise(function(resolve, reject) {
  try {
    throw new Error('test');
  } catch(e) {
    reject(e);
  }
});
promise.catch(function(error) {
  console.log(error);
});

// 寫法二
// reject方法的作用，等同於丟擲錯誤
const promise = new Promise(function(resolve, reject) {
  reject(new Error('test'));
});
promise.catch(function(error) {
  console.log(error);
});

// 如果 Promise 狀態已經變成resolved，再丟擲錯誤是無效的
// Promise 在resolve語句後面，再丟擲錯誤，就不會再被捕獲了，等於沒有丟擲，因為Promise的狀態一旦改變，就永遠保持該狀態，不會再變了
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

// Promise 物件的錯誤具有“冒泡”性質，會一直向後傳遞，直到被捕獲為止，
// 也就是說，錯誤總是會被下一個catch語句捕獲
// 三個 Promise 物件：一個由getJSON產生，兩個由then產生，任何一個丟擲的錯誤，都會被最後一個catch捕獲
getJSON('/post/1.json').then(function(post) {
  return getJSON(post.commentURL);
}).then(function(comments) {
  // some code
}).catch(function(error) {
  // 處理前面三個Promise產生的錯誤
});

// 不要在then方法裡面定義 Reject 狀態的回撥函式（即then的第二個引數），總是使用catch方法
// bad
promise
  .then(function(data) {
    // success
  }, function(err) {
    // error
  });

// good
// 可以捕獲前面then方法執行中的錯誤，也更接近同步的寫法（try/catch），因此，建議總是使用catch方法，而不使用then方法的第二個引數
promise
  .then(function(data) { //cb
    // success
  })
  .catch(function(err) {
    // error
  });

// 如果沒有使用catch方法指定錯誤處理的回撥函式，Promise物件丟擲的錯誤不會傳遞到外層程式碼，不會有任何反應
const someAsyncThing = function() {
  return new Promise(function(resolve, reject) {
    // 下面一行會報錯，因為x沒有宣告
    resolve(x + 2);
  });
};

someAsyncThing().then(function() {
  console.log('everything is great');
});

setTimeout(() => { console.log(123) }, 2000);
// Promise 內部的錯誤不會影響到 Promise 外部的程式碼，即“Promise 會吃掉錯誤”
// Uncaught (in promise) ReferenceError: x is not defined
// 123

// 程式碼中Promise指定下一輪“事件迴圈”再丟擲錯誤，到了那個時候，Promise的執行已經結束了，所以這個錯誤在Promise函式體外丟擲的，會冒泡到最外層，成了未捕獲的錯誤；
const promise = new Promise(function (resolve, reject) {
  resolve('ok');
  setTimeout(function () { throw new Error('test') }, 0)
});
promise.then(function (value) { console.log(value) });
// ok
// Uncaught Error: test

// 執行完catch方法指定的回撥函式，會接著執行後面then方法指定的回撥函式，如果沒有報錯，則會跳過catch方法
const someAsyncThing = function() {
  return new Promise(function(resolve, reject) {
    // 下面一行會報錯，因為x沒有宣告
    resolve(x + 2);
  });
};

someAsyncThing()
.catch(function(error) {
  console.log('oh no', error);
})
.then(function() {
  console.log('carry on');
});
// oh no [ReferenceError: x is not defined]
// carry on

const someAsyncThing = function() {
  return new Promise(function(resolve, reject) {
    // 下面一行會報錯，因為x沒有宣告
    resolve(x + 2);
  });
};

someAsyncThing().then(function() {
  return someOtherAsyncThing();
}).catch(function(error) {
  console.log('oh no', error);
  // 下面一行會報錯，因為 y 沒有宣告
  y + 2;
}).then(function() {
  console.log('carry on');
});
// oh no [ReferenceError: x is not defined]

someAsyncThing().then(function() {
  return someOtherAsyncThing();
}).catch(function(error) {
  console.log('oh no', error);
  // 下面一行會報錯，因為y沒有宣告
  y + 2;
}).catch(function(error) { // 第二個catch方法用來捕獲前一個catch方法丟擲的錯誤
  console.log('carry on', error);
});
// oh no [ReferenceError: x is not defined]
// carry on [ReferenceError: y is not defined]

五、Promise.prototype.finally()
       finally方法用於指定不管 Promise 物件最後狀態如何，都會執行的操作；

// 不管promise最後的狀態，在執行完then或catch指定的回撥函式以後，都會執行finally方法指定的回撥函式
promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···}); 

// 然後使用finally方法關掉伺服器
server.listen(port)
  .then(function () {
    // ...
  })
  .finally(server.stop);

// finally本質上是then方法的特例
// finally方法的回撥函式不接受任何引數，這意味著沒有辦法知道，前面的 Promise 狀態到底是fulfilled還是rejected。這表明，finally方法裡面的操作，應該是與狀態無關的，不依賴於 Promise 的執行結果
promise
.finally(() => {
  // 語句
});

// 等同於
promise
.then(
  result => {
    // 語句
    return result;
  },
  error => {
    // 語句
    throw error;
  }
);

// finally方法為成功和失敗兩種情況只寫一次
Promise.prototype.finally = function (callback) {
  let P = this.constructor;
  return this.then(
    value  => P.resolve(callback()).then(() => value),
    reason => P.resolve(callback()).then(() => { throw reason })
  );
};

// finally方法總是會返回原來的值
// resolve 的值是 undefined
Promise.resolve(2).then(() => {}, () => {})

// resolve 的值是 2
Promise.resolve(2).finally(() => {})

// reject 的值是 undefined
Promise.reject(3).then(() => {}, () => {})

// reject 的值是 3
Promise.reject(3).finally(() => {})

六、Promise.all()

// Promise.all方法用於將多個 Promise 例項，包裝成一個新的 Promise 例項
// p1、p2、p3都是 Promise 例項，如果不是，就會先呼叫Promise.resolve方法，將引數轉為 Promise 例項，再進一步處理；
// 只有p1、p2、p3的狀態都變成fulfilled，p的狀態才會變成fulfilled，此時p1、p2、p3的返回值組成一個陣列，傳遞給p的回撥函式；
// 只要p1、p2、p3之中有一個被rejected，p的狀態就變成rejected，此時第一個被reject的例項的返回值，會傳遞給p的回撥函式
const p = Promise.all([p1, p2, p3]);

const promises = [2, 3, 5, 7, 11, 13].map(function(id) {
    return getJSON('/post/' + id + ".json");
  });

  Promise.all(promises).then(function(posts) {
    // ...
  }).catch(function(reason) {
    // ...
  });

// p2有自己的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: 報錯了]
// 上面程式碼中，p1會resolve，p2首先會rejected，但是p2有自己的catch方法，該方法返回的是一個新的Promise例項，p2指向的實際上是這個例項，該例項執行完catch方法後，也會變成resolved，導致Promise.all()方法引數裡面的兩個例項都會resolved，因此會呼叫then方法指定的回撥函式，而不會呼叫catch方法指定的回撥函式；

// 如果p2沒有自己的catch方法，就會呼叫Promise.all()的catch方法
const p1 = new Promise((resolve, reject) => {
  resolve('hello');
})
.then(result => result);

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

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

七、Promise.race()

// 只要p1、p2、p3之中有一個例項率先改變狀態，p的狀態就跟著改變，那個率先改變的 Promise 例項的返回值，就傳遞給p的回撥函式；
const p = Promise.race([p1, p2, p3]);

// 如果5秒之內fetch方法無法返回結果，變數p的狀態就會變為rejected，從而觸發catch方法指定的回撥函式
const p = Promise.race([
  fetch('/resource-that-may-take-a-while'),
  new Promise(function (resolve, reject) {
    setTimeout(() => reject(new Error('request timeout')), 5000)
  })
]);

p
.then(console.log)
.catch(console.error);

八、Promise.resolve()

// 將現有物件轉為 Promise 物件
Promise.resolve('foo')
// 等價於
new Promise(resolve => resolve('foo'))

• 如果引數是 Promise 例項，那麼Promise.resolve將不做任何修改、原封不動地返回這個例項；
• thenable物件

// thenable物件指的是具有then方法的物件
let thenable = {
  then: function(resolve, reject) {
    resolve(42);
  }
};
// Promise.resolve方法會將這個物件轉為 Promise 物件，然後就立即執行thenable物件的then方法
let p1 = Promise.resolve(thenable);
p1.then(function(value) {
  console.log(value);  // 42
});

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

// 返回 Promise 例項的狀態從一生成就是resolved，所以回撥函式會立即執行
const p = Promise.resolve('Hello');

p.then(function (s){
  console.log(s)
});
// Hello

• 不帶有任何引數

// Promise.resolve方法允許呼叫時不帶引數，直接返回一個resolved狀態的 Promise 物件
const p = Promise.resolve();

p.then(function () {
  // ...
});

// 立即resolve的Promise物件，是在本輪“事件迴圈”（event loop）的結束時，而不是在下一輪“事件迴圈”的開始時；
setTimeout(function () {
  console.log('three');
}, 0);

Promise.resolve().then(function () {
  console.log('two');
});

console.log('one');

// one
// two
// three
// setTimeout(fn, 0)在下一輪“事件迴圈”開始時執行，Promise.resolve()在本輪“事件迴圈”結束時執行，console.log('one')則是立即執行，因此最先輸出

九、Promise.reject()

// Promise.reject(reason)方法也會返回一個新的 Promise 例項，該例項的狀態為rejected
const p = Promise.reject('出錯了');
// 等同於
const p = new Promise((resolve, reject) => reject('出錯了'))

p.then(null, function (s) {
  console.log(s)
});
// 出錯了
// Promise.reject()方法的引數，會原封不動地作為reject的理由，變成後續方法的引數。這一點與Promise.resolve方法不一致

十、Promise.try()

// Promise.try就是模擬try程式碼塊，就像promise.catch模擬的是catch程式碼塊
try {
  database.users.get({id: userId})
  .then(...)
  .catch(...)
} catch (e) {
  // ...
}

十一、Promise鏈式呼叫

// 採用鏈式的then，可以指定一組按照次序呼叫的回撥函式
function start() {
  return new Promise((resolve, reject) => {
    resolve('start');
  });
}

start()
  .then(data => {
    // promise start
    console.log('result of start: ', data);
    return Promise.resolve(1); // p1
  })
  .then(data => {
    // promise p1
    console.log('result of p1: ', data);
    return Promise.reject(2); // p2
  })
  .then(data => {
    // promise p2
    console.log('result of p2: ', data);
    return Promise.resolve(3); // p3
  })
  .catch(ex => {
    // promise p3
    console.log('ex: ', ex);
    return Promise.resolve(4); // p4
  })
  .then(data => {
    // promise p4
    console.log('result of p4: ', data);
  });

// 最終結果
result of start:  start
result of p1:  1
ex:  2
result of p4:  4

總結：程式碼的執行邏輯是 promise start --> promise p1 --> promise p3 --> promise p4，所以結合輸出結果總結出以下幾點：

• promise 的 then 方法裡面可以繼續返回一個新的 promise 物件；
• 下一個 then 方法的引數是上一個 promise 物件的 resolve 引數；
• catch 方法的引數是其之前某個 promise 物件的 rejecte 引數；
• 一旦某個 then 方法裡面的 promise 狀態改變為了 rejected，則promise 方法會連跳過後面的 then 直接執行 catch；
• catch 方法裡面依舊可以返回一個新的 promise 物件；

function p1() {
  return new Promise((resolve) => {
    console.log(1);
    resolve();
  });
}

function p2() {
  return new Promise((resolve) => {
    console.log(2);
    resolve();
  });
}

function p3() {
  return new Promise((resolve) => {
    console.log(3);
    resolve();
  });
}

p1()
.then(() => {
  return p2();
})
.then(() => {
  return p3();
})
.then(() => {
  console.log('all done');
})
.catch(e => {
  console.log('e: ', e);
});

// 輸出結果：
// 1
// 2
// 3
// all done

p1()
.then(() => {
  return Promise.all([
    p2(),
    p3(),
  ]);
})
.then(() => {
  console.log('all done');
})
.catch((e) => {
  console.log('e: ', e);
});
// 或者
Promise.all([p1(),p3(),p3()]).then(function(data){console.log(data)})
// 輸出結果：
// 1
// 2
// 3
// all done

參考：
Promise 物件