快捷導(dǎo)航

es6學(xué)習(xí)筆記之Async函數(shù)基本教程

更新時(shí)間：2017年05月11日 09:02:47 作者：hzzly

這篇文章主要給大家介紹了關(guān)于es6中Async函數(shù)的基本教程，文中介紹的非常詳細(xì)，對大家學(xué)習(xí)async函數(shù)具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧。

本文介紹的是關(guān)于es6中Async函數(shù)的相關(guān)內(nèi)容，非常出來供大家參考學(xué)習(xí)，需要的朋友們下面來看看詳細(xì)的介紹：

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ù)，然后它就會(huì)自動(dòng)執(zhí)行，輸出最后結(jié)果。這完全不像 Generator 函數(shù)，需要調(diào)用next方法，或者用co模塊，才能真正執(zhí)行，得到最后結(jié)果。

2）更好的語義

async和await，比起星號(hào)和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就會(huì)先返回，等到異步操作完成，再接著執(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語句返回的值，會(huì)成為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í)行完，才會(huì)發(fā)生狀態(tài)改變，除非遇到return語句或者拋出錯(cuò)誤。也就是說，只有async函數(shù)內(nèi)部的異步操作執(zhí)行完，才會(huì)執(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è)操作全部完成，才會(huì)執(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完成以后，才會(huì)執(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ù)，就會(huì)報(bào)錯(cuò)。

更多關(guān)于async函數(shù)的使用例子可以點(diǎn)擊查看這篇文章：http://www.dbjr.com.cn/article/113475.htm

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章: