Js中async/await的示例分析

這篇文章將為大家詳細(xì)講解有關(guān)Js中async/await的示例分析，小編覺得挺實(shí)用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)公司長期為上千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為濱江企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)，濱江網(wǎng)站改版等技術(shù)服務(wù)。擁有十年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

  • async/await 是一種編寫異步代碼的新方法。之前異步代碼的方案是回調(diào)和 promise。

  • async/await 是建立在 promise 的基礎(chǔ)上。

  • async/await 像 promise 一樣，也是非阻塞的。

  • async/await 讓異步代碼看起來、表現(xiàn)起來更像同步代碼。這正是其威力所在。

async怎么處理返回值

async function testAsync() {
 return "hello async";
}
let result = testAsync();
console.log(result)

輸出結(jié)果：

Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: "hello async"}

從結(jié)果中可以看到async函數(shù)返回的是一個promise對象，如果在函數(shù)中 return 一個直接量，async 會把這個直接量通過 Promise.resolve() 封裝成 Promise 對象。

如果asyn函數(shù)沒有返回值

async function testAsync1() {
 console.log("hello async");
}
let result1 = testAsync1();
console.log(result1);

結(jié)果

hello async
Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: undefined}

結(jié)果返回Promise.resolve(undefined) 。

await做了什么處理

從字面意思上看await就是等待，await 等待的是一個表達(dá)式，這個表達(dá)式的返回值可以是一個promise對象也可以是其他值。

很多人以為await會一直等待之后的表達(dá)式執(zhí)行完之后才會繼續(xù)執(zhí)行后面的代碼，實(shí)際上await是一個讓出線程的標(biāo)志。await后面的函數(shù)會先執(zhí)行一遍，然后就會跳出整個async函數(shù)來執(zhí)行后面js棧（后面會詳述）的代碼。等本輪事件循環(huán)執(zhí)行完了之后又會跳回到async函數(shù)中等待await

后面表達(dá)式的返回值，如果返回值為非promise則繼續(xù)執(zhí)行async函數(shù)后面的代碼，否則將返回的promise放入promise隊列（Promise的Job Queue）

async/await 執(zhí)行順序

先看一個例子

function testSometing() {
 console.log("執(zhí)行testSometing");
 return "testSometing";
}

async function testAsync() {
 console.log("執(zhí)行testAsync");
 return Promise.resolve("hello async");
}

async function test() {
 console.log("test start...");
 const v1 = await testSometing();//關(guān)鍵點(diǎn)1
 console.log(v1);
 const v2 = await testAsync();
 console.log(v2);
 console.log(v1, v2);
}

test();

var promise = new Promise((resolve)=> { console.log("promise start.."); resolve("promise");});//關(guān)鍵點(diǎn)2
promise.then((val)=> console.log(val));

console.log("test end...")

輸出結(jié)果：

test start...
執(zhí)行testSometing
promise start..
test end...
testSometing
執(zhí)行testAsync
promise
hello async
testSometing hello async

當(dāng)test函數(shù)執(zhí)行到

const v1 = await testSometing()；

的時候，會先執(zhí)行testSometing這個函數(shù)打印出“執(zhí)行testSometing”的字符串，然后因?yàn)閍wait會讓出線程就會區(qū)執(zhí)行后面的

var promise = new Promise((resolve)=> { console.log("promise
start.."); resolve("promise");});//關(guān)鍵點(diǎn)2

然后打印出“promise start..”接下來會把返回的這promise放入promise隊列（Promise的Job Queue），繼續(xù)執(zhí)行打印“test end...”，等本輪事件循環(huán)執(zhí)行結(jié)束后，又會跳回到async函數(shù)中（test函數(shù)），等待之前await 后面表達(dá)式的返回值，因?yàn)閠estSometing 不是async函數(shù)，所以返回的是一個字符串“testSometing”，test函數(shù)繼續(xù)執(zhí)行，執(zhí)行到

const v2 = await testAsync();

和之前一樣又會跳出test函數(shù)，執(zhí)行后續(xù)代碼，此時事件循環(huán)就到了promise的隊列，執(zhí)行promise.then((val)=> console.log(val));then后面的語句，之后和前面一樣又跳回到test函數(shù)繼續(xù)執(zhí)行。

這個就是在async/await 函數(shù)之后js的執(zhí)行順序，我們再看一個列子把testSometing函數(shù)前面加上async

async function testSometing() {
 console.log("執(zhí)行testSometing");
 return "testSometing";
}

async function testAsync() {
 console.log("執(zhí)行testAsync");
 return Promise.resolve("hello async");
}

async function test() {
 console.log("test start...");
 const v1 = await testSometing();
 console.log(v1);
 const v2 = await testAsync();
 console.log(v2);
 console.log(v1, v2);
}

test();

var promise = new Promise((resolve)=> { console.log("promise start.."); resolve("promise");});//3
promise.then((val)=> console.log(val));

console.log("test end...")

輸出結(jié)果：

test start...
執(zhí)行testSometing
promise start..
test end...
promise
testSometing
執(zhí)行testAsync
hello async
testSometing hello async

和上一個例子比較發(fā)現(xiàn)promise.then((val)=> console.log(val));先與console.log(v1);執(zhí)行了，原因是因?yàn)楝F(xiàn)在testSometing函數(shù)加了async，返回的是一個Promise對象要要等它resolve，所以將當(dāng)前Promise推入隊列，所以會繼續(xù)跳出test函數(shù)執(zhí)行后續(xù)代碼。之后就開始執(zhí)行promise的任務(wù)隊列了，所以先執(zhí)行了promise.then((val)=> console.log(val));因?yàn)檫@個Promise對象先推入隊列；

關(guān)于“Js中async/await的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

文章題目：Js中async/await的示例分析
網(wǎng)址分享：http://muchs.cn/article48/ghggep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、域名注冊、外貿(mào)網(wǎng)站建設(shè)、定制開發(fā)、做網(wǎng)站、微信小程序

廣告

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

成都網(wǎng)站建設(shè)