詳細聊聊對async/await的理解和用法
async/await是什么
async/await 是ES7提出的基于Promise的解決異步的最終方案。
async
async是一個加在函數(shù)前的修飾符，被async定義的函數(shù)會默認返回一個Promise對象resolve的值。因此對async函數(shù)可以直接then，返回值就是then方法傳入的函數(shù)。
// async基礎語法
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ù)內?？梢岳斫鉃榈却?。
await 修飾的如果是Promise對象：可以獲取Promise中返回的內容（resolve或reject的參數(shù)），且取到值后語句才會往下執(zhí)行；
如果不是Promise對象：把這個非promise的東西當做await表達式的結果。
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獲取成功的結果
// 定義一個異步函數(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一些注意關鍵點小結
- await關鍵字必須位于async函數(shù)內部
- await關鍵字后面需要一個promise對象（不是的話就調用resolve轉換它）
- await關鍵字的返回結果就是其后面Promise執(zhí)行的結果，可能是resolved或者rejected的值，注意最后執(zhí)行完的是個值。
- 不能在普通箭頭函數(shù)中使用await關鍵字，需要在箭頭函數(shù)前面添加async
- await用來串行的執(zhí)行異步操作，現(xiàn)實現(xiàn)并行可以考慮promise.all
async與await缺點
async函數(shù)中，如果有多個await關鍵字時，如果有一個await的狀態(tài)變成了rejected，那么后面的操作都不會繼續(xù)執(zhí)行，promise也是同理有這樣一個函數(shù)async
function getData()
{
let value=await get();
value++;
await set();//set完成后返回數(shù)據(jù)
return value;
}
直接調用
var value=getData();
是對于這個函數(shù)直接調用的時候并不是你想要的返回值，因為async方法返回的永遠是一個promise，即使開發(fā)者返回的是一個常量，也會被自動調用的promise.resolve方法轉換為一個promise。因此對于這種情況，上層調用方法也需要是async函數(shù)，采用如下方法
async function xxxx(){
var value=await getData();
return value;
}
對于這種調用，如果還存在更高層次的方法調用，那么從底層的異步操作開始，一直到最頂層一個不需要返回值的函數(shù)為止，全部的方法都要變成async。
總結
到此這篇關于async/await理解和用法的文章就介紹到這了,更多相關async/await用法內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了用微信小程序實現(xiàn)計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
基于Day.js更優(yōu)雅的處理JavaScript中的日期
Day.js它能夠幫助我們處理JavaScript中的日期，本文就詳細的介紹一下Day.js的具體使用，可以更簡單的處理JavaScript中的日期和時間2021-09-09
這篇文章主要介紹了一個小時快速搭建微信小程序的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
為了提高網(wǎng)站的加載速度，有一個很重要的手段就是在用戶瀏覽過程中的上游網(wǎng)站做一個文件的預加載。2010-04-04
JavaScript 已經成為全棧開發(fā)技能的基石，在全棧開發(fā)面試中都會不可避免地涉及到與 JavaScript 有關的問題。這篇文章主要給大家介紹了關于JavaScript必看的10道面試題,需要的朋友可以參考下2021-05-05
這篇文章主要介紹了JavaScript中的依賴注入詳解,本文講解了requirejs/AMD方法、反射(reflection)方法等內容,需要的朋友可以參考下2015-03-03
微信小程序如何實現(xiàn)數(shù)據(jù)共享與方法共享詳解
這篇文章主要給大家介紹了關于微信小程序如何實現(xiàn)數(shù)據(jù)共享與方法共享的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2022-01-01
這篇文章主要介紹了javascript定時器完整實現(xiàn)方法,以實例形式分析了定時器的嵌套調用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
這篇文章主要為大家詳細介紹了Canvas實現(xiàn)微信紅包照片效果，用canvas及css3結合，實現(xiàn)紅包照片的效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-08-08
本文主要介紹了js獲取數(shù)組對象中的全部key和value值，主要使用JavaScript的?map()?函數(shù)和?values()?迭代器來實現(xiàn)取出數(shù)組對象的所有key值和value值，感興趣的可以了解下2024-01-01