Promise必知必會

promise裏面接收一個參數，參數是函數。這個函數裏面傳入兩個參數：resolve和reject，resolve是異步操做執行成功的回調函數，reject是異步操做執行失敗的回調函數，resolve是將Promise的狀態置爲fullfiled，reject是將Promise的狀態置爲rejected。
then方法是一個鏈式操做，用來分別指定成功和失敗的回調函數，then方法能夠接受兩個參數，第一個對應resolve狀態的回調，第二個對應reject狀態的回調。Promise對象除了then方法，還有一個catch方法，用於指定發生錯誤時的回調函數，其實它和then的第二個參數同樣，用來指定reject的回調。
區別：then 的第一個函數出錯了，後面的catch能夠捕獲，寫到then的第二個函數則捕獲不到。

es6文檔筆記：
promise表明一個異步操做，有三種狀態：pending(進行中)、fulfilled(已成功)和rejected(已失敗)。
狀態一旦改變，就不會再變。pending 變爲 fulfilled 和從 pending 變爲 rejected。這兩種狀態發生，會稱爲resolved(已定型)。
爲了行文方便，本章後面的resolved統一隻指fulfilled狀態，不包含rejected狀態。
resolve 和 reject 由 JavaScript 引擎提供，不用本身部署。

const promise=new Promise(function(resolve,reject){
if(異步操做成功){
  resolve(value);
}else{
 reject(error);
}
});

resolve在異步操做成功時調用，並將異步操做的結果，做爲參數傳遞出去。reject在異步操做失敗的時候調用，並將異步操做報出的錯誤，做爲參數傳遞出去。

Promise實例生成之後，能夠用then方法分別指定resolved狀態和rejected狀態的回調函數。

promise.then(function(value){
    //success
},function(error){
   //failure
});

舉個例子：

function timeout(){
  return new Promise((resolve,reject) => {
      setTimeout(resolve, ms, 'done');
  })
}
timeout(100).then((value) => {
   console.log(value);
});

上面代碼中，timeout方法返回一個Promise實例，表示一段時間之後纔會發生的結果。過了指定的時間（ms參數）之後，Promise實例的狀態變爲resolved，就會觸發then方法綁定的回調函數。
Promise新建後就會當即執行。

let promise = new Promise(function(resolve, reject) {
  console.log('Promise');
  resolve();
});
promise.then(function() {
  console.log('resolved.');
});
console.log('Hi!');
// Promise
// Hi!
// resolved

上面代碼中，Promise 新建後當即執行，因此首先輸出的是Promise。而後，then方法指定的回調函數，將在當前腳本全部同步任務執行完纔會執行，因此resolved最後輸出。

let promise = new Promise(function(resolve, reject) {
  console.log('Promise');
  reject();
});
promise.then(function() {
  console.log('resolved.');
});
console.log('Hi!');
//Promise
//Hi!

用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函數的參數除了正常的值之外，還多是另外一個 Promise 實例，好比像下面這樣。

const p1 = new Promise(function (resolve, reject) {
  // ...
});
const p2 = new Promise(function (resolve, reject) {
  // ...
  resolve(p1);
})

then方法返回的是一個新的Promise實例（注意，不是原來那個Promise實例）。所以能夠採用鏈式寫法，即then方法後面再調用另外一個then方法。

應用：
圖片加載：

const preLoadImage=function(path){
  return new Promise(function(resolve,reject){
    const image=new Image();
    image.onload=resolve;
    image.onerror=reject;
    image.src=path;
  });
};