ES6 Promise對象

ES6 Promise對象

ES6 規定 Promise對象是一個構造函數，用來生成 Promise實列, 以下代碼：

var promise = new Promise((resolve, reject) => {
  if (true) {
    resolve(value);
  } else {
    reject(error);
  }
});

resolve 函數的做用是，將promise對象的狀態從 "未完成"（Pending） 變爲 「成功」(Resolved), 在異步操做成功調用時，並將異步操做的結果，做爲參數傳遞出去。
reject函數的做用是，將promise對象的狀態 從 "未完成"(Pending) 變爲 "失敗"（Rejected）, 在異步操做失敗時調用，並將異步操做報出的錯誤，做爲參數傳遞出去。
promise實列生成之後，可使用then方法分別指定 Resolved狀態 和 （Rejected）狀態的回調函數。

下面是一個Promise對象的簡單列子：

function timeout (ms) {
  return new Promise ((resolve, reject) => {
    setTimeout(resolve, ms, 'done');
  });
}

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

如上代碼，timeout函數返回一個Promise對象的實例，過了指定的時間之後，Promise的實例狀態變爲Resolved，而後觸發then指定的回調。參數值就是實例狀態變爲Resolved傳進來的 done，所以輸出done。

Promise新建後就會當即執行，以下代碼：

const promise = new Promise((resolve, reject) => {
  console.log('Promise');
  resolve();
});
promise.then(()=> {
  console.log('Resilved');
});
console.log('Hi');

輸出結果是 Promise  Hi  Resilved done

Promise新建後當即執行，因此首先輸出的是 Promise， 而後promise對象resolve方法是異步的，因此先執行完全部同步的方法纔會執行resolve中的方法， 所以輸出HI，
最後輸出 Resilved, 最後100ms後，又執行timeout方法，最後輸出 done

下面是一個用Promise對象實現的 Ajax 操做的例子。

以下代碼：

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

var url = 'http://httpbin.org/get';
getJSON(url).then((json) => {
  console.log(json); // 返回json對象
}, (error)=> {
  console.log(error);
});

上面調用resolve函數和reject函數都帶有參數，他們的參數會傳遞給回調函數，reject函數的參數通常是Error對象的實列，表示拋出的錯誤，resolve函數的參數通常是正常的值，固然還有多是promise對象的實列。

1-2 理解 Promise.prototype.then()

Promise實例具備then方法，該做用是爲Promise實例添加狀態改變時的回調函數。該方法的第一個參數是Resolved狀態的回調函數，第二個參數是Rejected狀態的回調函數。
then方法返回的是一個新的Promise實例。所以咱們能夠採用鏈式的寫法，即then方法後面再調用另外一個then方法。以下代碼：

getJSON(url).then((json)=>{
  console.log(2);
  console.log(json); // 返回json對象
  return json;
}).then((data) => {
  console.log(1);
  console.log(data); // 返回和上面同樣的json對象
});

上面的代碼使用then方法，使用了2個回調函數，第一個回調函數完成之後，將返回的結果做爲參數，傳入第二個回調函數。

1-3 理解 Promise.prototype.catch()

Promise.prototype.catch方法是 .then(null, rejection)的別名，用於指定發生錯誤時的回調函數。以下代碼：

getJSON(url).then((json)=> {
  // ...
}).catch((error) => {
  console.log('發生錯誤');
});

上面代碼中，getJSON方法返回一個Promise對象，若是該對象狀態變爲Resolved, 則會調用then方法的回調函數，若是異步操做拋出錯誤，狀態就會變爲 Rejected，就會調用catch方法的回調函數，來處理這個錯誤。以下是一個發生錯誤的demo.

var promise2 = new Promise((resolve, reject) => {
  throw new Error('test');
});
promise2.catch((error)=> {
  console.log(error);
});
// 其實上面的代碼和下面的代碼是等價的
// 寫法一
var p3 = new Promise((resolve, reject) => {
  try {
    throw new Error('test')
  } catch (e) {
    reject(e);
  }
});
p3.catch((error) => {
  console.log(error);
});

