Javascript的異步函數(shù)和Promise對(duì)象你了解嗎

第Javascript的異步函數(shù)和Promise對(duì)象你了解嗎目錄1、JS中的異步1.1同步1.2異步1.3回調(diào)函數(shù)解決異步問(wèn)題1.4回調(diào)地獄2、Promise對(duì)象2.1Promise的基本使用2.2async和await總結(jié)

1、JS中的異步

1.1同步

一般情況下，js的代碼都是自上而下順序運(yùn)行的。例如：

letres='';

res='獲取到的結(jié)果！';

console.log(res);

結(jié)果：

很容易理解，我給res賦了新值，然后輸出res。這就是js的同步執(zhí)行，這里的同步，并不是一起執(zhí)行的意思，而是在一個(gè)線程里順序執(zhí)行的意思。因?yàn)镴avaScript是單線程，所以所有程序都應(yīng)該在一個(gè)線程里運(yùn)行。

1.2異步

但是有的時(shí)候，我們獲取res的值是需要一點(diǎn)時(shí)間的，例如使用ajax向服務(wù)器發(fā)起請(qǐng)求，服務(wù)器響應(yīng)以后返回結(jié)果，我們?cè)賹⒔Y(jié)果賦值給res。

這里使用setTimeout函數(shù)模擬數(shù)據(jù)請(qǐng)求，setTimeout也是一個(gè)異步函數(shù)。

letres='';

setTimeout(()={

res='獲取到的結(jié)果！';

console.log('獲取到結(jié)果了！',res);

},3000);

console.log('res',res);

可以看到，沒(méi)有立刻獲取到結(jié)果，而是3s后才獲取到結(jié)果。

為什么會(huì)這樣呢？

由于獲取res它是一個(gè)異步操作，所以它會(huì)被分為兩部分來(lái)執(zhí)行，先調(diào)用setTimeout方法，然后把要執(zhí)行的函數(shù)放到一個(gè)隊(duì)列中。代碼繼續(xù)往下執(zhí)行，當(dāng)把所有的代碼都執(zhí)行完后，放到隊(duì)列中的函數(shù)才會(huì)被執(zhí)行。因?yàn)閖s的單線程機(jī)制，不允許它花費(fèi)時(shí)間去等待異步函數(shù)的結(jié)果。

1.3回調(diào)函數(shù)解決異步問(wèn)題

既然異步函數(shù)的結(jié)果會(huì)再最后獲取，那么我們就可以給異步函數(shù)中加一個(gè)回調(diào)函數(shù)，來(lái)處理獲取到的數(shù)據(jù)。

letres='';

setTimeout(()={

res='獲取到的結(jié)果！';

callback();

},3000);

functioncallback(){

console.log('獲取到結(jié)果了！',res);

console.log('處理結(jié)果！');

console.log('res',res);

現(xiàn)在console.log(res,res);仍然沒(méi)有獲取到res，但是我們已經(jīng)不需要它了，我們獲取res的就是為了處理它，而使用callback函數(shù)就可以達(dá)到目的了！

1.4回調(diào)地獄

1.3了解了可以通過(guò)調(diào)用函數(shù)解決無(wú)法獲取結(jié)果的問(wèn)題，但是它仍然是存在缺點(diǎn)的，如果只獲取一次結(jié)果，那還好。但是如果我們?cè)讷@取結(jié)果之后，還需要利用獲取的結(jié)果再進(jìn)行異步操作，那么又需要嵌套一層，又需要一次異步操作，再嵌套一層

setTimeout(function(){

console.log("first");

setTimeout(function(){

console.log("second");

setTimeout(function(){

console.log("third");

setTimeout(function(){

console.log("fourth");

},2000);

},2000);

},2000);

},2000);

雖然上述代碼會(huì)按照我們預(yù)期的方向運(yùn)行，但是多層的嵌套讓代碼閱讀和維護(hù)起來(lái)十分的困難。

2、Promise對(duì)象

2.1Promise的基本使用

為了解決異步中的回調(diào)地獄問(wèn)題，ES6引入了Promise對(duì)象，使得我們可以十分優(yōu)雅地進(jìn)行異步操作。

從語(yǔ)法上來(lái)說(shuō)，Promise是一個(gè)對(duì)象，從它可以獲取異步操作的消息。

lettimeout=function(time){

returnnewPromise(function(resolve,reject){

setTimeout(function(){

resolve();

},time);

console.log("開(kāi)始運(yùn)行！");

timeout(2000).then(function(){

console.log("first");

returntimeout(2000);

}).then(function(){

console.log("second");

returntimeout(2000);

}).then(function(){

console.log("third");

returntimeout(2000);

}).then(function(){

console.log("fourth");

returntimeout(2000);

這樣就解決了上述的回調(diào)地獄的問(wèn)題。并且then也很容易理解，就是上一個(gè)異步函數(shù)執(zhí)行完成后，接著要進(jìn)行的操作。

同時(shí)Promise對(duì)象也可以通過(guò)resolve和reject傳遞參數(shù)：

letres=null;

lettimeout=function(time){

returnnewPromise(function(resolve,reject){

setTimeout(function(){

res=false;

if(res){

resolve('res為true');

}else{

reject('res為false');

},time);

timeout().then((res)={

console.log(res);

}).catch((error)={

console.log(error);

這樣就可以根據(jù)res的值來(lái)確定結(jié)果了。resolve()對(duì)應(yīng)then的結(jié)果，而reject()對(duì)應(yīng)catch的結(jié)果。這在axios的請(qǐng)求操作中是十分常見(jiàn)的。

2.2async和await

mdn描述如下：

async函數(shù)是使用async關(guān)鍵字聲明的函數(shù)。async函數(shù)是AsyncFunction構(gòu)造函數(shù)的實(shí)例，并且其中允許使用await關(guān)鍵字。async和await關(guān)鍵字讓我們可以用一種更簡(jiǎn)潔的方式寫(xiě)出基于Promise的異步行為，而無(wú)需刻意地鏈?zhǔn)秸{(diào)用promise。

async和await的關(guān)系：

async函數(shù)可能包含0個(gè)或者多個(gè)await表達(dá)式。await表達(dá)式會(huì)暫停整個(gè)async函數(shù)的執(zhí)行進(jìn)程并出讓其控制權(quán)，只有當(dāng)其等待的基于promise的異步操作被兌現(xiàn)或被拒絕之后才會(huì)恢復(fù)進(jìn)程。promise的解決值會(huì)被當(dāng)作該await表達(dá)式的返回值。使用async/await關(guān)鍵字就可以在異步代碼中使用普通的try/catch代碼塊。

functiongetProcessedData(url){

returndownloadData(url)//返回一個(gè)promise對(duì)象

.catch(e={

returndownloadFallbackData(url)//返回一個(gè)promise對(duì)象

.then(v={

returnprocessDataInWorker(v);//返回一個(gè)promise對(duì)象

使用async和await重寫(xiě)上述函數(shù)。

asyncfunctiongetProcessedData(url){

letv;

try{