简谈对ES7的async和await的理解

如果遇到过深度回调的朋友一定对JS的回调地狱再熟悉不过了，举个例子说（如果我的列子不恰当尽请谅解），常见的就是省市区级联吧，假如我要获取一个县级市的信息，那么我首先得获得它所在的省的信息，当取得省的信息以后，再拉去地级市的信息，当获得地级市的信息以后，然后才有可能获取到它的信息。这就是典型的深度回调的业务场景。这使得开发人员变得痛苦不堪，代码的质量难以得到保证。

对此，ES6中引入了一个Promise对象来解决此类问题（本文只做大概的讲解），Promise，中文是诺言的意思，表示一段时间（pending）之后一定会获得的结果（resolved状态或者说是fullfilled状态），当然有可能获得的结果是错误的（rejected）。语法是：

function asyncReadFile() {return new Promise((resolve, reject) => {var counter = 0;var timer = setInterval(() => {counter++;console.log({counter})if (counter >= 3) {clearInterval(timer);resolve('hello world');}}, 1000)})}

然后我们通过asyncReadFile().then(result => { console.log(result) }) 打印出hello world！。

对于之前的省市县级联的业务，我们可以利用Promise改写成：

 getProvinces().then(result => {console.log('省级行政区域的信息为:' + result)return getCities()}).then(result => {console.log('地级行政区域的信息为:' + result)return getAreas()}).then(result => {console.log('县级行政区域的信息为:' + result)})

假设getProvince、getCities、getAreas都返回一个Promise对象，本来深度回调的代码，就变成了串行的代码。（请大家避免如下书写有关Promise的代码）

 getProvinces().then(result => {console.log('省级行政区域的信息为:' + result)getCities().then(result => {console.log('地级行政区域的信息为:' + result)getAreas().then(result => {console.log('县级行政区域的信息为:' + result)})})})

虽然Promise解决了深度回调的问题，但是却引入了大量无用的代码，你会写很多then，代码也变得很难看了。

于是，ES7中加入了async和await这对关键字。

await 命令只能用在async函数之中。async函数是基于Generator函数的实现，由于我们直接跳过了generator,这儿必须得提一个概念叫做协程，才便于大家对async函数的理解。就是函数在执行的时候，如果遇到一些条件，它会将执行条件交给另外的函数，等另外的函数执行完成之后，再将执行权力交回继续执行。（纯属个人理解，如果纰漏，尽情指出）。

画个图就是如下：

async function asyncGetFileInfo() { var fileInfo await getFileInfo(); return fileInfo; }

这段代码的意思正如上图所示。async函数返回的是一个Promise，我们这样来理解吧，里面既然是异步的东西，肯定有些东西要等一会儿才可以得到吧。而await（await紧跟一个Promise）直接是取得异步的结果，我们可以不用再调用then。

然后刚才那么多Promise组成的获得行政区域的信息的方法可以简化成如下代码：

async function getDistrictInfo() {var province = await getProvinces();var city = await getCities();var area = await getAreas();return `${province}省（市，自治区）${city}市(区)${area}县市区旗`}

getDistrictInfo().then(result => { console.log(result); });

由于ES7太新，浏览器支持的不太好（nodejs请放心使用），我们需要babel进行转码。

npm install --save-dev babel-preset-latest

简谈对ES7的async和await的理解相关推荐

ES7之async，await
ES7之async,await 一.基本用法 async,await函数是ES7中引入的语法.与Generator,Promise有很大的关系. async 使用async修饰的函数,会返回一个Pro ...
解决回调地狱终极方法 - ES7新增 - async 和 await
概念: ES7 新增的专门配合 promise封装函数一起执行的程序 async: - 关键字 - 异步的 await: - 关键字 - 等待作用: 让异步程序按照顺序一个一个的执行也是 ...
ES7之async、await
先久闻async.await,今日终于天时.地利.人和来一睹芳容. 先来看一列代码片段: async function test() {const response = await new Prom ...
对于js的async和await的理解分析
一.async和await async和await的概念 1)async 函数是 Generator 函数的语法糖,使用关键字 async 来表示,在函数内部使用 await 来表示异步 2)ES7 ...
java有async和await吗,理解 JavaScript 的 async/await
2020-06-04 更新 JavaScript 中的 async/await 是 AsyncFunction 特性中的关键字.目前为止,除了 IE 之外,常用浏览器和 Node (v7.6+) 都 ...
async And await异步编程活用基础
async And await异步编程活用基础原文:async And await异步编程活用基础好久没写博客了,时隔5个月,奉上一篇精心准备的文章,希望大家能有所收获,对async 和 awai ...
async和await理解代码
<1>:Async和Await的理解1 using System; using System.Collections.Generic; using System.Linq; using S ...
细谈回调地狱终极解决方案及ES7新语法async和await
1.回调地狱的一般解决方案正常情况下,我们都知道用promise去解决回调地狱.通过其调用then 和catch方法来实现回调函数多层嵌套问题.但是,我们可以实际来仔细看看用promise解决回调地 ...
让IE9及以上兼容es6，Promise, 及es7的async await
在完成下面A和B两步后,页面内嵌JS或者引入自己外部JS,script标签的type属性需要设置为text/babel <!DOCTYPE html> <html><he ...

简谈对ES7的async和await的理解

简谈对ES7的async和await的理解相关推荐

最新文章

热门文章