詳細(xì)聊聊對async/await的理解和用法
async/await是什么
async/await 是ES7提出的基于Promise的解決異步的最終方案。
async
async是一個加在函數(shù)前的修飾符,被async定義的函數(shù)會默認(rèn)返回一個Promise對象resolve的值。因此對async函數(shù)可以直接then,返回值就是then方法傳入的函數(shù)。
// async基礎(chǔ)語法
async function fun0(){
console.log(1);
return 1;
}
fun0().then(val=>{
console.log(val) // 1,1
})
async function fun1(){
console.log('Promise');
return new Promise(function(resolve,reject){
resolve('Promise')
})
}
fun1().then(val => {
console.log(val); // Promise Promise
})
await
await 也是一個修飾符,只能放在async定義的函數(shù)內(nèi)??梢岳斫鉃榈却?/p>
await 修飾的如果是Promise對象:可以獲取Promise中返回的內(nèi)容(resolve或reject的參數(shù)),且取到值后語句才會往下執(zhí)行;
如果不是Promise對象:把這個非promise的東西當(dāng)做await表達(dá)式的結(jié)果。
async function fun(){
let a = await 1;
let b = await new Promise((resolve,reject)=>{
setTimeout(function(){
resolve('setTimeout')
},3000)
})
let c = await function(){
return 'function'
}()
console.log(a,b,c)
}
fun(); // 3秒后輸出: 1 "setTimeout" "function"
function log(time){
setTimeout(function(){
console.log(time);
return 1;
},time)
}
async function fun(){
let a = await log(1000);
let b = await log(3000);
let c = log(2000);
console.log(a);
console.log(1)
}
fun();
// 立即輸出 undefined 1
// 1秒后輸出 1000
// 2秒后輸出 2000
// 3秒后輸出 3000
async/await 的正確用法
// 使用async/await獲取成功的結(jié)果
// 定義一個異步函數(shù),3秒后才能獲取到值(類似操作數(shù)據(jù)庫)
function getSomeThing(){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve('獲取成功')
},3000)
})
}
async function test(){
let a = await getSomeThing();
console.log(a)
}
test(); // 3秒后輸出:獲取成功
附:async與await一些注意關(guān)鍵點(diǎn)小結(jié)
- await關(guān)鍵字必須位于async函數(shù)內(nèi)部
- await關(guān)鍵字后面需要一個promise對象(不是的話就調(diào)用resolve轉(zhuǎn)換它)
- await關(guān)鍵字的返回結(jié)果就是其后面Promise執(zhí)行的結(jié)果,可能是resolved或者rejected的值,注意最后執(zhí)行完的是個值。
- 不能在普通箭頭函數(shù)中使用await關(guān)鍵字,需要在箭頭函數(shù)前面添加async
- await用來串行的執(zhí)行異步操作,現(xiàn)實(shí)現(xiàn)并行可以考慮promise.all
async與await缺點(diǎn)
async函數(shù)中,如果有多個await關(guān)鍵字時,如果有一個await的狀態(tài)變成了rejected,那么后面的操作都不會繼續(xù)執(zhí)行,promise也是同理有這樣一個函數(shù)async
function getData()
{
let value=await get();
value++;
await set();//set完成后返回?cái)?shù)據(jù)
return value;
}
直接調(diào)用
var value=getData();
是對于這個函數(shù)直接調(diào)用的時候并不是你想要的返回值,因?yàn)閍sync方法返回的永遠(yuǎn)是一個promise,即使開發(fā)者返回的是一個常量,也會被自動調(diào)用的promise.resolve方法轉(zhuǎn)換為一個promise。因此對于這種情況,上層調(diào)用方法也需要是async函數(shù),采用如下方法
async function xxxx(){
var value=await getData();
return value;
}
對于這種調(diào)用,如果還存在更高層次的方法調(diào)用,那么從底層的異步操作開始,一直到最頂層一個不需要返回值的函數(shù)為止,全部的方法都要變成async。
總結(jié)
到此這篇關(guān)于async/await理解和用法的文章就介紹到這了,更多相關(guān)async/await用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
基于Day.js更優(yōu)雅的處理JavaScript中的日期
Day.js它能夠幫助我們處理JavaScript中的日期,本文就詳細(xì)的介紹一下Day.js的具體使用,可以更簡單的處理JavaScript中的日期和時間2021-09-09
JavaScript必看的10道面試題總結(jié)(推薦)
JavaScript 已經(jīng)成為全棧開發(fā)技能的基石,在全棧開發(fā)面試中都會不可避免地涉及到與 JavaScript 有關(guān)的問題。這篇文章主要給大家介紹了關(guān)于JavaScript必看的10道面試題,需要的朋友可以參考下2021-05-05
微信小程序如何實(shí)現(xiàn)數(shù)據(jù)共享與方法共享詳解
這篇文章主要給大家介紹了關(guān)于微信小程序如何實(shí)現(xiàn)數(shù)據(jù)共享與方法共享的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-01-01

