Promise

laoLiueizo 發(fā)布于2019-08-20 14:40 / 823人閱讀

摘要：上面的代碼指定了兩個(gè)回調(diào)函數(shù)，第一個(gè)回調(diào)函數(shù)完成以后，會(huì)將結(jié)果作為參數(shù)傳入到第二個(gè)回調(diào)函數(shù)。對(duì)進(jìn)行處理捕捉錯(cuò)誤方法其實(shí)是對(duì)的調(diào)用，用于指定發(fā)生錯(cuò)誤時(shí)的回調(diào)函數(shù)。

Promise對(duì)象是一種異步編程的解決方案，比傳統(tǒng)的解決方案——會(huì)掉函數(shù)和事件——更合理和強(qiáng)大。
Promise有三種狀態(tài)：pending(進(jìn)行中)、Resolved(Fulfilled,已完成)和Rejected(已失敗)；而且狀態(tài)一旦改變，就不會(huì)再發(fā)生改變，Promise對(duì)象的狀態(tài)只有兩種可能：從Pending變?yōu)镽esolved和從Pending變?yōu)镽ejected。只要這兩種情況發(fā)生了，狀態(tài)就凝固了，不會(huì)再變了。Promise有一些缺點(diǎn)，就是無(wú)法取消，一旦新建它就會(huì)執(zhí)行，無(wú)法中途取消；其次如果不設(shè)置回調(diào)函數(shù)，Promise內(nèi)部拋出的錯(cuò)誤，不會(huì)反應(yīng)到外部；第三Pending狀態(tài)時(shí)，無(wú)法得知目前進(jìn)展到哪一個(gè)階段。

基本用法

Promise構(gòu)造函數(shù)接受一個(gè)函數(shù)作為參數(shù)，該函數(shù)參數(shù)分別是resolve和reject方法。如果成功，則用resolve將Promise的狀態(tài)改為成功，即從Pending變?yōu)閞esolved;如果異步失敗，則從Pending改為rejected。

基本用法

var promise = new Promise(function(resolve, reject){
    if(/*異步操作成功*/){
        resolve(value);
    } else{
        reject(error);
    }
});
promise.then(function(value){
    //success
}, function(value){
    //failure
});

一個(gè)簡(jiǎn)單實(shí)用的例子

function timeout(ms){
    return new Promise((resolve) => {
        setTimeout(resolve, ms);
    });
}

timeout(100).then(()=>{
    console.log("done");
})

如果用Promise對(duì)象實(shí)現(xiàn)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.status == 200){
                resolve(this.response);
            }else {
                reject(new Error(this.statusText));
            }
        }
        
        return promise;
    })
}

getJSON("/posts.json").then(function(json){
    console.log("Contents:" + json);
}, function(error){
    console.error("出錯(cuò)了", error);
})

在resolve的方法參數(shù)除了正常值以為，還可以能是另一個(gè)Promise實(shí)例。

Promise的鏈?zhǔn)讲僮鳎篜romise.prototype.then

Promise.prototype.then返回的是一個(gè)新的Promise對(duì)象，因此可以寫(xiě)成鏈?zhǔn)降摹?/p>

getJSON("/posts.json").then(function(json){
    return json.post;
}).then(function(){
    //proceed
})

上面的代碼指定了兩個(gè)回調(diào)函數(shù)，第一個(gè)回調(diào)函數(shù)完成以后，會(huì)將結(jié)果作為參數(shù)傳入到第二個(gè)回調(diào)函數(shù)。
如果第一個(gè)回調(diào)函數(shù)返回的是Promise對(duì)象，這樣后一個(gè)函數(shù)調(diào)用就將等待該P(yáng)romise對(duì)象有了運(yùn)行結(jié)果，才會(huì)進(jìn)一步調(diào)用。

getJSON("/post/1.json").then(function(post){
    return getJSON(post.commentURL);
}).then(function(comments){
    //對(duì)comments進(jìn)行處理
})

捕捉錯(cuò)誤：Promise.prototype.catch方法

Promise.prototype.catch其實(shí)是對(duì)Promise.prototype.then(null, rejection)的調(diào)用，用于指定發(fā)生錯(cuò)誤時(shí)的回調(diào)函數(shù)。

