本篇內(nèi)容主要講解“JavaScript中的async函數(shù)怎么使用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“JavaScript中的async函數(shù)怎么使用”吧!
成都創(chuàng)新互聯(lián)公司自2013年創(chuàng)立以來，先為唐山等服務(wù)建站，唐山等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為唐山企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
async函數(shù)的返回值為 promise 對(duì)象，promise對(duì)象的結(jié)果由async函數(shù)執(zhí)行的返回值決定。async函數(shù)能使得異步操作變得更加方便，簡而言之就是 Generator 的語法糖。
定義async函數(shù)，特點(diǎn)是即便函數(shù)內(nèi)部返回結(jié)果不是promise對(duì)象，調(diào)用函數(shù)其最后的返回結(jié)果依然是promise對(duì)象，代碼如下：
如果返回的結(jié)果不是 Promise 對(duì)象的情況下：
如果返回的結(jié)果是 Promise 對(duì)象時(shí)，我們正常使用 then 方法即可，如下：
通過上文的對(duì) async 介紹，感覺其功能有點(diǎn)雞肋，其實(shí)恰恰不是，而是 async 需要搭配 await 一起使用才能達(dá)到語法糖的效果。
await的特點(diǎn)：
await必須寫在 async 函數(shù)中
await右側(cè)的表達(dá)式一般為 promise 對(duì)象
await返回的是 promise 成功的值
await的 promise 失敗了，就會(huì)拋出異常，需要通過 try...catch捕獲處理
說白了：await就相當(dāng)于 then 方法的第一個(gè)回調(diào)函數(shù)，只返回成功的值，失敗的值需要 try...catch來捕獲。
async函數(shù)內(nèi)部拋出錯(cuò)誤，會(huì)導(dǎo)致返回的 Promise 對(duì)象變?yōu)閞eject狀態(tài)。拋出的錯(cuò)誤對(duì)象會(huì)被catch方法回調(diào)函數(shù)接收到。
總結(jié)：
（1）await命令后面的Promise對(duì)象，運(yùn)行結(jié)果可能是rejected，所以最好把a(bǔ)wait命令放在try...catch代碼塊中。
（2）如果有多個(gè)await命令后面的異步操作，如果不存在繼發(fā)關(guān)系，最好讓它們同時(shí)觸發(fā)。
比如：await Promise.all([a(), b()])，這里簡單提一下
（3）await命令只能用在async函數(shù)之中，如果用在普通函數(shù)，就會(huì)報(bào)錯(cuò)。
（4）(理解一下async的運(yùn)行原理) async 函數(shù)可以保留運(yùn)行堆棧，普通函數(shù)內(nèi)部運(yùn)行一個(gè)異步任務(wù)時(shí)，如果異步任務(wù)運(yùn)行結(jié)束普通函數(shù)可能早就運(yùn)行完了，異步任務(wù)的上下文環(huán)境已經(jīng)消失了，如果異步任務(wù)報(bào)錯(cuò)，錯(cuò)誤堆棧將不包括普通函數(shù)；而async函數(shù)內(nèi)部的異步任務(wù)運(yùn)行時(shí)，async函數(shù)是暫停執(zhí)行的，所以一旦async函數(shù)內(nèi)部的異步任務(wù)運(yùn)行報(bào)錯(cuò)，錯(cuò)誤堆棧將包括async函數(shù)。
// 函數(shù)聲明
async function foo() {}
// 函數(shù)表達(dá)式
const foo = async function () {};
// 對(duì)象的方法
let obj = { async foo() {} };
obj.foo().then(...)
// Class 的方法
class Storage {
constructor() {
this.cachePromise = caches.open('avatars');
}
async getAvatar(name) {
const cache = await this.cachePromise;
return cache.match(`/avatars/${name}.jpg`);
}
}
const storage = new Storage();
storage.getAvatar('jake').then(…);
// 箭頭函數(shù)
const foo = async () => {};
和之前講解的 promise 讀取文件內(nèi)容 一樣，我們也可以使用async進(jìn)行文件的讀取，代碼如下：
// 1.引入 fs 模塊
const fs = require('fs')
// 2.讀取文件
function index(){
return new Promise((resolve,reject)=>{
fs.readFile('./index.md',(err,data)=>{
// 如果失敗
if(err) reject(err)
// 如果成功
resolve(data)
})
})
}
function index1(){
return new Promise((resolve,reject)=>{
fs.readFile('./index1.md',(err,data)=>{
// 如果失敗
if(err) reject(err)
// 如果成功
resolve(data)
})
})
}
function index2(){
return new Promise((resolve,reject)=>{
fs.readFile('./index2.md',(err,data)=>{
// 如果失敗
if(err) reject(err)
// 如果成功
resolve(data)
})
})
}
// 3.聲明一個(gè) async 函數(shù)
async function fn(){
let i = await index()
let i1 = await index1()
let i2 = await index2()
console.log(i.toString());
console.log(i1.toString());
console.log(i2.toString());
}
fn()
和之前講解 promise發(fā)送ajax請(qǐng)求 一樣，我們也可以使用async進(jìn)行發(fā)送ajax請(qǐng)求，代碼如下：
我們發(fā)現(xiàn) async與await之間的關(guān)系 和 Generator與yield之間的關(guān)系十分類似，不熟悉Generator的朋友可以看一下我之前的文章：生成器講解 ；一比較就發(fā)現(xiàn)： async函數(shù)就是將 Generator 函數(shù)的星號(hào)（*）替換成async，將yield替換成await。代碼比較如下：
async函數(shù)的實(shí)現(xiàn)原理就是將 Generator 函數(shù)和自動(dòng)執(zhí)行器包裝在一個(gè)函數(shù)里。
我們可以分析一下 Generator 和 async 代碼的書寫特點(diǎn)和風(fēng)格：
所以 async 函數(shù)的實(shí)現(xiàn)符合語義也很簡潔，不用寫Generator的自動(dòng)執(zhí)行器，改在語言底層提供，因此代碼量少。
從上文代碼我們可以總結(jié)以下幾點(diǎn)：
（1）Generator函數(shù)執(zhí)行需要借助執(zhí)行器，而async函數(shù)自帶執(zhí)行器，即async不需要像生成器一樣需要借助 next 方法才能執(zhí)行，而是會(huì)自動(dòng)執(zhí)行。
（2）相比于生成器函數(shù)，我們可以看到 async 函數(shù)的語義更加清晰
（3）上面就說了，async函數(shù)可以接受Promise或者其他原始類型，而生成器函數(shù)yield命令后面只能是Promise對(duì)象或者Thunk函數(shù)。
（4）async函數(shù)返回值只能是Promise對(duì)象，而生成器函數(shù)返回值是 Iterator 對(duì)象
到此，相信大家對(duì)“JavaScript中的async函數(shù)怎么使用”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
重慶分公司
重慶分公司
