JS | ES中的异步方法 async /await 详解

ES8提出的async 和 await 关键字两种语法结合可以让异步代码像同步代码一样,可以解决promise对象不断使用then方法的代码不简洁问题。

async、await 语法是ES8(ECMAScript 2017)里面的新语法,在2016年被提出,它的作用就是 async 用于申明一个 function 是异步的,而 await 用于等待一个异步方法执行完成。它可以很好的替代promise 中的then。async 函数返回一个 Promise 对象,可以使用then 方法添加回调函数。当函数执行的时候,一旦遇到await 就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。 

在async/await之前,我们有如下三种方式写异步代码:

一、嵌套回调

二、以Promise为主的链式回调

三、使用Generators

但是,这三种写起来都不够优雅,ES8做了优化改进,async/await应运而生,async/await相比较Promise 对象then函数的嵌套,与 Generator 执行的繁琐(需要借助第三方库co才能自动执行,否则得手动调用next() ), Async/Await 可以让你轻松写出同步风格的代码同时又拥有异步机制,更加简洁,逻辑更加清晰。

async 和 await 是 ES2017 新增两个关键字,它们借鉴了 ES2015 中生成器在实际开发中的应用,目的是简化 Promise api 的使用,并非是替代 Promise。

async/await的特点

1. async/await更加语义化,async 是“异步”的简写,async function 用于声明一个 function 是异步的; await,可以认为是async wait的简写, 用于等待一个异步方法执行完成;

2. async/await是一个用同步思维解决异步问题的方案(等结果出来之后,代码才会继续往下执行)

3. 可以通过多层 async function 的同步写法代替传统的callback嵌套

async/awiat的使用规则

1. async 返回的是一个 Promise 成功的对象,await 就是等待这个 promise 的返回结果后,再继续执行。

2. await 等待的是一个 Promise 对象,后面必须跟一个 Promise 对象,但是不必写 then (),直接就可以得到返回值。

但注意,await 所等待的 promise 对象,他的最终状态一定是 resolve 的(当然也可以不是 resolve ,只不过不会执行后面的代码罢了),否则不会执行await 后面的代码,也就是不会去执行所谓的 then() ;  

 async function 语法  

目的是简化在函数的返回值中对Promise的创建。async 用于修饰函数(无论是函数字面量还是函数表达式),放置在函数最开始的位置,被修饰函数的返回结果一定是 Promise 对象。

1、自动将常规函数转换成Promise,返回值也是一个Promise对象

2、只有async函数内部的异步操作执行完,才会执行then方法指定的回调函数

3、异步函数内部可以使用await

async function name([param[, param[, ... param]]]) { statements }

name: 函数名称。

param:  要传递给函数的参数的名称

statements: 函数体语句。

返回值:返回的Promise对象会以async function的返回值进行解析,或者以该函数抛出的异常进行回绝。

async function add1(x) {
  // async声明add1是一个异步函数
  let a = 1;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

儒雅的烤地瓜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值