上一篇《让 Generator 自启动》介绍了通过起动器让 Generator 跑起来,而本篇采用 async 实现更优雅的异步编程。

从例子开始

借用上一篇例子中的例子说起。

function* gen() {
  var r1 = yield $.get('url1');
  var r2 = yield $.get('url2');
  var r3 = yield $.get('url3');

  console.log(r1, r2, r3);
}

然后,我们需要写一个启动器来启动这个函数。
而采用 async 写,代码则是:

async function gen() {
  var r1 = await $.get('url1');
  var r2 = await $.get('url2');
  var r3 = await $.get('url3');

  console.log([r1, r2, r3].join('\n'));
}

gen(); // 直接运行即可

直接运行了,无须写生成器来运行了,而代码仅仅是 * 改为 async, yield 改为 await 而已。
所以本质上讲:async 就是 Generator 的语法糖

多任务处理

多任务处理有个坑,就是不能直接在 forEach, map 之类的方法里处理,否则会报错或者得到错误的结果。

function sleep(t) {
  return new Promise(resolve => setTimeout( _ => { resolve(+new Date) }, t))
}

async function run() {
  // 顺序
  let a = await sleep(100)
  let b = await sleep(200)

  // 并发1
  let c = await Promise.all([sleep(100), sleep(200), sleep(300)])

  // 并发2
  let d = await Promise.all([100, 200, 300].map(t => sleep(t)))

  // 并发3
  let list = [sleep(100), sleep(200), sleep(300)]
  let e = []
  for (let fn of list) {
    e.push(await fn)
  }

  console.log(
    '',
    'a:', a, '\n',
    'b:', b, '\n',
    'c:', c, '\n',
    'd:', d, '\n',
    'e:', e, '\n'
  )
}

run()

// a: 1468317737179 
// b: 1468317737384 
// c: [ 1468317737485, 1468317737589, 1468317737688 ] 
// d: [ 1468317737792, 1468317737890, 1468317737989 ] 
// e: [ 1468317738094, 1468317738193, 1468317738293 ] 

小结

async 没多大的变动,归根结底就是个语法糖,帮助我们运行生成器,而不需要我们自己写起动器了。
不过效果确实非常好,让异步编程更加的同步了。

文章同步自个人博客:http://www.52cik.com/2016/07/11/generator-co.html

posted @ 2016-07-12 18:39 楼教主 阅读(1263) 评论(0) 推荐(2) 编辑
摘要: 文章同步自个人博客:http://www.52cik.com/2016/07/11/generator co.html 此前只是简单使用而没有真正的去研究 Generator,这次要好好折腾下这货。 <! more 异步编程 对于 jser 来说,异步非常熟悉了吧,但是真正理解异步的却不多,因为大部 阅读全文
posted @ 2016-07-11 07:08 楼教主 阅读(743) 评论(0) 推荐(0) 编辑
摘要: 文章同步自个人博客:http://www.52cik.com/2016/07/10/consecutive dates.html 这是群里一朋友问的问题,当时我说判断下 day 是否相邻即可,后来细想,发现完全不对。 <! more 问题需求 给定5个相同格式的日期,怎么判断是否是连续5天呢? 我当 阅读全文
posted @ 2016-07-10 20:09 楼教主 阅读(3241) 评论(2) 推荐(0) 编辑
摘要: 终于达成 gayhub 的第一个100连击了,感觉自己整个人颜色都不一样了,完全蜕变了。 <! more ![GitHub 100 连击][github streak 100] PS: GitHub 汉化插件 [52cik/github hans][52cik/github hans] 感兴趣的赶紧 阅读全文
posted @ 2016-05-06 08:35 楼教主 阅读(5695) 评论(28) 推荐(23) 编辑
摘要: 这个算是 Chrome only 其他的我没测试,也不想测试。因为我的控制台脚本仅仅在 Chrome 下加载。 如果你需要全平台,那么这肯定不是你需要的结果。 <! more 需求 其实我很早就想折腾这个了,但是,,因为懒,拖了很久,直到周末,我看到服务器上统计,发现流量翻了一倍,结果访问量还是一样 阅读全文
posted @ 2016-04-27 18:11 楼教主 阅读(3967) 评论(1) 推荐(4) 编辑
摘要: 本文同步至我的个人博客:http://www.52cik.com/2015/12/23/php json format.html 关于 json 这个问题,陆陆续续有新手朋友找我问,比如为什么我输出的是 而不是 。 <! more php数组 与 js数组 我这里用 php 5.4 以上语法表示。 阅读全文
posted @ 2015-12-23 21:33 楼教主 阅读(3064) 评论(2) 推荐(2) 编辑
摘要: 本文同步自我的个人博客:http://www.52cik.com/2015/12/14/learn node modules module.html 上一篇讲了模块是如何被寻找到然后加载进来的,这篇则是如何导出属性方法以及自定义模块后缀等一系列模块问题。 <! more exports 对象 这是最 阅读全文
posted @ 2015-12-14 23:44 楼教主 阅读(2456) 评论(0) 推荐(0) 编辑
摘要: 本文同步自我的个人博客:http://www.52cik.com/2015/12/11/learn node modules path.html 用了这么久的 require,但却没有系统的学习过 node 的模块系统,今天就翻官方文档系统的学习下。 <! more 循环引用 node 对模块循环引 阅读全文
posted @ 2015-12-11 20:43 楼教主 阅读(6301) 评论(0) 推荐(0) 编辑
摘要: 本文同步自我的个人博客:http://www.52cik.com/2015/12/05/semver.html 之前就觉得为什么 github 上的大部分东西都是 1.0.1、1.11.1 甚至 0.11.1 这种奇葩的版本。为什么 jQuery 1.9.9 之后不是 2.0.0 而是 1.10.0 阅读全文
posted @ 2015-12-05 12:15 楼教主 阅读(781) 评论(0) 推荐(0) 编辑
摘要: 本文同步自我的个人博客:http://www.52cik.com/2015/12/04/learn node path.html path 模块是 node 用于整理、转换、合并路径的神器,只要是路径问题,都可以交给它处理。 但它仅仅是处理路径字符串,而不会去坚持或处理文件。 <! more 路径整 阅读全文
posted @ 2015-12-04 23:59 楼教主 阅读(11371) 评论(0) 推荐(5) 编辑
js output×
点击右上角即可分享
微信分享提示