理解異步之美：Promise與async await（二）

成都創(chuàng)新互聯(lián)-成都網(wǎng)站建設(shè)公司，專注網(wǎng)站建設(shè)、成都網(wǎng)站制作、網(wǎng)站營銷推廣，主機域名，雅安服務(wù)器托管，網(wǎng)站托管維護有關(guān)企業(yè)網(wǎng)站制作方案、改版、費用等問題，請聯(lián)系成都創(chuàng)新互聯(lián)。

你可能會放出一個怪物

異步與同步相比，最難以掌控的就是異步的任務(wù)會什么時候完成和完成之后的回調(diào)問題，

難以掌控的觸發(fā)狀態(tài)，讓你自己寫的代碼當時還可以讀懂，但是過幾天、半個月之后如果不重新盤一邊邏輯，你哪知道哪個內(nèi)容會先執(zhí)行，借用這么一個例子

listen( "click", function handler(evt){
    setTimeout( function request(){
        ajax( "http://some.url.1", function response(text){
            if (text == "hello") {
                handler();
            }
            else if (text == "world") {
                request();
            }
        } );
    }, 500) ;
} );

doSomething();

很難以理解這種地獄式的回調(diào)（回調(diào)地獄）會對可讀性有多么大的摧毀。

首先 執(zhí)行l(wèi)istern（）

其次 doSomething（）

500ms（或者更遠）后執(zhí)行ajax（）

ajax完成后

如果text === hello 執(zhí)行handler（）

如果text === world 執(zhí)行request（）

難受嗎？？？

在你不知道的javascript一書中，對于回調(diào)的信任問題做了闡述
當你使用第三方的庫的方法處理回調(diào)時很有可能遇到以下信任內(nèi)容：

cdn.xitu.io/2018/8/11/165291ae72b4fd0a?w=1834&h=360&f=png&s=83534">

怎么解決？？？？ 這種信任問題該怎么辦？

事實證明 你需要一個承諾

當你把一件事情交給別人去做（可能馬上就能完成的也可能是需要一段時間的）這個人在任務(wù)完成或者失敗后都會給你一個回應(yīng)，這樣的人你是不是特別放心的把事情交給他，他沒回應(yīng)你那么他是正在辦事、回應(yīng)你了就是成功了或者失敗了。

在javascript中這樣的人就是Promise。

Promise的實例有三個狀態(tài)，Pending（進行中）、Resolved（已完成）、Rejected（已拒絕）。當你把一件事情交給promise時，它的狀態(tài)就是Pending，任務(wù)完成了狀態(tài)就變成了Resolved、沒有完成失敗了就變成了Rejected。

言歸正傳：寫一個簡單的promise

let promise = new Promise((resolve,reject)=>{
    // 接收一個callback。參數(shù)是成功函數(shù)與失敗函數(shù)
    setTimeout(()=>{
       let num = parseInt(Math.random()*100);
       // 如果數(shù)字大于50就調(diào)用成功的函數(shù)，并且將狀態(tài)變成Resolved
       if(num > 50){
          resolve(num);
       }else{
        // 否則就調(diào)用失敗的函數(shù)，將狀態(tài)變成Rejected
          reject(num)
       }
    },10000)
})

當Promise執(zhí)行的內(nèi)容符合你預(yù)期的成功條件的話，就調(diào)用resolve函數(shù)，失敗就調(diào)用reject函數(shù)，這兩個函數(shù)的參數(shù)會被promise捕捉到。可以在之后的回調(diào)中使用。

創(chuàng)建一個承諾我們已經(jīng)做完了，那么如何使用承諾后的結(jié)果呢？

promise.then(res=>{
    console.log(res);
    //在構(gòu)造函數(shù)中如果你執(zhí)行力resolve函數(shù)就會到這一步
},err=>{
    // 執(zhí)行了reject函數(shù)會到這一步
    console.log(err);
})

then方法接收兩個函數(shù)，第一個是承諾成功（狀態(tài)為resolved）的回調(diào)函數(shù)，一個承諾失敗（狀態(tài)為rejected）的回調(diào)函數(shù)。

then方法的返回值不是一個promise對象就會被包裝成一個promise對象，所以then方法支持鏈式調(diào)用。

promise.then(res=>{ return 42}).then(res=>{console.log(res)})
// 打印出42

then方法的鏈式調(diào)用可以幫我們串行的解決一些邏輯，當我們平時書寫有順序的異步時間，比如

ajax('first');
ajax('second');
ajax('third');
需要按順序來執(zhí)行怎么辦？
ajax('first').success(function(res){
    ajax('second').success(function(res){
        ajax('third').success(function(res){
            //串行完畢可以執(zhí)行你想要的內(nèi)容了
        });
    })
})
多么美麗而又讓人望而卻步的三角形啊！！

