ECMAScript6入門（五）--異步編程核心Promise

異步編程是Javascript的特性之一，正是由於這種特性，才使得咱們在瀏覽網頁的時候，即便同時加載很是多的文件圖片，也能保證速度的流暢。異步編程算是彌補了JS做爲單線程語言的不足。

---

是什麼

傳統的異步編程主要是經過回調函數和事件來實現的，一般咱們見到的回調陷阱就是經過這種方式實現的；而ES6提出的Promise是 異步編程的另外一種解決方案，給咱們提供了以同步的方式解決異步需求的選擇。

所謂Promise，簡單說就是一個容器，裏面保存着某個將來纔會結束的事件（一般是一個異步操做）的結果。

特性

一個Promise對象表明一個異步操做，Promise有三種狀態：Pending(進行中)、Resolved(完成)、Rejected(失敗)。

Promise只有兩種狀態的轉變方式，從Pending變爲Resolved和從Pending變爲Rejected，狀態一旦轉變，將會被固定，再也不變化。

Promise一旦被初始化就不能被中途取消了，另外當處於Pending狀態時，不能更具體的區分狀態。

---

如何用

咱們先來看一個標準的Promise實例

var promise = new Promise(function(resolve, reject){
    //do something
    
    if(/*操做成功*/){
        resolve(value);
    }else{
        reject(error);
    }
});

Promise實例化以後，能夠用then方法指定Resolved狀態和Reject狀態的回調函數。

promise.then(function(value) {
    //成功
}, function(error) {
    //失敗
}

舉個栗子

咱們用Promise實現一個異步加載圖片的例子。

function asyncLoadImage(url) {
    return new Promise(function(resolve, reject){
        //初始化圖片對象
        var image = new Image();
        //加載成功
        image.onload = function(){
            resolve(image);
        };
        //加載失敗
        image.onerror = function(){
            reject("圖片加載失敗！");
        };
        
        image.src = url;
    });
}
//實際應用
asyncLoadImage("index.jpg").then(function(value){
    console.log(value.src);
}, function(error){
    console.log(error);
}

咱們使用then()給Promise對象添加成功和失敗的操做。

注意若是採用如下寫法是不可行的。

function asyncLoadImage(url, resolve, reject) {
    return new Promise(function(resolve, reject){
        //....
     });
}

由於必需要經過then()，才能將方法添加到Promise中。

再舉個栗子

咱們前端開發過程當中，最經常使用的數據交互方式就是Ajax，Ajax就是事件驅動的異步編程，咱們如今用Promise來實現一個Ajax操做。

var post = function(option) {
  var promise = new Promise(function(resolve, reject){
    var client = new XMLHttpRequest();
    client.open("POST", option.url);
    client.onreadystatechange = handler;
    client.responseType = "json";
    client.setRequestHeader("Accept", "application/json");
    client.send(option.data);

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

  return promise;
};

post({
    url: 'www.lingxiao.site/es6/post',
    data: json,
}).then(function(result){
    console.log(result);
},function(error){
    console.log("Error:"+error);
});

這樣咱們就實現了一個簡單的Ajax方法。

---

最後

沒有最後