詳細聊聊對async/await的理解和用法
async/await是什么
async/await 是ES7提出的基于Promise的解決異步的最終方案。
async
async是一個加在函數(shù)前的修飾符,被async定義的函數(shù)會默認返回一個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的東西當做await表達式的結(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)鍵點小結(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)實現(xiàn)并行可以考慮promise.all
async與await缺點
async函數(shù)中,如果有多個await關(guān)鍵字時,如果有一個await的狀態(tài)變成了rejected,那么后面的操作都不會繼續(xù)執(zhí)行,promise也是同理有這樣一個函數(shù)async
function getData() { let value=await get(); value++; await set();//set完成后返回數(shù)據(jù) return value; }
直接調(diào)用
var value=getData();
是對于這個函數(shù)直接調(diào)用的時候并不是你想要的返回值,因為async方法返回的永遠是一個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)文章
JavaScript解決浮點數(shù)計算不準確問題的方法分析
這篇文章主要介紹了JavaScript解決浮點數(shù)計算不準確問題的方法,結(jié)合實例形式分析了javascript浮點數(shù)運算精度誤差的原因以及相關(guān)的解決方法與具體操作技巧,需要的朋友可以參考下2018-07-07Angular組件拿不到@Input輸入屬性問題探究解決方法
最近在工作中實現(xiàn)一個feature的時候,碰到一個小問題:Angular組件拿不到@Input輸入屬性的問題,盡管對這些問題都比較了解,但是找問題是需要一個過程的,所以還是把這個問題總結(jié)記錄了下2023-01-01詳解js產(chǎn)生對象的3種基本方式(工廠模式,構(gòu)造函數(shù)模式,原型模式)
本篇文章主要介紹了js產(chǎn)生對象的3種基本方式(工廠模式,構(gòu)造函數(shù)模式,原型模式) ,具有一定的參考價值,有興趣的可以了解一下2017-01-01JavaScript利用split函數(shù)按規(guī)定截取字符串(獲取郵箱用戶名)
這個其實就是利用了js的split函數(shù),以@分割數(shù)組,一般用這個的地方不多,但這個思路應用的比較廣泛。推薦大家學習。2009-12-12