如果使用then的鏈式調(diào)用呢？

let promise = new Promise((resolve,reject)=>{
    ajax('first').success(function(res){
        resolve(res);
    })
})
promise.then(res=>{
    return new Promise((resovle,reject)=>{
        ajax('second').success(function(res){
            resolve(res)
        })
    })
}).then(res=>{
    return new Promise((resovle,reject)=>{
        ajax('second').success(function(res){
            resolve(res)
        })
    })
}).then(res=>{
    // 串行完畢你要做的xxx可以開始了
})

而且每次執(zhí)行resolve的時候，都可以把每次ajax的回調(diào)數(shù)據(jù)進行傳遞到最后。清晰簡單明了。

說完串行了，那么并行怎么辦？？？
當有多個異步事件，之間并無聯(lián)系而且沒有先后順序，只需要全部完成就可以開始工作了。

串行會把每一個異步事件的等待時間進行一個相加，明顯會對完成進行一個阻塞。那么并行的話該怎么確定全部完成呢？

Promise.all 與 Promise.race的妙用

Promise.all 接收一個數(shù)組，數(shù)組的每一項都是一個promise對象。當數(shù)組中所有的promise的狀態(tài)都達到resolved的時候，Promise.all的狀態(tài)就會變成resolved，如果有一個狀態(tài)變成了rejected，那么Promise.all的狀態(tài)就會變成rejected（任意一個失敗就算是失敗），這就可以解決我們并行的問題。調(diào)用then方法時的結(jié)果成功的時候是回調(diào)函數(shù)的參數(shù)也是一個數(shù)組，按順序保存著每一個promise對象resolve執(zhí)行時的值。

let promise1 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
       resolve(1);
    },10000)
});
let promise2 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
       resolve(2);
    },9000)
});
let promise3 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
       resolve(3);
    },11000)
});
Promise.all([promise1,promise2,promise3]).then(res=>{
    console.log(res);
    //[1,2,3] 證明與哪個promise的狀態(tài)先變成resolved無關(guān)
})

let promise1 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
       reject(1);
    },10000)
});
let promise2 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
       resolve(2);
    },9000)
});
let promise3 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
       resolve(3);
    },11000)
});
let promiseAll =Promise.all([promise1,promise2,promise3]);
promiseAll.then(res=>{
    console.log(res);
},err=>{
    console.log(err)
})

看結(jié)果不難看出來符合之前所說的

Promise.race 競速模式 也是接受一個每一項都是promise的數(shù)組。但是與all不同的是，第一個promise對象狀態(tài)變成resolved時自身的狀態(tài)變成了resolved，第一個promise變成rejected自身狀態(tài)就會變成rejected。第一個變成resolved的promsie的值就會被使用。

let promise1 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
       reject(1);
    },10000)
});
let promise2 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
       resolve(2);
    },9000)
});
let promise3 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
       resolve(3);
    },11000)
});
Promise.race([promise1,promise2,promise3]).then(res=>{
    console.log(res);
    //打印出2 為什么不打印出1呢？因為promise2先完成了其余的就忽略來
},rej=>{
    console.log('rejected');
    console.log(rej)};
)
// 大家可以嘗試自己改變時間進行測試

Promsie.race還有一個很重要的實際用處就是，有時候我們要去做一件事，但是超過三秒鐘左右我們就不做了那怎么辦？
這個時候可以使用Promise.race方法

Promise.race([promise1,timeOutPromise(3000)]).then(res=>{})
// timeOutPromise延時3s左右 由于是用setTimeout來實現(xiàn)的并不一定準確3s（一般主線程在開發(fā)中不會阻塞3s以上的所以不會有太大問題）

這就是我對于Promise的一些基本理解。

很難受的一件事 白天辛苦寫的1736個字的內(nèi)容莫名其妙的被我刪掉了。。。。。內(nèi)容都去哪了？？？ 很藍瘦。。。 所以晚上又重新梳理了一遍。

下一期的內(nèi)容是針對于網(wǎng)上常見的Promise的自我實現(xiàn)進行一個分析，

總之一句話抓住Promise的承諾思想，就可以很好的去編寫promise的代碼。

async 與await將會在下期或者下下期進行講解。（很抱歉，想一口氣講完的但是內(nèi)容太多，我也需要慢慢梳理爭取給大家一個高質(zhì)量的文章，）

51CTO可能更新較慢（保持明天一更，但不限Web前端），如果想第一時間看到這個系列文章的后續(xù)，可以關(guān)注一下我們的掘金

當前名稱：理解異步之美：Promise與asyncawait（一）
分享地址：http://chinadenli.net/article12/jigjdc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計公司、App開發(fā)、App設(shè)計、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)