Promise對象的含義和基本用法

1.Promise的含義
Promise是異步編程的一種解決方案，比傳統的解決方案（回調函數和事件）更合理更強大。

所謂Promise，簡單說就是一個容器，裏面保存着某個將來纔會結束的事件 (一般是一個異步操做)的結果。從語法上說，Promise是一個對象，從它能夠獲取異步操做的消息。

Promise對象有如下2個特色：
1.對象的狀態不受外界影響。Promise對象表明一個異步操做，有三種狀態：Pending(進行中)、Resolved(已完成)和Rejected(已失敗)。只有異步操做的結果，能夠決定當前是哪種狀態，任何其餘操做都沒法改變這個狀態。這也是Promise這個名字的由來，它的英語意思就是「承諾」，表示其餘手段沒法改變。
2.一旦狀態改變，就不會再變，任什麼時候候均可以獲得這個結果。Promise對象的狀態改變，只有兩種可能：從Pending變爲Resolved；從Pending變爲Rejected。只要這兩種狀況發生，狀態就凝固了，不會再變了，會一直保持這個結果。就算改變已經發生了，你再對Promise對象田靜回調函數，也會當即獲得這個結果。這與事件(Event)徹底不一樣，事件的特色是，若是你錯過了它，再去監聽，是得不到結果的。

有了Promise對象，就能夠把異步操做以同步操做的流程表達出來，避免了層層嵌套的回調函數。此外，Promise對象提供了統一的接口，使得控制異步操做更加容易。

2.基本用法

ES6規定，Promise對象是一個構造函數，用來生成Promise實例

var promise = new Promise(function(resolve,reject){
  // ... some code
  if(/* 異步操做成功 */){
    resolve(value);
  }else{
    reject(error);
  }
});

Promise構造函數接受一個函數做爲參數，該函數的兩個參數分別是resolve和reject。它們是兩個函數，又JavaScript引擎提供，不是本身部署。

resolve函數的做用，將Promise對象的狀態從「未完成」變成「成功」(即從Pending變爲Resolved)，在異步操做成功時調用，並將異步操做的結果，做爲參數傳遞出去；
reject函數的做用是，在異步操做失敗時調用，並將異步操做報出的錯誤，做爲參數傳遞出去。

Promise實例生成之後，能夠用then方法分別制定Resolved狀態和Rejected狀態的回調函數

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

then方法能夠接受2個回調函數做爲參數，第二個函數是可選的，不必定要提供。這兩個函數都接受Promise對象傳出的值做爲參數。

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

function timeout(ms){
  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,rejeact){
  console.log('Promise');
  resolve();
});

promise.then(function(){
  console.log('Resolved');
});

console.log('Hi');

// Promise
// Hi
// Resolved

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

下面是異步加載圖片的例子：

function loadImageAsync(url){
  return new Promise(function(resolve,reject){
    var image = new Image();
    image.onload = function(){
      resolve(image);
    };
    image.onerror = function(){
      reject(new Error('Could not load image at' + url));
    };

    image.src = url;
  });
}

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

var getJSON = function(url){
  var promise = new Promise(function(resolve,reject){
    var client = new XMLHttpRequest();
    client.open('GET',url);
    client.onreadystatechange = handler;
    client.responseType = 'json';
    client.setRequestHeader('Accept','application/json');
    client.send();

    function handler(){
      if(this.readyState !== 4){
        return;
      }
      if(this.status === 200){
        resolve(this.response);
      }else{
        reject(new Error(this.statusText));
      }
    }
  });

  return promise;
};

//
getJSON('/posts.jons').then(function(json){
  consoloe.log(json);
},function(error){
  console.log('出錯了');
});

 

本文轉載至http://www.javashuo.com/article/p-yxxllroj-nk.html