一、前言

  实际上对async/await并不是很陌生,早在阮大大的ES6教程里面就接触到了,但是一直处于理解并不熟练使用的状态,于是决定重新学习并且总结一下,写了这篇博文。如果文中有错误的地方还请各位批评指正!

二、介绍async/await

  1.async/await 是异步代码的新方式

  2.async/await 基于 Promise 实现

  3.async/await使得异步代码更像同步代码

  4.await 只能用在 async 函数中,不能用在普通函数中 await 关键字后面必须跟 Promise 对象 函数执行到 await 后,Promise 函数执行完毕,但因为 Promise 内部一般都是异步函数,所以事件循环会一直 等待,直到事件轮询检查到 Promise 有了状态 resolve 或 reject 才重新执行这个函数后面的内容

三、特点

  async函数ES2017标准引入的语法,是Generator函数的语法糖,因此其相对于Generator函数,具有以下基本特点。

   内置执行器: 使用async函数可以像使用普通函数一样,直接调用即可执行。不用像Generator函数一样使用co模块来实现流程控制。

   语义化更强: async关键字表示是一个异步的函数,await表示需要等待执行。相对于yield表达式,语义化更强。

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

四、基本用法

  1.async函数的返回值 

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

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('resolve', v),
e => console.log('reject', e)
)
//reject Error: 出错了

  2.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 2017 Language Specification"

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

  3.await命令

    如果await命令后面是一个 Promise 对象,返回该对象的结果。如果不是 Promise 对象,就直接返回对应的值。

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

    如果await命令后面是一个thenable对象(即定义了then方法的对象),那么await会将其等同于 Promise 对象。

class Sleep {
constructor(timeout) {
this.timeout = timeout;
}
then(resolve, reject) {
const startTime = Date.now();
setTimeout(
() => resolve(Date.now() - startTime),
this.timeout
);
}
} (async () => {
const sleepTime = await new Sleep(1000);
console.log(sleepTime);
})();
// 1000

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

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

    任何一个await语句后面的 Promise 对象变为reject状态,那么整个async函数都会中断执行。

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

    为了避免一些不必要的麻烦,建议把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);
});
}

  4.总结

    (1)async函数内部的异步操作执行完,根据其执行的状态,对应执行then或catch

    (2)遇到await就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。

    (3)任何一个await语句后面的 Promise 对象变为reject状态,那么整个async函数都会中断执行。

五、实现原理

  async 函数的实现原理,就是将 Generator 函数和自动执行器,包装在一个函数里。【Generator可以理解为一个状态机,内部封装了很多状态,同时返回一个迭代器Iterator对象。可以通过这个迭代器遍历相关的值及状态。 Generator的显著特点是可以多次返回,每次的返回值作为迭代器的一部分保存下来,可以被我们显式调用。】

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

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

function spawn(genF) {
return new Promise(function(resolve, reject) {
const gen = genF();
function step(nextF) {
let next;
try {
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); });
});
}

六、注意事项

  1.await只能使用在async函数内部,在普通函数中使用会报错

  2.任何一个await语句后面的 Promise 对象变为reject状态,那么整个async函数都会中断执行。最好将其放入try—catch中

  3.在某些场景下并不适合使用await,会增加页面交互时间,要合理利用

参考文档:https://es6.ruanyifeng.com/#docs/async

     http://www.vsoui.com/2018/06/07/async-await-function/

     https://blog.csdn.net/juhaotian/article/details/78934097

