await/async簡(jiǎn)介
創(chuàng)新互聯(lián)建站是一家專業(yè)提供新鄉(xiāng)企業(yè)網(wǎng)站建設(shè),專注與成都做網(wǎng)站、網(wǎng)站制作、H5技術(shù)、小程序制作等業(yè)務(wù)。10年已為新鄉(xiāng)眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。
await/async是ES7最重要特性之一,它是目前為止JS最佳的異步解決方案了。雖然沒(méi)有在ES2016中錄入,但很快就到來(lái),目前已經(jīng)在 ES-NextStage4階段。
async/await特點(diǎn)
async/await更加語(yǔ)義化,async 是“異步”的簡(jiǎn)寫,async function 用于申明一個(gè) function 是異步的; await,可以認(rèn)為是async wait的簡(jiǎn)寫, 用于等待一個(gè)異步方法執(zhí)行完成;
async/await是一個(gè)用同步思維解決異步問(wèn)題的方案(等結(jié)果出來(lái)之后,代碼才會(huì)繼續(xù)往下執(zhí)行)
可以通過(guò)多層 async function 的同步寫法代替?zhèn)鹘y(tǒng)的callback嵌套
async function語(yǔ)法
自動(dòng)將常規(guī)函數(shù)轉(zhuǎn)換成Promise,返回值也是一個(gè)Promise對(duì)象
只有async函數(shù)內(nèi)部的異步操作執(zhí)行完,才會(huì)執(zhí)行then方法指定的回調(diào)函數(shù)
異步函數(shù)內(nèi)部可以使用await
直接上例子,比如我們需要按順序獲?。寒a(chǎn)品數(shù)據(jù)=>用戶數(shù)據(jù)=>評(píng)論數(shù)據(jù)
老朋友 Ajax
傳統(tǒng)的寫法,無(wú)需解釋
// 獲取產(chǎn)品數(shù)據(jù) ajax('products.json', (products) => { console.log('AJAX/products >>>', JSON.parse(products)); // 獲取用戶數(shù)據(jù) ajax('users.json', (users) => { console.log('AJAX/users >>>', JSON.parse(users)); // 獲取評(píng)論數(shù)據(jù) ajax('products.json', (comments) => { console.log('AJAX/comments >>>', JSON.parse(comments)); }); }); });
不算新的朋友 Promise
Promise 已經(jīng)被提及已久了,也是 ES6 的一部分。Promise 能消除 callback hell 帶來(lái)的厄運(yùn)金字塔,相比起來(lái)代碼更清晰了。
// Promise // 封裝 Ajax,返回一個(gè) Promise function requestP(url) { return new Promise(function(resolve, reject) { ajax(url, (response) => { resolve(JSON.parse(response)); }); }); } // 獲取產(chǎn)品數(shù)據(jù) requestP('products.json').then(function(products){ console.log('Promises/products >>>', products); }); // 獲取用戶數(shù)據(jù) requestP('users.json').then(function(users){ console.log('Promises/users >>>', users); }); // 獲取評(píng)論數(shù)據(jù) requestP('comments.json').then(function(comments){ console.log('Promises/comments >>>', comments); });
當(dāng)然使用 Promise.all 可以更簡(jiǎn)潔
Promise.all([ requestP('products.json'), requestP('users.json'), requestP('comments.json') ]) .then(function(data) { console.log('Parallel promises >>>', data); });
強(qiáng)勁的新朋友 Generators
Generators 也是 ES6 一個(gè)新的特性,能夠 暫停/執(zhí)行 代碼。yield 表示暫停,iterator.next 表示執(zhí)行下一步,如果你不了解 Generators 也沒(méi)關(guān)系,可以忽略它直接學(xué)習(xí) await/async。
// Generators function request(url) { ajax(url, (response) => { iterator.next(JSON.parse(response)); }); } function *main() { // 獲取產(chǎn)品數(shù)據(jù) let data = yield request('products.json'); // 獲取用戶數(shù)據(jù) let users = yield request('users.json'); // 獲取評(píng)論數(shù)據(jù) let products = yield request('comments.json'); console.log('Generator/products >>>', products); console.log('Generator/users >>>', users); console.log('Generator/comments >>>', comments); } var iterator = main(); iterator.next(); 碉堡的朋友 await/async 與 Promise 結(jié)合使用 // 封裝 Ajax,返回一個(gè) Promise function requestP(url) { return new Promise(function(resolve, reject) { ajax(url, (response) => { resolve(JSON.parse(response)); }); }); } (async () => { // 獲取產(chǎn)品數(shù)據(jù) let data = await requestP('products.json'); // 獲取用戶數(shù)據(jù) let users = await requestP('users.json'); // 獲取評(píng)論數(shù)據(jù) let products = await requestP('comments.json'); console.log('ES7 Async/products >>>', products); console.log('ES7 Async/users >>>', users); console.log('ES7 Async/comments >>>', comments); }());
與 Fetch API 結(jié)合使用:
(async () => { // Async/await using the fetch API try { // 獲取產(chǎn)品數(shù)據(jù) let products = await fetch('products.json'); // Parsing products let parsedProducts = await products.json(); // 獲取用戶數(shù)據(jù) let users = await fetch('users.json'); // Parsing users let parsedUsers = await users.json(); // 獲取評(píng)論數(shù)據(jù) let comments = await fetch('comments.json'); // Parsing comments let parsedComments = await comments.json(); console.log('ES7 Async+fetch/products >>>', parsedProducts); console.log('ES7 Async+fetch/users >>>', parsedUsers); console.log('ES7 Async+fetch/comments >>>', parsedComments); } catch (error) { console.log(error); } }());
按數(shù)組順序執(zhí)行
(async () => { let parallelData = await* [ requestP('products.json'), requestP('users.json'), requestP('comments.json') ]; console.log('Async parallel >>>', parallelData); }());
再次結(jié)合 Fetch
(async () => { let parallelDataFetch = await* [ (await fetch('products.json')).json(), (await fetch('users.json')).json(), (await fetch('comments.json')).json() ]; console.log('Async parallel+fetch >>>', parallelDataFetch); }());
使用 await/async 用同步的思維去解決異步的代碼,感覺(jué)非??岱浅K?/p>
網(wǎng)站標(biāo)題:JavaScript中await和async有什么作用
本文鏈接:http://bm7419.com/article32/goecsc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供域名注冊(cè)、外貿(mào)建站、網(wǎng)站改版、軟件開發(fā)、商城網(wǎng)站、企業(yè)建站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
網(wǎng)頁(yè)設(shè)計(jì)公司知識(shí)