ES6的Promise物件

Jsp發表於2018-05-16
Promise物件

參考：Promise物件

一：promise的含義

1、promise物件的狀態不受外界影響，promise物件代表一個非同步操作，有三種狀態：pending進行中、fulfilled已成功、rejected已失敗。

2、promise物件的狀態改變只有兩種可能：從pending變為fulfilled和從pending變為rejected。只要這兩種情況發生，狀態就不會變了。如果改變發生了，對Promise新增回掉函式可以立即得到結果。

二：缺點

1、新建就會立即執行，無法取消

2、如果不設定回撥函式，Promise內部丟擲的錯誤無法反應到外部

3、處於pending狀態時，無法得知進展到哪一個階段

三：基本用法

Promise物件是一個建構函式，用來生成Promise例項

const promise = new Promise(function(resolve,reject){
    if(/*非同步操作成功*/){
        resolve(value);
    }else{
        reject(error);
    }
});複製程式碼

用then方法指定resolved狀態和rejected狀態的回撥函式

promise.then(function(value){
    //success
},function(error){
    //failure
});複製程式碼

Promise新建就會立即執行

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

let promise = new Promise(function(resolve,reject){
    console.log('Promise');
    resolve();
});

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

console.log('Hi');

//Promise
//Hi
//resolved複製程式碼

用Promise物件實現ajax操作

const getJSON = function(url){
    return new Promise(function(resolve,reject){
        var request = new XMLHttpRequest();
        request.open(method,url);
        request.send(data);
        request.onreadystatechange = function(){
            if(request.readyState == 4){
                if(request.status == 200){
                    resolve(request.response);
                }else{
                    reject(request.status);
                }
            }
        }
    });
};

var p = getJSON(url);
p.then(function(json){
    console.log(json);
}).catch(function(error){
    console.log(error);
});複製程式碼

非同步載入圖片

function loadImageAsync(url){
  return new Promise(function(resole, 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.prototype.then()

第一個then方法返回的是一個Promise物件，第二個then方法指定的回撥函式等待這個新的Promise物件狀態發生變化，如果變為resolved，就呼叫第一個，變為rejected就呼叫第二個。

getJSON(url).then(
    post => getJSON(post.URL)
).then(
    comments => console.log(comments),
    err => console.log(err)
);複製程式碼

五：Promise其他方法

1、Promise.all()將多個Promise例項包裝成一個新的Promise例項

const p = Promise.all([p1,p2,p3]);

只有p1、p2、p3的狀態都變成fulfilled，p的狀態才會變成fulfilled；只要一個p1、p2、p3之中有一個被rejected，p的狀態就變成rejected。

2、Promise.race()

const p = Promise.race([p1,p2,p3])

只要p1、p2、p3之中一個例項改變狀態，p的狀態就跟著改變。


相關文章