第一部分,ES7 中引入 async-await

原文地址 http://www.cnblogs.com/wangfupeng1988/p/6532734.html 未经作者允许,不得转载~

前面介绍完了Generator的异步处理,可以说是跌跌撞撞,经过各种基础介绍和封装,好容易出了一个比较简洁的异步处理方案,学习成本非常高————这显然不是我们想要的!

因此,还未发布的 ES7 就干脆自己参照Generator封装了一套异步处理方案————async-await。说是参照,其实可以理解为是Generator的语法糖!

本节示例代码参照这里

本节内容概述

  • Generatorasync-await的对比
  • 使用async-await的不同和好处
  • 接下来...

Generatorasync-await的对比

先来一段Generator处理异步的代码,前面已经介绍过了,看不明白的再获取接着看。

co(function* () {
const r1 = yield readFilePromise('some1.json')
console.log(r1) // 打印第 1 个文件内容
const r2 = yield readFilePromise('some2.json')
console.log(r2) // 打印第 2 个文件内容
})

再来一段async-await的执行代码如下,两者做一个比较。

const readFilePromise = Q.denodeify(fs.readFile)

// 定义 async 函数
const readFileAsync = async function () {
const f1 = await readFilePromise('data1.json')
const f2 = await readFilePromise('data2.json')
console.log('data1.json', f1.toString())
console.log('data2.json', f2.toString()) return 'done' // 先忽略,后面会讲到
}
// 执行
const result = readFileAsync()

从上面两端代码比较看来,async function代替了function*await代替了yield,其他的再没有什么区别了。哦,还有,使用async-await时候不用再引用co这种第三方库了,直接执行即可。

使用async-await的不同和好处

第一,await后面不能再跟thunk函数,而必须跟一个Promise对象(因此,Promise才是异步的终极解决方案和未来)。跟其他类型的数据也OK,但是会直接同步执行,而不是异步。

第二,执行const result = readFileAsync()返回的是个Promise对象,而且上面代码中的return 'done'会直接被下面的then函数接收到

result.then(data => {
console.log(data) // done
})

第三,从代码的易读性来将,async-await更加易读简介,也更加符合代码的语意。而且还不用引用第三方库,也无需学习Generator那一堆东西,使用成本非常低。

因此,如果 ES7 正式发布了之后,强烈推荐使用async-await。但是现在尚未正式发布,从稳定性考虑,还是Generator更好一些。

接下来...

node v7 版本已经开始原生支持async-await了,不过 node 的目前稳定版本还是v6,尚不支持,怎么办?———— 当然是万能的babel!下一节就介绍。

第二部分,如何在 nodejs v6.x版本中使用 async-await

本节介绍一下如何使用babel来让 node v6 版本也能运行async-await

本节内容概述

  • 安装必要的插件
  • 创建入口文件并执行

安装必要的插件

运行npm i babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-3 babel-runtime --save安装一堆需要的插件。

然后在项目根目录创建.babelrc文件,文件内容编写为

{
"presets": ["stage-3", "es2015"],
"plugins": ["transform-runtime"]
}

创建入口文件并执行

加入你编写async-await的代码文件是test.js,那么你需要创建另一个文件,例如test-entry.js作为入口文件。入口文件内容编写为

require("babel-core/register");
require("./test.js");

然后直接运行node test-entry.js就可以了

第三部分,整体总结

一周左右的业余时间总结完,写完,也是累得我够呛。不算什么体力活,但是天天的坐在书桌旁写这些东西也是很考验一个人的定力,没点耐性是肯定不行的 ———— 这算是获奖感言吗 