Promise.prototype.catch 對(duì)錯(cuò)誤具有“冒泡”性質(zhì)，會(huì)一直向后傳遞，直到被捕獲，也就是錯(cuò)我總是被下一個(gè)catch語(yǔ)句捕獲。

getJSON("/post/1.json").then(function(post) {
  return getJSON(post.commentURL);
}).then(function(comments) {
  // some code
}).catch(function(error) {
  // 處理前兩個(gè)回調(diào)函數(shù)的錯(cuò)誤
});

Promise.all方法

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

這個(gè)方法接受一個(gè)數(shù)組作為參數(shù),p1,p2,p3都是Promise對(duì)象的實(shí)例。p的最終狀態(tài)取決于參數(shù)對(duì)象數(shù)組的狀態(tài)，上例中就是p1,p2,p3來(lái)決定的。如果這三個(gè)都是fulfilled,那么p的狀態(tài)就是fulfilled;如果p1,p2,p3中有一個(gè)是rejected,p的狀態(tài)就是rejected.那么p的狀態(tài)就是reject，會(huì)傳遞給p的回調(diào)函數(shù)。

// 生成一個(gè)Promise對(duì)象的數(shù)組
var promises = [2, 3, 5, 7, 11, 13].map(function(id){
  return getJSON("/post/" + id + ".json");
});

Promise.all(promises).then(function(posts) {
  // ...  
}).catch(function(reason){
  // ...
});

Promise.resolve方法，Promise.reject方法

將現(xiàn)有對(duì)象轉(zhuǎn)我Promise對(duì)象，Promise.resolve方法就起到這個(gè)作用。

var jsPromise = Promise.resolve($.ajax("/whatever.json"));

上面jQuery生成defferred對(duì)象，轉(zhuǎn)為一個(gè)新的ES6的Promise對(duì)象。
如果Promise.resolve方法的參數(shù)，不具有then方法的對(duì)象（又稱(chēng)thenable對(duì)象），則返回一個(gè)新的Promise對(duì)象，且他的狀態(tài)為fulfilled.

var p = Promise.resolve("Hello");
p.then(function(s){
    console.log(s)
})
//Hello

上面生成一個(gè)新的Promise對(duì)象的實(shí)例p，它的狀態(tài)為fulfilled。
Promise.reject(reason)方法也會(huì)返回一個(gè)新的Promise實(shí)例，該實(shí)例的狀態(tài)為rejected，Promise.reject方法的參數(shù)reason,會(huì)被傳遞給實(shí)例的回調(diào)函數(shù)。

async函數(shù)

async函數(shù)是用來(lái)取代回調(diào)函數(shù)的另一種方法。只要函數(shù)之前加上async的關(guān)鍵字，就表明該函數(shù)內(nèi)部有異步操作。該異步操作返回一個(gè)Promise對(duì)象，前面用await關(guān)鍵字注明。當(dāng)函數(shù)執(zhí)行的時(shí)候，一旦遇到await就立馬返回，等接觸到異步操作完成，再接著執(zhí)行函數(shù)體內(nèi)后面的語(yǔ)句。

async function getStockPrice(symbol, currency) {
    let price = await getStockPrice(symbol);
    return convert(price, currency);
}

函數(shù)前面加了一個(gè)async表明該函數(shù)將返回一個(gè)Promise對(duì)象，調(diào)用該函數(shù)時(shí)，遇到await關(guān)鍵字，立刻返回后面的表達(dá)式產(chǎn)生的Promise對(duì)象，不再執(zhí)行函數(shù)體后面的語(yǔ)句。等getStockPrice完成，在自動(dòng)回到函數(shù)體內(nèi)，執(zhí)行剩下的語(yǔ)句。

function timeout(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

async function asyncValue(value) {
  await timeout(50);
  return value;
}

上面代碼中，asyncValue函數(shù)前面有async關(guān)鍵字，表明函數(shù)體內(nèi)有異步操作。執(zhí)行的時(shí)候，遇到await語(yǔ)句就會(huì)先返回，等到timeout函數(shù)執(zhí)行完畢，再返回value。