ES6新特性之Promise

基本概念

從字面意思上來看，Promise是承諾。它表示一個異步操做的最終狀態（完成或失敗），以及該異步操做的結果值。根據Pormise的執行結果能夠拿到一個最終狀態。

new Promise（{
        function(resolve,reject){
            /* executor */
        }
    }）;

通常來說，有三種狀態：

• pending，進行中
• fulfilled，已成功
• rejected，已失敗

關於三種狀態，實際上分爲兩種狀況：一種是從pending到fulfilled，也就是執行而後成功；另外一種pending到rejected是執行，而後失敗。Promise 的狀態一旦肯定就再也不改變。只可以從pending到fulfill或者是從pending到rejected，肯定以後的狀態稱之爲resolved。resolved以後添加回調會當即執行獲得結果，resolved通常指的是fulfilled狀態。

一旦新建會當即執行，沒法中途取消。Promise構造函數執行時當即調用executor函數。

基本用法

• Promise接收一個函數做爲參數，該函數的參數分別是resolved和reject

  let promise = new Promise(function(resolve,reject){
          console.log('new promise');
          setTimeout(function(){
              console.log('promise resolved');
              return resolved('success');
          },1000);
      });

• Promise實例生成後在then方法中指定resolved狀態和rejected（可選）狀態的回調函數

  promise.then(function(value){
          console.log('resolved callback',value);
      });

• Promise傳遞

  const promise1 = new Promise(function (resolve,reject)){
          /* .... */
      }

屬性和方法

• Promise.prototype.then，是Promise狀態改變時的回調函數，也就是定義了一個承諾，那麼獲得的結果是什麼。它返回一個新的Promise，新的Promise意味着能夠鏈式調用，也就是.then以後還能夠.then 。

  // 順次調用
      let promise1 = new Promise(function(resolve, reject) {
          console.log('new promise1');
  
          setTimeout(function() {
              console.log('promise1 resolved');
              return resolve("promise1 success");
          }, 2000);
      });
  
      let promise2 = new Promise(function(resolve, reject) {
          console.log('new promise2');
  
          setTimeout(function() {
              console.log('promise2 resolved');
              return resolve("promise2 success");
          }, 4000);
      });
  
      promise1
        .then(function(value) {
          console.log('then1 callback', value);
          return value;
        })
        .then(function(value) {
          console.log('then2 callback', value);
          return promise2;
        })
        .then(function(value) {
          console.log('then3 callback', value);
          return '';
        })

• Promise.prototype.catch(錯誤捕獲)
  錯誤發生時的回調函數，至關於.then（null/undefined，reject）的一個別名，它捕獲reject以及then回調運行時的錯誤。

  // 順次調用
      let promise = new Promise(function(resolve, reject) {
        throw new Error('Error');
      });
      promise.catch(function(error) {
        console.log(error);
      });
  
      // Error: Error

• Promise.prototype.finally（最後）
  無論成功或失敗，這個方法不管狀態如何都會執行。它不接受任何參數，與狀態無關，不依賴Promise執行結果。

• Promise.all（全部）
  把全部的Promise放在一塊兒，而後當全部的Promise所有resolved，這個Promise.all纔會真正的resolved。也就是全部的成功了它才成功，能夠理解成一個包裝器，它包裝多個Promise爲一個新的Promise，那麼Promise.all實際上接收的是一個數組，fulfilled條件是全部包裝的Promise所有fulfilled。

  const promise1 = new Promise((resolve, reject) => {
        resolve({
          code: 200,
          data: [],
        });
      })
        .then(result => result)
        .catch(err => ({
          code: 200,
          data: [],
        }));
  
         const promise2 = new Promise((resolve, reject) => {
          throw new Error('Error');
        })
          .then(result => result)
          .catch(err => ({
            code: 200,
            data: [],
          }));
  
        Promise.all([promise1, promise2])
          .then(result => console.log(result))
          .catch(e => console.log(e));
        ```  
      使用Promise.all，咱們須要給每個Promise都加一個catch，返回一個備用的結果，這個月整個的Promise.all纔會獲得一個resolved結果。

• Promise.race（誰先返回就先執行誰）

  包含多個Promise爲一個新的Promise，返回第一個fulfilled。
      const promise = Promise.race([
          fetch('/url'),
          new Promise(function (resolve, reject) {
            setTimeout(() => {
              return reject(new Error('request timeout'));
            }, 5000);
          })
        ]);
  
        p
          .then(console.log)
          .catch(console.error);

• Promise.resolve（狀態）
  將現有對象轉爲Promise對象，狀態爲fulfilled。

  const promise = Promise.resolve('hello');
      promise.then(res => alert(res));

• Promise.reject
  將現有對象轉爲Promise對象，狀態爲rejected。

  const promise = Promise.reject('word');
      promise.then(res => alert(res)).catch(err => alert(err));