深入理解 JavaScript 异步系列(5)—— async await的更多相关文章

  1. 深入理解 JavaScript 异步系列(1)—— 什么是异步

    前言 2014年秋季写完了<深入理解javascript原型和闭包系列>,已经帮助过很多人走出了 js 原型.作用域.闭包的困惑,至今仍能经常受到好评的留言. 很早之前我就总结了JS三座大 ...

  2. 深入理解 JavaScript 异步系列(1)——基础

    前言 2014年秋季写完了<深入理解javascript原型和闭包系列>,已经帮助过很多人走出了 js 原型.作用域.闭包的困惑,至今仍能经常受到好评的留言. 很早之前我就总结了JS三座大 ...

  3. 深入理解 JavaScript 异步系列(3)—— ES6 中的 Promise

    第一部分,Promise 加入 ES6 标准 原文地址 http://www.cnblogs.com/wangfupeng1988/p/6515855.html 未经作者允许不得转载! 从 jquer ...

  4. 深入理解 JavaScript 异步系列(4)—— Generator

    第一部分,ES6 中的 Generator 原文地址 http://www.cnblogs.com/wangfupeng1988/p/6532713.html 未经作者允许不得转载~ 在 ES6 出现 ...

  5. 深入理解 JavaScript 异步系列(2)—— jquery的解决方案

    第一部分,jQuery-1.5 之后的 ajax 本地址http://www.cnblogs.com/wangfupeng1988/p/6515779.html未经允许不得转载~ $.ajax这个函数 ...

  6. 深入理解 JavaScript 异步——转载

    本文章转载于深入理解 JavaScript 异步 前言 2014年秋季写完了<深入理解javascript原型和闭包系列>,已经帮助过很多人走出了 js 原型.作用域.闭包的困惑,至今仍能 ...

  7. ASP.NET 异步编程之Async await

    本文重点介绍的是.NET Framework4.5 推出的异步编程方案  async await 请先看个5分钟的微软演示的视频:视频地址: https://channel9.msdn.com/Blo ...

  8. 异步Promise及Async/Await可能最完整入门攻略

    此文只介绍Async/Await与Promise基础知识与实际用到注意的问题,将通过很多代码实例进行说明,两个实例代码是setDelay和setDelaySecond. tips:本文系原创转自我的博 ...

  9. 深入理解javascript函数系列第一篇——函数概述

    × 目录 [1]定义 [2]返回值 [3]调用 前面的话 函数对任何一门语言来说都是一个核心的概念.通过函数可以封装任意多条语句,而且可以在任何地方.任何时候调用执行.在javascript里,函数即 ...

随机推荐

  1. 转载:JAVA的静态变量、静态方法、静态类

    静态变量和静态方法都属于静态对象,它与非静态对象的差别需要做个说明. (1)Java静态对象和非静态对象有什么区别? 比对如下: 静态对象                                ...

  2. spring3.0注解

    一.前言 在日常的开发过程中,我们基本上都是采用注解的方式进行开发,提升开发的效率.不管是struts2.spring.hibernate.或者ibatis,这样方便开发,减少配置文件的数量:有益于团 ...

  3. 设置searchBar上右边取消按钮的颜色

    [[UIBarButtonItem appearanceWhenContainedIn: [UISearchBar class], nil] setTintColor:RGBA(0, 161, 176 ...

  4. 怎么在html页面和js里判断是否是IE浏览器

    HTML里: HTML代码中,在编写网页代码时,各种浏览器的兼容性是个必须考虑的问题,有些时候无法找到适合所有浏览器的写法,就只能写根据浏览器种类区别的代码,这时就要用到判断代码了.在HTML代码中, ...

  5. java 它 引用(基本类型的包装,构造函数和析构函数c++不同)

      一个:java 和c++参考控制 他提到引用,我们会想到java它不喜欢c++里面的指针.当然java内引用和c++里面的引用是不同的. 比如: 比方C++中,我对某一个函数的声明.int a(i ...

  6. Java语法细节 - 内存和枚举

    目录 Java申请DirectBuffer ByteBuffer的position,limit,capacity,flip操作之间的关系 枚举实现单例模式 Java申请DirectBuffer /*- ...

  7. github学习心得

    1.在GitHub上建立项目登录GitHub后,你可以在右边靠中那里找到一个按钮“New Repository”,点击过后,填入项目名称.说明和网址过后就可以创建.2.配置Git以及上传代码安装Git ...

  8. sql server 小技巧(6) Cannot resolve the collation conflict between &quot;Latin1_General_CI_AI&quot; and &quot;Chinese_PRC_CI_AS&quot; in the equal to operation

    今天查询二个db,出现这个错误,二种方法,一种是把db里的collation改成一样的:如果不方便可以直接在sql语句后面转一下: select * from table where crm_mscr ...

  9. 对Array进行排序(按字母顺序)

    通过使用java.utils.Arrays.sort()和String.CASE_INSENSITIVE_OREDR,可以很容易的对结果进行排序(按字母顺序): String[] array = { ...

  10. [2016北京集训测试赛3]masodik-[凸包]

    Description Soluton 666这道题竟然用凸包... 维护r和c的下凸壳.哪个斜率大走哪个. 证明:我们先不考虑其他的,只考虑两条路,如下图: 设图的长度为x,宽度为y.如果我们要走上 ...