Promise

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

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

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

基本用法

Promise構(gòu)造函數(shù)接受一個函數(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
});

一個簡單實用的例子

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

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

如果用Promise對象實現(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("出錯了", error);
})

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

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

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

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

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

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

捕捉錯誤：Promise.prototype.catch方法

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

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

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

Promise.all方法

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

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

// 生成一個Promise對象的數(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)有對象轉(zhuǎn)我Promise對象，Promise.resolve方法就起到這個作用。

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

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

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

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

async函數(shù)

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

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

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

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í)行的時候，遇到await語句就會先返回，等到timeout函數(shù)執(zhí)行完畢，再返回value。