Javascript中的async函數(shù)詳解

更新時間：2022年03月03日 15:03:36 作者：前端e站

這篇文章主要為大家詳細(xì)介紹了Javascript中的async函數(shù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

前言：async 是“異步”的簡寫，async 用于申明一個 function 是異步的，而 await 用于等待一個異步方法執(zhí)行完成，await 只能出現(xiàn)在 async 函數(shù)中。

Generator 函數(shù)：

var fs = require('fs');
var readFile = function (fileName){
 return new Promise(function (resolve, reject){
 fs.readFile(fileName, function(error, data){
 if (error) reject(error);
 resolve(data);
 });
 });
};

var gen = function* (){
  var f1 = yield readFile('/etc/fstab');
  var f2 = yield readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
}

async 函數(shù)

var asyncReadFile = async function (){
  var f1 = await readFile('/etc/fstab');
  var f2 = await readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};

顯而易見，async函數(shù)中async就是將 Generator 函數(shù)的星號（*）替換成 async，await等價于yield。

async 函數(shù)是非常新的語法功能，屬于 ES7。目前，它仍處于提案階段，但是轉(zhuǎn)碼器 Babel 和 regenerator 都已經(jīng)支持，轉(zhuǎn)碼后就能使用。

但async 函數(shù)對 Generator 函數(shù)做了改進：

1、內(nèi)置執(zhí)行器：Generator函數(shù)的執(zhí)行必須靠執(zhí)行器，所以才有了 co 函數(shù)庫，而 async 函數(shù)自帶執(zhí)行器.也就是說，async 函數(shù)的執(zhí)行，與普通函數(shù)一模一樣。

var result = asyncReadFile();

2、更好的語義：async 和 await，比起星號和 yield，語義更清楚了。async 表示函數(shù)里有異步操作，await 表示緊跟在后面的表達(dá)式需要等待結(jié)果。

3、更廣的適用性：co 函數(shù)庫約定，yield 命令后面只能是 Thunk 函數(shù)或 Promise 對象，而 async 函數(shù)的 await 命令后面，可以跟 Promise 對象和原始類型的值（數(shù)值、字符串和布爾值，但這時等同于同步操作）。

async 的作用

async 函數(shù)負(fù)責(zé)返回一個 Promise 對象，如果在async函數(shù)中 return 一個直接量，async 會把這個直接量通過Promise.resolve() 封裝成 Promise 對象;如果 async 函數(shù)沒有返回值,它會返回 Promise.resolve(undefined)。

await 在等待什么

如果await等到的不是一個promise對象，那跟著的表達(dá)式的運算結(jié)果就是它等到的東西；

如果是一個promise對象，await會阻塞后面的代碼，等promise對象resolve，得到resolve的值作為await表達(dá)式的運算結(jié)果。

雖然await阻塞了，但await在async中，async不會阻塞，它內(nèi)部所有的阻塞都被封裝在一個promise對象中異步執(zhí)行。