1、什么是async函数

2、用法

  2.1基本用法

3、语法

  3.1返回promise对象

  3.2promise状态的变化

  3.3await命令

1、什么是async函数

async函数也是异步编程的解决方案。

async函数是对是对generator函数进行了改进。

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());
};

后边的gen函数,写成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函数的执行必须依靠执行器,而async函数自带执行器,也就是说,async函数的执行与普通函数一模一样,只要一行。

下面代码调用了asyncReadFile函数,然后就会自动执行,输出最后的结果。这个完全不像generator函数,需要调用next方法,才能得到最终的结果。

var result=asyncReadFile();

(2)更好的语义

async和await,比起星号(*)和yield,语义更清楚。async表示函数中有异步操作,await表示紧跟其后的表达式需要等待结果。

(3)更广的适用性

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

(4)返回值是promise

async函数的返回值是promise对象,执行generator函数返回一个遍历器对象(Iterator对象)方便多了,也就是说,async函数可以看做是多个异步操作,包装成一个promise对象,而await命令是内部then命令的语法糖。

2、用法

2.1基本用法

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

举一个栗子

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);

上面代码指定5秒后输出hello world。

async函数多种使用形式

//函数声明
async function foo() {} //函数表达式
const foo = async function () {} //对象的方法
let obj = { async foo() {} }
obj.foo().then(...) //箭头函数
const foo = async () => {}; //class方法
class Storage {
constructor() {
this.cachePromise = caches.open('avatars');
} async getAvatar(name) {
const cache = await this.cachePromise;
return cache.match(`/avatars/${name}.jpg`);
}
}

3、语法

async函数的语法规则总体上比较简单,难点是错误处理机制。

3.1返回的promise对象

async函数返回的是promise对象。

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

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

上面代码中,函数f内部return 命令返回值,会被then方法回调函数接收到。输出“hello world”。

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

3.2promise对象状态变化 

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)

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

3.3 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方法的回调函数,这里如果在wawait前面加上return,效果是一样的。

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

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

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

ECMAScript 6 学习(二)async函数的更多相关文章

  1. es6学习笔记-async函数

    1 前情摘要 前段时间时间进行项目开发,需求安排不是很合理,导致一直高强度的加班工作,这一个月不是常说的996,简直是936,还好熬过来了.在此期间不是刚学会了es6的promise,在项目有用到pr ...

  2. js-ES6学习笔记-async函数(3)

    1.await命令后面的Promise对象,运行结果可能是rejected,所以最好把await命令放在try...catch代码块中. 2.多个await命令后面的异步操作,如果不存在继发关系,最好 ...

  3. js-ES6学习笔记-async函数(2)

    1.async函数返回一个 Promise 对象. async函数内部return语句返回的值,会成为then方法回调函数的参数. async function f() { return 'hello ...

  4. ES6学习之Async函数

    定义:Async函数是一个异步操作函数,本质上,Async函数是Generator函数的语法糖.async函数就是将 Generator 函数的星号(*)替换成async,将yield替换成await ...

  5. js-ES6学习笔记-async函数

    1.async 函数是 Generator 函数的语法糖.前文有一个 Generator 函数,依次读取两个文件. var fs = require('fs'); var readFile = fun ...

  6. Python学习(二):函数入门

    1.函数代码格式: def 函数名(): 函数内容 执行函数:函数名() 2.代码举例: #!/usr/bin/env python #coding=utf-8 #定义函数 def Func1(): ...

  7. ES6学习笔记(十六)async函数

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

  8. async 函数学习笔记

    async函数就是Generator函数的语法糖. var fs = require('fs'); var readFile = function (fileName) { return new Pr ...

  9. 多线程编程学习笔记——async和await(二)

    接上文 多线程编程学习笔记——async和await(一) 三.   对连续的异步任务使用await操作符 本示例学习如何阅读有多个await方法方法时,程序的实际流程是怎么样的,理解await的异步 ...

随机推荐

  1. 流畅的python学习笔记:第一章

    这一章中作者简要的介绍了python数据模型,主要是python的一些特殊方法.比如__len__, __getitem__. 并用一个纸牌的程序来讲解了这些方法 首先介绍下Tuple和nametup ...

  2. XCOM2中敌对生物设计分析(Aliens篇)

    Aliens Aliens作为游戏设定中入侵的外星人,有各式外貌及奇特的战斗方式,掌握一些高能科技或利用精神力量进行攻击 Sectoid 使用灵能战斗的外星人,并无高级版本,初级便会使用精神控制,生命 ...

  3. java 二叉树实现

    //二叉树,有左子数,右子树,小的值放到左边,大的值放到右边,左边有树的话继续这个过程,(以下为代部分,赋值的时候采用了递归的方式) package liaobiao;class BiTree{ pr ...

  4. 国内APM企业的现状

    19世纪美国西部掘金热大起,大家听闻有人挖到了金子一夜暴富,于是蜂拥而上,但是很多人失望而归,最后居然是卖铲子的人赚到了钱. APM在互联网+时代表示应用性能管理,就是掘金万亿互联网市场的“铲子”,主 ...

  5. Chapter 7. Design and Performance

    本章将对MPEG4及H.264的实现细节进行讲解和比对. Motion Estimation 衡量运动估计的好坏有三种函数(第228页):MSE,MAE和SAE,其中由于SAE运算速度最快所以采用的最 ...

  6. 记一次redis挂机导致的服务雪崩事故~不对,是故事

    事故时常有,最近特别多!但每次事故总会有人出来背锅!如果不是自己的锅,解决了对自己是一种成长,如果是自己的锅,恐怕锅大了,就得走人了,哈哈哈... 这不,最近又出了一个锅:从周五开始,每天到11点就不 ...

  7. [Android FrameWork 6.0源码学习] Window窗口类分析

    了解这一章节,需要先了解LayoutInflater这个工具类,我以前分析过:http://www.cnblogs.com/kezhuang/p/6978783.html Window是Activit ...

  8. kotlin的一些特性介绍和与java C#的简单对比

    前言 这是我之前在知乎上的一些回答的汇总,感觉还是博客园写这些东西方便一点,也算是理下我的一些思路,现将文章整理后,发布在园子里. 为何是kotlin: 很多人对kt没有一个正确的定位,可能大家第一反 ...

  9. 不用EF框架,完成完美实体映射,且便于维护!(AutoMapper,petapoco)

    最近,需要搭建一个新项目,在需求分析时确定数据库中需要创建多个存储过程.所以如果还是用原来EF框架生成ADO.net实体模型的话,不利于修改. 主要是解决以下两个问题: 1.比如前端需要一个值,如果存 ...

  10. hibernate总结-持续更新

    简介 hibernate官网:Hibernate Hibernate 是一个开放源代码的对象关系映射框架,它对 JDBC 进行了非常轻量级的对象封装,使得 Java 程序员可以随心所欲的使用对象编程思 ...