前面的话

  ES2017标准引入了 async 函数,使得异步操作变得更加方便。本文将详细介绍async函数

概述

  async 函数是 Generator 函数的语法糖

  使用Generator 函数,依次读取两个文件代码如下

var fs = require('fs');

var readFile = function (fileName) {
return new Promise(function (resolve, reject) {
fs.readFile(fileName, function(error, data) {
if (error) return 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函数,就是下面这样

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函数就是将 Generator 函数的星号(*)替换成async,将yield替换成await,仅此而已

  async函数对 Generator 函数的改进,体现在以下四点

  1、内置执行器

  Generator 函数的执行必须靠执行器,所以才有了co模块,而async函数自带执行器。也就是说,async函数的执行,与普通函数一模一样,只要一行

var result = asyncReadFile();

  上面的代码调用了asyncReadFile函数,然后它就会自动执行,输出最后结果。这完全不像 Generator 函数,需要调用next方法,或者用co模块,才能真正执行,得到最后结果

  2、更好的语义

  asyncawait,比起星号和yield,语义更清楚了。async表示函数里有异步操作,await表示紧跟在后面的表达式需要等待结果

  3、更广的适用性

  co模块约定,yield命令后面只能是 Thunk 函数或 Promise 对象,而async函数的await命令后面,可以是Promise 对象和原始类型的值(数值、字符串和布尔值,但这时等同于同步操作)

  4、返回值是 Promise

  async函数的返回值是 Promise 对象,这比 Generator 函数的返回值是 Iterator 对象方便多了。可以用then方法指定下一步的操作。

  进一步说,async函数完全可以看作多个异步操作,包装成的一个 Promise 对象,而await命令就是内部then命令的语法糖

基本用法

  async函数返回一个 Promise 对象,可以使用then方法添加回调函数。当函数执行的时候,一旦遇到await就会先返回,等到异步操作完成,再接着执行函数体内后面的语句

async function getStockPriceByName(name) {
var symbol = await getStockSymbol(name);
var stockPrice = await getStockPrice(symbol);
return stockPrice;
} getStockPriceByName('goog').then(function (result) {
console.log(result);
});

  上面代码是一个获取股票报价的函数,函数前面的async关键字,表明该函数内部有异步操作。调用该函数时,会立即返回一个Promise对象

  下面是另一个例子,指定多少毫秒后输出一个值

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

  上面代码指定50毫秒以后,输出hello world

  由于async函数返回的是Promise对象,可以作为await命令的参数。所以,上面例子也可写成下面形式

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', 50);

  async 函数有多种使用形式

// 函数声明
async function foo() {} // 函数表达式
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('jake').then(…); // 箭头函数
const foo = async () => {};

语法

【返回 Promise 对象】

  async函数返回一个 Promise 对象

  async函数内部return语句返回的值,会成为then方法回调函数的参数

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

  上面代码中,函数f内部return命令返回的值,会被then方法回调函数接收到

  async函数内部抛出错误,会导致返回的 Promise 对象变为reject状态。抛出的错误对象会被catch方法回调函数接收到

async function f() {
throw new Error('出错了');
} f().then(
v => console.log(v),
e => console.log(e)
)
// Error: 出错了

【Promise 对象的状态变化】

  async函数返回的 Promise 对象,必须等到内部所有await命令后面的 Promise 对象执行完,才会发生状态改变,除非遇到return语句或者抛出错误。也就是说,只有async函数内部的异步操作执行完,才会执行then方法指定的回调函数

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 2018 Language Specification"

  上面代码中,函数getTitle内部有三个操作:抓取网页、取出文本、匹配页面标题。只有这三个操作全部完成,才会执行then方法里面的console.log

await命令】

  正常情况下,await命令后面是一个 Promise 对象。如果不是,会被转成一个立即resolve的 Promise 对象

async function f() {
return await 123;
} f().then(v => console.log(v)) //

  上面代码中,await命令的参数是数值123,它被转成 Promise 对象,并立即resolve

  await命令后面的 Promise 对象如果变为reject状态,则reject的参数会被catch方法的回调函数接收到

async function f() {
await Promise.reject('出错了');
} f()
.then(v => console.log(v))
.catch(e => console.log(e))// 出错了

  上面代码中,await语句前面没有return,但是reject方法的参数依然传入了catch方法的回调函数。这里如果在await前面加上return,效果是一样的

  只要一个await语句后面的 Promise 变为reject,那么整个async函数都会中断执行

async function f() {
await Promise.reject('出错了');
await Promise.resolve('hello world'); // 不会执行
}

  上面代码中,第二个await语句是不会执行的,因为第一个await语句状态变成了reject

  有时,希望即使前一个异步操作失败,也不要中断后面的异步操作。这时可以将第一个await放在try...catch结构里面,这样不管这个异步操作是否成功,第二个await都会执行

async function f() {
try {
await Promise.reject('出错了');
} catch(e) {
}
return await Promise.resolve('hello world');
} f().then(v => console.log(v))// hello world

  另一种方法是await后面的 Promise 对象再跟一个catch方法,处理前面可能出现的错误

async function f() {
await Promise.reject('出错了')
.catch(e => console.log(e));
return await Promise.resolve('hello world');
} f()
.then(v => console.log(v))
// 出错了
// hello world

【错误处理】

  如果await后面的异步操作出错,那么等同于async函数返回的 Promise 对象被reject

async function f() {
await new Promise(function (resolve, reject) {
throw new Error('出错了');
});
} f()
.then(v => console.log(v))
.catch(e => console.log(e))
// Error:出错了

  上面代码中,async函数f执行后,await后面的 Promise 对象会抛出一个错误对象,导致catch方法的回调函数被调用,它的参数就是抛出的错误对象

  防止出错的方法,也是将其放在try...catch代码块之中

async function f() {
try {
await new Promise(function (resolve, reject) {
throw new Error('出错了');
});
} catch(e) {
}
return await('hello world');
}

  如果有多个await命令,可以统一放在try...catch结构中

async function main() {
try {
var val1 = await firstStep();
var val2 = await secondStep(val1);
var val3 = await thirdStep(val1, val2); console.log('Final: ', val3);
}
catch (err) {
console.error(err);
}
}

  下面的例子使用try...catch结构,实现多次重复尝试

const superagent = require('superagent');
const NUM_RETRIES = 3; async function test() {
let i;
for (i = 0; i < NUM_RETRIES; ++i) {
try {
await superagent.get('http://google.com/this-throws-an-error');
break;
} catch(err) {}
}
console.log(i); //
} test();

  上面代码中,如果await操作成功,就会使用break语句退出循环;如果失败,会被catch语句捕捉,然后进入下一轮循环

【注意事项】

  1、await命令后面的Promise对象,运行结果可能是rejected,所以最好把await命令放在try...catch代码块中

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

  2、多个await命令后面的异步操作,如果不存在继发关系,最好让它们同时触发

let foo = await getFoo();
let bar = await getBar();

  上面代码中,getFoogetBar是两个独立的异步操作(即互不依赖),被写成继发关系。这样比较耗时,因为只有getFoo完成以后,才会执行getBar,完全可以让它们同时触发

// 写法一
let [foo, bar] = await Promise.all([getFoo(), getBar()]); // 写法二
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;

  上面两种写法,getFoogetBar都是同时触发,这样就会缩短程序的执行时间

  3、await命令只能用在async函数之中,如果用在普通函数,就会报错

async function dbFuc(db) {
let docs = [{}, {}, {}]; // 报错
docs.forEach(function (doc) {
await db.post(doc);
});
}

  上面代码会报错,因为await用在普通函数之中了。但是,如果将forEach方法的参数改成async函数,也有问题

function dbFuc(db) { //这里不需要 async
let docs = [{}, {}, {}]; // 可能得到错误结果
docs.forEach(async function (doc) {
await db.post(doc);
});
}

  上面代码可能不会正常工作,原因是这时三个db.post操作将是并发执行,也就是同时执行,而不是继发执行。正确的写法是采用for循环

async function dbFuc(db) {
let docs = [{}, {}, {}]; for (let doc of docs) {
await db.post(doc);
}
}

  如果确实希望多个请求并发执行,可以使用Promise.all方法。当三个请求都会resolved时,下面两种写法效果相同

async function dbFuc(db) {
let docs = [{}, {}, {}];
let promises = docs.map((doc) => db.post(doc)); let results = await Promise.all(promises);
console.log(results);
} // 或者使用下面的写法 async function dbFuc(db) {
let docs = [{}, {}, {}];
let promises = docs.map((doc) => db.post(doc)); let results = [];
for (let promise of promises) {
results.push(await promise);
}
console.log(results);
}

实现原理

  async 函数的实现原理,就是将 Generator 函数和自动执行器,包装在一个函数里

async function fn(args) {
// ...
} // 等同于 function fn(args) {
return spawn(function* () {
// ...
});
}

  所有的async函数都可以写成上面的第二种形式,其中的spawn函数就是自动执行器。

  下面给出spawn函数的实现,基本就是前文自动执行器的翻版

function spawn(genF) {
return new Promise(function(resolve, reject) {
var gen = genF();
function step(nextF) {
try {
var next = nextF();
} catch(e) {
return reject(e);
}
if(next.done) {
return resolve(next.value);
}
Promise.resolve(next.value).then(function(v) {
step(function() { return gen.next(v); });
}, function(e) {
step(function() { return gen.throw(e); });
});
}
step(function() { return gen.next(undefined); });
});
}

异步比较

  通过一个例子,来看 async 函数与 Promise、Generator 函数的比较。

  假定某个 DOM 元素上面,部署了一系列的动画,前一个动画结束,才能开始后一个。如果当中有一个动画出错,就不再往下执行,返回上一个成功执行的动画的返回值

【Promise】

  首先是 Promise 的写法

function chainAnimationsPromise(elem, animations) {

  // 变量ret用来保存上一个动画的返回值
var ret = null; // 新建一个空的Promise
var p = Promise.resolve(); // 使用then方法,添加所有动画
for(var anim of animations) {
p = p.then(function(val) {
ret = val;
return anim(elem);
});
} // 返回一个部署了错误捕捉机制的Promise
return p.catch(function(e) {
/* 忽略错误,继续执行 */
}).then(function() {
return ret;
}); }

  虽然 Promise 的写法比回调函数的写法大大改进,但是一眼看上去,代码完全都是 Promise 的 API(thencatch等等),操作本身的语义反而不容易看出来

【Generator】

  接着是 Generator 函数的写法

function chainAnimationsGenerator(elem, animations) {

  return spawn(function*() {
var ret = null;
try {
for(var anim of animations) {
ret = yield anim(elem);
}
} catch(e) {
/* 忽略错误,继续执行 */
}
return ret;
}); }

  上面代码使用 Generator 函数遍历了每个动画,语义比 Promise 写法更清晰,用户定义的操作全部都出现在spawn函数的内部。这个写法的问题在于,必须有一个任务运行器,自动执行 Generator 函数,上面代码的spawn函数就是自动执行器,它返回一个 Promise 对象,而且必须保证yield语句后面的表达式,必须返回一个 Promise

【async】

  最后是 async 函数的写法

async function chainAnimationsAsync(elem, animations) {
var ret = null;
try {
for(var anim of animations) {
ret = await anim(elem);
}
} catch(e) {
/* 忽略错误,继续执行 */
}
return ret;
}

  可以看到Async函数的实现最简洁,最符合语义,几乎没有语义不相关的代码。它将Generator写法中的自动执行器,改在语言层面提供,不暴露给用户,因此代码量最少。如果使用Generator写法,自动执行器需要用户自己提供

实例

  实际开发中,经常遇到一组异步操作,需要按照顺序完成。比如,依次远程读取一组 URL,然后按照读取的顺序输出结果

【Promise】

  Promise 的写法如下

function logInOrder(urls) {
// 远程读取所有URL
const textPromises = urls.map(url => {
return fetch(url).then(response => response.text());
}); // 按次序输出
textPromises.reduce((chain, textPromise) => {
return chain.then(() => textPromise)
.then(text => console.log(text));
}, Promise.resolve());
}

  上面代码使用fetch方法,同时远程读取一组 URL。每个fetch操作都返回一个 Promise 对象,放入textPromises数组。然后,reduce方法依次处理每个 Promise 对象,然后使用then,将所有 Promise 对象连起来,因此就可以依次输出结果

【async】

  上面这种写法不太直观,可读性比较差。下面是 async 函数实现

async function logInOrder(urls) {
for (const url of urls) {
const response = await fetch(url);
console.log(await response.text());
}
}

  上面代码确实大大简化,问题是所有远程操作都是继发。只有前一个URL返回结果,才会去读取下一个URL,这样做效率很差,非常浪费时间。我们需要的是并发发出远程请求

async function logInOrder(urls) {
// 并发读取远程URL
const textPromises = urls.map(async url => {
const response = await fetch(url);
return response.text();
}); // 按次序输出
for (const textPromise of textPromises) {
console.log(await textPromise);
}
}

  上面代码中,虽然map方法的参数是async函数,但它是并发执行的,因为只有async函数内部是继发执行,外部不受影响。后面的for..of循环内部使用了await,因此实现了按顺序输出

ES2017中的async函数的更多相关文章

  1. ES6中的async函数

    一.概述 async 函数是 Generator 函数的语法糖 使用Generator 函数,依次读取两个文件代码如下 var fs = require('fs'); var readFile = f ...

  2. ES2017 中的 Async 和 Await

    ES2017 在 6 月最终敲定了,随之而来的是广泛的支持了我最喜欢的最喜欢的JavaScript功能: async(异步) 函数.如果你也曾为异步 Javascript 而头疼,那么这个就是为你设计 ...

  3. 浅谈ES6中的Async函数

    转载地址:https://www.cnblogs.com/sghy/p/7987640.html 定义:Async函数是一个异步操作函数,本质上,Async函数是Generator函数的语法糖.asy ...

  4. es2017中的async和await要点

    1. async和await最关键的用途是以同步的写法实现了异步调用,是对Generator异步方法的简化和改进.使用Generator实现异步的缺点如下: 得有一个任务执行器来自动调用next() ...

  5. 小程序中使用async函数 会报 regeneratorRuntime is not defined的问题

    async await比Promise更好的解决异步操作问题,但是在小程序中直接使用会出现以下的错误提示 是因为缺少了regeneratorRuntime这个模块,需要从外部引入 1.在新建的文件夹中 ...

  6. JavaScript中的Generator函数

    1. 简介 Generator函数时ES6提供的一种异步编程解决方案.Generator语法行为和普通函数完全不同,我们可以把Generator理解为一个包含了多个内部状态的状态机. 执行Genera ...

  7. 17.async 函数

    async 函数 async 函数 含义 ES2017 标准引入了 async 函数,使得异步操作变得更加方便. async 函数是什么?一句话,它就是 Generator 函数的语法糖. 前文有一个 ...

  8. ES6的新特性(18)——async 函数

    async 函数 含义 ES2017 标准引入了 async 函数,使得异步操作变得更加方便. async 函数是什么?一句话,它就是 Generator 函数的语法糖. 前文有一个 Generato ...

  9. 初识async函数

    为什么会出现async函数 首先从大的方面来说,出现async函数时为了解决JS编程中的异步操作,再往具体说就是为了对以往异步编程方法的一种改进,也有人说仅仅只是Generator 函数的语法糖,这个 ...

随机推荐

  1. EF编辑

    //修改推荐的信息 var productRe = db.Shop_ProductRecommends.Single(item => item.Id == model.Id); productR ...

  2. 根据list得到list中的最大值最小值

    List ll = new ArrayList(); ll.add(new BigDecimal(1)); ll.add(new BigDecimal(4.99)); ll.add(new BigDe ...

  3. .NET Core 2.0 Preview2 发布汇总

    前言 关于 ASP.NET Core 2.0 的新功能可以查看我的这篇博客. 这篇文章是 Priview2中的一些改进. .NET Core 2.0 - Preview2 Azure 的改进 Dock ...

  4. 避免循环做SQL操作

    经常犯的错误是把一个SQL 操作放置到一个循环中, 这就导致频繁的访问数据库,更重要的是, 这会直接导致脚本的性能低下.以下的例子, 你能够把一个循环操作重置为一个单一的SQL语句. foreach ...

  5. C/C++中的volatile究竟是什么鬼?

    将变量或对象声明为volatile类型后,每次对变量的访问都是从其内存直接读取.那什么时候对变量的访问不是从其内存读取的呢?一种常见的情况就是编译器开启了优化选项,这时候对变量的访问有可能就是从寄存器 ...

  6. USACO-palsquare 遇到的一个坑

    /** ID: njuwz151 TASK: palsquare LANG: C++ */ #include <iostream> #include <cstdio> #inc ...

  7. 遇到报ClassNotFoundException: Didn't find class "...Activity" on path: DexPathList

    有一个工程,本来运行是正常的,我想把它移植到另一台PC上,结果报: java.lang.RuntimeException: Unable to instantiate activity Compone ...

  8. GNU的makefile文件编写说明

    这篇文章讲的相当详细,转来收藏: linux下Makefile学习 MAC

  9. 关于MongoDB安全事件的一些思考

    刚刚过去的这个周末,各位大数据和数据库从业者想必是被MongoDB的"安全事件"给刷屏了,MongoDB作为当前NoSQL在全球的领军人物,遭到这么大规模的黑客攻击,这也再次让我们 ...

  10. javascript精度问题与调整

    一个经典的问题: 0.1+0.2==0.3 答案是:false 因为:0.1+0.2=0.30000000000000004 第一次看到这个结果就是无比惊讶,下巴碰到地上,得深入了解下问题出在哪里,该 ...