Promise的基本使用

是我放火燒了雨發表於2018-04-09

利用Promise是解決JS非同步執行時候回撥函式巢狀回撥函式的問題, 更簡潔地控制函式執行流程;

  通過new例項化Promise, 建構函式需要兩個引數, 第一個引數為函式執行成功以後執行的函式resolve, 第二個函式為函式執行失敗以後執行的函式reject:

new Promise(function(resolve , reject) {

});   

通過Promise,我們把回撥函式用線性的方式寫出來,而不是一層套一層, 這個函式有四層回撥;

fn("args", function(a) {

fn1("foo", function(b) {
    fn2("bar", function(c) {
        fn3("baz", function(d) {
            alert("回撥成功,獲知的內容為:"+a+b+c+d)
        })
    })
})
複製程式碼

})   以上的Demo只有包含成功的回撥, 如果失敗的回撥也算的話, 也就更麻煩了;

  

  如果使用Promise的方式,我們可以改裝成線性的程式碼, 更加符合閱讀習慣,只要在then函式下寫邏輯即可;

new Promise(function(resolve , reject) {

resolve(1);
複製程式碼

}).then(function(val) {

console.log(val);
return new Promise(function(resolve , reject) {
    resolve(2);
});
複製程式碼

}).then(function(val) {

console.log(val);
return new Promise(function(resolve , reject) {
    resolve(3);
});
複製程式碼

}).then(function(val) {

console.log(val);
return new Promise(function(resolve , reject) {
    resolve(4);
});
複製程式碼

}).then(function(val) {

console.log(val);
複製程式碼

}); Promise例項的三種狀態:

  每一個例項化的Promise都有三個狀態;pending(等待) rejected(拒絕) resolved(解決) ,預設的狀態為pending,如果執行了resolve(), 那麼這個promise的狀態會變為resolve,如果執行了reject(), 那麼這個promise的狀態就會變成rejected, 而且這些狀態是不可撤銷的,一經更改,不會再變了;

  then方法:promise有一個then方法,then方法接收兩個引數, 第一個為函式的成功回撥, 第二個為函式的失敗回撥:

var promise = new Promise(function(resolve , reject) {

resolve(); //執行成功回撥;
複製程式碼

});

console.log(0);

promise.then(function(val) {

console.log(1); 
複製程式碼

}, function() {

console.log("失敗");
複製程式碼

});

console.log("2");

var promise = new Promise(function(resolve , reject) {

reject();
複製程式碼

});

console.log(0);

promise.then(function(val) {

console.log(1);
複製程式碼

}, function() {

console.log("失敗");
複製程式碼

});

console.log("2");

  then方法每一次都是返回不同的Promise例項,then的第一個引數是成功回撥, 這個成功回撥的引數為: 上一個Promise例項執行resolve方法的引數;

  一般來說, then方法會返回當前的promise, 如果在then方法裡面return 一個新的Promise例項,那麼此時的then返回的就是新的Promise例項, 利用這個特性,就可以實現多層回撥;

複製程式碼 new Promise(function(resolve , reject) {

resolve(1);
複製程式碼

}).then(function(val) {

console.log(val);
return new Promise(function(resolve , reject) {
    resolve(2);
});
複製程式碼

}).then(function(val) {

console.log(val);
return new Promise(function(resolve , reject) {
    resolve(3);
});
複製程式碼

}).then(function(val) {

console.log(val);
return new Promise(function(resolve , reject) {
    resolve(4);
});
複製程式碼

}).then(function(val) {

console.log(val);
複製程式碼

});

  不管程式碼是非同步還是同步的, 都可以用Promise的then方法, 同步的程式碼直接寫在then方法第一個引數, 把需要引數通過resolve傳給下一個then方法,

  如果是非同步的程式碼, 就直接return一個Promise例項:

new Promise(function(resolve , reject) {

resolve(1);
複製程式碼

}).then(function(val) {

console.log(val);
return 2;
複製程式碼

}).then(function(val) {

console.log(val);
return 3;
複製程式碼

}).then(function(val) {

console.log(val);
return new Promise(function(resolve,reject) {
    //非同步操作些這裡
    resolve(4);
});
複製程式碼

}).then(function(val) {

console.log(val);
return 5;
複製程式碼

}).then(function(val) {

console.log(val);
複製程式碼

});

以上只是Promise的一些基礎知識, 還有一些其他的知識點, 就不一一介紹了(Promise.resolve的不同引數, 與Generator一起使用, Promise的附加方法, 等等等等);

相關文章