// 寫法二
var p4 = new Promise((resolve, reject) => {
  reject(new Error('test'));
});
p4.catch((error) => {
  console.log(error);
});

可是若是Promise狀態已經變成 Resolved的話，再拋出錯誤是沒有用的了。以下代碼

var p5 = new Promise((resolve, reject) => {
  resolve('ok');
  throws new Error('test'); // 這句無效
});

p5.then((value) => {
  console.log(value);
}).catch((error)=> {
  console.log(error);
})

上面代碼中，在resolve後面再拋出錯誤是不會被撲獲到的，由於Promise的狀態一旦改變，就永久保持該狀態。
Promise對象的錯誤具備傳遞性質，它會一直往下傳遞，直到被catch捕獲到爲止。

注意： 通常來說，不要在then方法裏面定義Reject狀態的回調函數(then的第二個參數)，老是使用catch語句。好比以下代碼：

// bad的寫法
  var p6 = new Promise((resolve, reject) => {
    
  });
  p6.then((data) => {
    // success
  }, (error)=>{
    // error
  });

  // good的寫法
  p6.then((data) => {
    // success
  }).catch((error) => {
    // error
  });

上面的代碼中，第二種寫法比第一種寫法好，第二種寫法能夠捕獲到前面then方法執行中的錯誤。所以咱們建議使用catch方法，而不使用then方法的第二個參數。

1-4 理解Promise.all()方法

Promise.all方法用於將多個Promise實例，包裝成一個新的Promise實例。以下代碼：
var P = Promise.all([p1, p2, p3]);
該方法接收一個數組做爲參數，p1, p2, p3都是Promise的實列，若是他們不是實列的話，會先調用 Promise.resolve方法，將參數轉爲Promise實例。
當p1, p2, p3的狀態都變成 fulfilled的時候，p的狀態纔會變成成功狀態。當他們之中有一個是 rejected的話，那麼p的狀態就變爲失敗的狀態。
注意點： 若是做爲參數的Promise實例，本身定義了catch方法，那麼它一旦被rejected，並不會觸發Promise.all()的catch方法。以下代碼：

const p11 = new Promise((resolve, reject) => {
   resolve('hello');
 }).then(res => res).catch(e => e);
 const p22 = new Promise((resolve, reject) => {
   throw new Error('報錯了');
 }).then(res => res).catch(e=>e);

 Promise.all([p1, p2]).then(res => console.log(res)).catch(e=>console.log(e));

上面代碼中， p11會 resolved， p22首先會rejected，可是p22有本身的catch方法，該方法會返回一個新的Promise的實例，執行完catch方法後，也會變成resolved，致使promise.all方法參數裏面的兩個實例都會resolved，所以會調用then方法指定的回調函數，不會調用catch方法指定的回調函數。
1-5 理解Promise.race()方法

該方法一樣是將多個Promise的實例，包裝成一個新的Promise實例。
var p = Promise.race([p1, p2, p3]);
Promise.race 與 Promise.all的相同點：若是不是Promise的實例，就會先調用 Promise.resolve方法，將參數轉爲Promise的實例。
不一樣點是： 只要p1, p2, p3 其中任何一個實例先改變狀態，那麼P的狀態就會跟着改變。也就是說那個先改變Promise實例的返回值，就傳遞給P的回調函數。

1-6 理解Promise.resolve()方法

該方法的做用是：能夠將現有的對象轉爲Promise對象。好比以下代碼：
var jsPromise = Promise.resolve({"a":1});
其實上面的代碼等價與下面的代碼：
new Promise(resolve => resolve({"a": 1}));

1-7 理解 Promise.reject()方法

Promise.reject()方法返回一個新的Promise實例，該實例的狀態爲 rejected。

var p33 = Promise.reject('出錯了');
 p33.then(null, (s) => {
   console.log(s); // 出錯了
 });

上面代碼生成一個Promise對象的實例p33，狀態爲rejected，回調函數會當即執行。