這篇文章將為大家詳細(xì)講解有關(guān)es6中Async函數(shù)有什么用，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)公司是一家專業(yè)的成都網(wǎng)站建設(shè)公司，我們專注網(wǎng)站建設(shè)、做網(wǎng)站、網(wǎng)絡(luò)營銷、企業(yè)網(wǎng)站建設(shè)，友情鏈接，廣告投放平臺為企業(yè)客戶提供一站式建站解決方案，能帶給客戶新的互聯(lián)網(wǎng)理念。從網(wǎng)站結(jié)構(gòu)的規(guī)劃UI設(shè)計(jì)到用戶體驗(yàn)提高，創(chuàng)新互聯(lián)力求做到盡善盡美。

async 函數(shù)

async 函數(shù)，使得異步操作變得更加方便。它是 Generator 函數(shù)的語法糖。

Generator 函數(shù)，依次讀取兩個(gè)文件:

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ù)對 Generator 函數(shù)的改進(jìn)，體現(xiàn)在以下四點(diǎn):

1）內(nèi)置執(zhí)行器

Generator 函數(shù)的執(zhí)行必須靠執(zhí)行器，所以才有了co模塊，而async函數(shù)自帶執(zhí)行器。也就是說，async函數(shù)的執(zhí)行，與普通函數(shù)一模一樣，只要一行。

var result = asyncReadFile();

上面的代碼調(diào)用了asyncReadFile函數(shù)，然后它就會自動(dòng)執(zhí)行，輸出最后結(jié)果。這完全不像 Generator 函數(shù)，需要調(diào)用next方法，或者用co模塊，才能真正執(zhí)行，得到最后結(jié)果。

2）更好的語義

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

3）更廣的適用性

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

4）返回值是 Promise

async函數(shù)的返回值是 Promise 對象，這比 Generator 函數(shù)的返回值是 Iterator 對象方便多了。你可以用then方法指定下一步的操作。

進(jìn)一步說，async函數(shù)完全可以看作多個(gè)異步操作，包裝成的一個(gè) Promise 對象，而await命令就是內(nèi)部then命令的語法糖。

一、基本用法

async函數(shù)返回一個(gè) Promise 對象，可以使用then方法添加回調(diào)函數(shù)。當(dāng)函數(shù)執(zhí)行的時(shí)候，一旦遇到await就會先返回，等到異步操作完成，再接著執(zhí)行函數(shù)體內(nèi)后面的語句。

function timeout(ms) {
 return new Promise((resolve) => {
 setTimeout(resolve, ms);
 });
}
async function asyncPrint(value, ms) {
 await timeout(ms);
 console.log(value);
}
asyncPrint('hello world', 5000);

上面代碼指定5000毫秒以后，輸出hello world。

由于async函數(shù)返回的是 Promise 對象，可以作為await命令的參數(shù)。所以，上面的例子也可以寫成下面的形式:

async function timeout(ms) {
 await new Promise((resolve) => {
 setTimeout(resolve, ms);
 });
}
async function asyncPrint(value, ms) {
 await timeout(ms);
 console.log(value);
}
asyncPrint('hello world', 5000);

async 函數(shù)多種使用形式

// 函數(shù)聲明
async function foo() {}
// 函數(shù)表達(dá)式
const foo = async function () {};
// 對象的方法
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('hzzly').then(…);
// 箭頭函數(shù)
const foo = async () => {};

二、語法

async函數(shù)的語法規(guī)則總體上比較簡單，難點(diǎn)是錯(cuò)誤處理機(jī)制。

返回 Promise 對象

async函數(shù)返回一個(gè) Promise 對象。async函數(shù)內(nèi)部return語句返回的值，會成為then方法回調(diào)函數(shù)的參數(shù)。

async function f() {
 return 'hello world';
}
f().then(v => console.log(v))
// "hello world"

Promise 對象的狀態(tài)變化

async函數(shù)返回的 Promise 對象，必須等到內(nèi)部所有await命令后面的 Promise 對象執(zhí)行完，才會發(fā)生狀態(tài)改變，除非遇到return語句或者拋出錯(cuò)誤。也就是說，只有async函數(shù)內(nèi)部的異步操作執(zhí)行完，才會執(zhí)行then方法指定的回調(diào)函數(shù)。

async function getTitle(url) {
 let response = await fetch(url);
 let html = await response.text();
 return html.match(/<title>([\s\S]+)<\/title>/i)[1];
}
getTitle('https://tc39.github.io/ecma262/').then(console.log)
// "ECMAScript 2017 Language Specification"

上面代碼中，函數(shù)getTitle內(nèi)部有三個(gè)操作：抓取網(wǎng)頁、取出文本、匹配頁面標(biāo)題。只有這三個(gè)操作全部完成，才會執(zhí)行then方法里面的console.log。

三、使用注意點(diǎn)

await命令后面的Promise對象，運(yùn)行結(jié)果可能是rejected，所以最好把a(bǔ)wait命令放在try…catch代碼塊中。

async function myFunction() {
 try {
 await somethingThatReturnsAPromise();
 } catch (err) {
 console.log(err);
 }
}
// 另一種寫法
async function myFunction() {
 await somethingThatReturnsAPromise()
 .catch(function (err) {
 console.log(err);
 };
}

多個(gè)await命令后面的異步操作，如果不存在繼發(fā)關(guān)系，最好讓它們同時(shí)觸發(fā)。

//異步操作（即互不依賴），被寫成繼發(fā)關(guān)系。這樣比較耗時(shí)，因?yàn)橹挥術(shù)etFoo完成以后，才會執(zhí)行g(shù)etBar，完全可以讓它們同時(shí)觸發(fā)。
let foo = await getFoo();
let bar = await getBar();
// 寫法一
let [foo, bar] = await Promise.all([getFoo(), getBar()]);
// 寫法二
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;

await命令只能用在async函數(shù)之中，如果用在普通函數(shù)，就會報(bào)錯(cuò)。

關(guān)于“es6中Async函數(shù)有什么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。

網(wǎng)頁標(biāo)題：es6中Async函數(shù)有什么用
文章位置：http://jinyejixie.com/article40/gggjeo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、軟件開發(fā)、搜索引擎優(yōu)化、網(wǎng)站收錄、外貿(mào)建站、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)