1、初識 async 函數(shù) ES6中提供了兩個很好的解決異步操作的方案 Promise 和 Generator，ES2017標(biāo)準(zhǔn)中引入的 async 函數(shù)就是建立在 Promise 和 Generator的基礎(chǔ)之上，它是 Generator函數(shù)的語法糖，使異步操作更加方便 先通過一個異步讀取文件的小栗子來對比下Promise、Generator 和 async 的異同點 const fs = require('fs')function readFile(fileName) {return new Promise((resolve, reject) => {fs.readFile(fileName, (err, data) => {if(err) {reject(err)}resolve(data.toString())})}) }

?

（1）、通過 Promise 讀取文件 readFile('data/a.txt').then(res => console.log(res)).catch(err => console.log(err))readFile('data/b.txt').then(res => console.log(res)).catch(err => console.log(err))readFile('data/c.txt').then(res => console.log(res)).catch(err => console.log(err))

?

（2）、通過 Generator 函數(shù)讀取文件 與 Promise 相比較，優(yōu)點：把所有的接口都封裝在一個函數(shù)里面了，缺點：代碼量稍微多一點點 function* gen() {yield readFile('data/a.txt')yield readFile('data/b.txt')yield readFile('data/c.txt') }let it = gen()it.next().value.then(res => {console.log(res) }).catch(err => {console.log(err) })it.next().value.then(res => {console.log(res) }).catch(err => {console.log(err) })it.next().value.then(res => {console.log(res) }).catch(err => {console.log(err) })

?

（3）、通過 async 函數(shù)讀取文件 充分吸取了 Promise 和 Generator的優(yōu)點，同時避免了它們的缺點 async function read() {let readA = await readFile('data/a.txt')let readB = await readFile('data/b.txt')let readC = await readFile('data/c.txt')console.log(readA)console.log(readB)console.log(readC) }read()

?

最終的輸出結(jié)果

?

通過上例可以看出，async 函數(shù)就是將 Generator函數(shù)的星號("*")替換成了 async，把 yield 替換成了 await async 函數(shù)對 Generator函數(shù)的改進(jìn)，主要體現(xiàn)在三個方面： （1）、內(nèi)置執(zhí)行器 async函數(shù)的執(zhí)行，與普通函數(shù)一模一樣，只需一行；而 Generator函數(shù)，需要調(diào)用next 方法 （2）、返回值是 Promise async函數(shù)的返回值是Promise，這比 Generator函數(shù)返回一個 Iterator對象方便多了 （3）、更好的語義化 從字面意思上來講，async是英文單詞 asynchronous 的縮寫，表示異步的；await中的 wait 是等待的意思。 因此相比 Generator函數(shù)中的星號和yield，語義更加清楚，async 表示這是一個異步操作的函數(shù)，await 表示緊跟在后面的表達(dá)式需要等待結(jié)果 2、async 函數(shù)的多種使用形式 // 函數(shù)聲明 async function foo() {// .... }// 函數(shù)表達(dá)式 let foo = async function() {// .... }// 箭頭函數(shù) let foo = async() => {}// 對象的方法 let obj = {name: 'Roger',async foo() {} } obj.foo().then(res => {// .... })// 類的方法 class Student{constructor(name, age) {this.name = namethis.age = age}async say() {return `My name is ${this.name}, I'm ${this.age} years old !`} }let jim = new Student('Jim Green', 13) jim.say().then(res => console.log(res)) // My name is Jim Green, I'm 13 years old !

?

3、基本用法 async 函數(shù)返回一個 Promise 實例對象，可以使用 then 方法添加回調(diào)函數(shù)。 當(dāng)函數(shù)執(zhí)行時，一旦遇到 await 就會先返回，等到異步操作完成，再接著執(zhí)行函數(shù)體內(nèi)后面的語句 // 休眠 ms 毫秒 function sleep(ms) {return new Promise(resolve => {setTimeout(resolve, ms)}) }async function print(ms) {console.log('start... ...')await sleep(ms)console.log('end... ...') }print(1000)