异步编程新方式async/await的更多相关文章

  1. 走进异步编程的世界--async/await项目使用实战

    起因:今天要做一个定时器任务:五分钟查询一次数据库发现超时未支付的订单数据将其状态改为已经关闭(数据量大约100条的情况) 开始未使用异步: public void SelfCloseGpPayOrd ...

  2. 使用ES6新特性async await进行异步处理

    我们往往在项目中会遇到这样的业务需求,就是首先先进行一个ajax请求,然后再进行下一个ajax请求,而下一个请求需要使用上一个请求得到的数据,请求少了还好说,如果多了,就要一层一层的嵌套,就好像有点c ...

  3. ES7前端异步玩法:async/await理解 js原生API妙用(一)

    ES7前端异步玩法:async/await理解   在最新的ES7(ES2017)中提出的前端异步特性:async.await. 什么是async.await? async顾名思义是“异步”的意思,a ...

  4. C#基础系列——异步编程初探:async和await

    前言:前面有篇从应用层面上面介绍了下多线程的几种用法,有博友就说到了async, await等新语法.确实,没有异步的多线程是单调的.乏味的,async和await是出现在C#5.0之后,它的出现给了 ...

  5. 【转】剖析异步编程语法糖: async和await

    一.难以被接受的async 自从C#5.0,语法糖大家庭又加入了两位新成员: async和await. 然而从我知道这两个家伙之后的很长一段时间,我甚至都没搞明白应该怎么使用它们,这种全新的异步编程模 ...

  6. [C#]剖析异步编程语法糖: async和await

    一.难以被接受的async 自从C#5.0,语法糖大家庭又加入了两位新成员: async和await. 然而从我知道这两个家伙之后的很长一段时间,我甚至都没搞明白应该怎么使用它们,这种全新的异步编程模 ...

  7. 【异步编程】Part1:await&async语法糖让异步编程如鱼得水

    前导 Asynchronous programming Model(APM)异步编程模型以BeginMethod(...) 和 EndMethod(...)结对出现. IAsyncResult Beg ...

  8. ES7前端异步玩法:async/await理解

    在最新的ES7(ES2017)中提出的前端异步特性:async.await. 什么是async.await? async顾名思义是"异步"的意思,async用于声明一个函数是异步的 ...

  9. C#异步中的Task,async,await

    class Program { static void Main(string[] args) { Console.WriteLine("我是主线程,线程ID:{0}", Thre ...

随机推荐

  1. SpringBoot favicon.ico网站图标

    1.在application.properties下添加spring.mvc.favicon.enabled=false 默认true开启 2.关闭后,需要在src/main/resources/st ...

  2. AMQP 概论

    AMQP 是应用层协议的一个开放标准,为面向消息的中间件设计.基于此协议的客户端与消息中间件可传递消息,并不受客户端/中间件不同产品,不同的开发语言等条件的限制.目标是实现一种在全行业广泛使用的标准消 ...

  3. Kubernetes-16:一文详解ServiceAccount及RBAC权限控制

    一.ServiceAccount 1.ServiceAccount 介绍 首先Kubernetes中账户区分为:User Accounts(用户账户) 和 Service Accounts(服务账户) ...

  4. Tooltip鼠标hover放上时文字提示

    使用content属性来决定hover时的提示信息. 由placement属性决定展示效果: placement属性值为:                 方向-对齐位置: 四个方向:top.left ...

  5. JAVA热部署,通过agent进行代码增量热替换!!!

    在前说明:好久没有更新博客了,这一年在公司做了好多事情,包括代码分析和热部署替换等黑科技,一直没有时间来进行落地写出一些一文章来,甚是可惜,趁着中午睡觉的时间补一篇介绍性的文章吧. 首先热部署的场景是 ...

  6. python3 while循环

    python不支持n++这样格式,因为python中变量不像c那样事先定义好变量类型,在内存中开辟指定的空间,然后赋值. python中以字符串为例,事先在内存划分空间来存放字符串,然后用变量名来指向 ...

  7. Django设置前端背景图片

    设置 setting.py 文件 STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, "static&qu ...

  8. 数据库:浅谈DML、DDL、DCL的区别

    简介 SQL是一个标准的数据库语言,是面向集合的描述性非过程化语言.它功能强,效率高,简单易学易维护(迄今为止,我还没见过比它还好学的语言).然而SQL语言由于以上优点,同时也出现了这样一个问题:它是 ...

  9. Git+Gitlab+Ansible的roles实现一键部署Nginx静态网站(4)

    前言 截止目前已经写了<Ansible基础认识及安装使用详解(一)–技术流ken>,<Ansible常用模块介绍及使用(二)–技术流ken><Ansible剧本介绍及使用 ...

  10. yml文件

    博文内容来自https://blog.csdn.net/chang_li/article/details/78667652 项目里用到yml文件作为配置文件,了解下其实挺简单,它的基本语法如下 大小写 ...