（1）、async 函數(shù)內(nèi)部 return語句返回的值，會成為then方法回調(diào)函數(shù)的參數(shù) async function foo() {return 'hello world' }foo().then(res => console.log(res)) // hello world

?

（2）、async 函數(shù)內(nèi)部拋出錯誤，會導(dǎo)致返回的 Promise對象變成reject狀態(tài)，拋出的錯誤會被catch方法回調(diào)函數(shù)接收到 async function bar() {return new Error('Error... ...') }bar().then(res => console.log(res)).catch(err => console.log(err)) // Error: Error... ...

?

（3）、只有 async 函數(shù)內(nèi)部的異步操作執(zhí)行完，才會執(zhí)行 then方法指定的回調(diào)函數(shù) async function baz() {await new Promise(resolve => {console.log('執(zhí)行第一個異步操作')setTimeout(resolve, 2000)})await new Promise(resolve => {console.log('執(zhí)行第二個異步操作')setTimeout(resolve, 3000)})return '異步執(zhí)行完畢再執(zhí)行then方法' }baz().then(res => {console.log(res)})

4、await 命令 await 用于等待一個 Promise對象，它只能在一個 async函數(shù)中使用 [return_value] = await expression表達(dá)式：一個 Promise對象或者任何要等待的值返回值：返回 Promise對象的處理結(jié)果。如果等待的不是 Promise對象，則返回該值本身

?

await命令會暫停當(dāng)前 async函數(shù)的執(zhí)行，等待 Promise處理完成。如果 Promise正常處理，其回調(diào)的 resolve函數(shù)參數(shù)會作為 await表達(dá)式的返回值，繼續(xù)執(zhí)行 async函數(shù)。如果 Promise處理異常，await表達(dá)式會把 Promise的異常原因拋出 // 如果 await 命令后的表達(dá)式的值不是一個 Promise，則返回該值本身 async function foo() {return await 123 }foo().then(res => console.log(res)) // 123// 如果 Promise 正常處理(fulfilled)，其回調(diào)的resolve函數(shù)參數(shù)作為 await 表達(dá)式的返回值 async function bar() {let f = await new Promise((resolve, reject) => {resolve('我是表達(dá)式的返回值')})console.log(f) // 我是表達(dá)式的返回值return 'ending' }bar().then(res => {console.log(res)}) // ending// 如果 Promise 處理異常(rejected)，await 表達(dá)式會把 Promise 的異常原因拋出 async function baz() {await new Promise((resolve, reject) => {reject(new Error('出錯啦......'))}) }baz().then(res => console.log(res)).catch(err => console.log(err)) // Error: 出錯啦......

?

（1）、任何一個 await語句后面的 Promise對象變?yōu)?reject狀態(tài)，那么整個 async函數(shù)都會中斷執(zhí)行 async function foo() {await Promise.reject('error')return 'ending' // 未執(zhí)行 }foo().then(res => console.log(res)) // Uncaught (in promise) error

?

（2）、如果希望當(dāng)前面的異步操作失敗時，不要中斷后面的異步操作，可以把前面的 await放在try...catch結(jié)構(gòu)里面 async function foo() {try{await Promise.reject('error')} catch(e) {}return await Promise.resolve('執(zhí)行完畢') }foo().then(res => console.log(res)) // 執(zhí)行完畢

?

還可以在 await后面的 Promise對象再跟一個 catch方法，處理前面可能出現(xiàn)的錯誤 async function foo() {await Promise.reject('error').catch(err => console.log(err))return '執(zhí)行完畢' }foo().then(res => console.log(res)) // 執(zhí)行完畢

?

（3）、如果想讓多個異步操作同時觸發(fā)，縮短程序的執(zhí)行時間，可以參考如下兩種寫法 // 寫法一 let [foo, bar] = await Promise.all([getFoo(), getBar()]);// 寫法二 let fooPromise = getFoo(); let barPromise = getBar(); let foo = await fooPromise; let bar = await barPromise;

?

轉(zhuǎn)載于:https://www.cnblogs.com/rogerwu/p/10784236.html

總結(jié)

以上是生活随笔為你收集整理的JS异步操作新体验之 async函数的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。