async 更优雅异步体验

Ajian 发布于2019-08-19 18:46 / 674人阅读

摘要：文章同步自个人博客上一篇让自启动介绍了通过起动器让跑起来，而本篇采用实现更优雅的异步编程。而采用写，代码则是直接运行即可直接运行了，无须写生成器来运行了，而代码仅仅是改为改为而已。不过效果确实非常好，让异步编程更加的同步了。

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

上一篇《让 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("
"));
}

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, "
",
    "b:", b, "
",
    "c:", c, "
",
    "d:", d, "
",
    "e:", e, "
"
  )
}

run()

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

小结

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

服务器托管私有云优雅上下线 mongodb优雅连接 java优雅异常处理 async

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79981.html

JavaScript：体验异步的优雅解决方案

摘要：但是的的出现碉堡的新朋友，我们可以轻松写出同步风格的代码同时又拥有异步机制，可以说是目前最简单，最优雅，最佳的解决方案了。不敢说这一定是终极的解决方案，但确实是目前最优雅的解决方案一、异步解决方案的进化史 JavaScript的异步操作一直是个麻烦事，所以不断有人提出它的各种解决方案。可以追溯到最早的回调函数(ajax老朋友)，到Promise(不算新的朋友)，再到ES6的Gener...

happyfish 2019-08-21 18:42 评论0 收藏0
JavaScript 中优雅的实现顺序执行异步函数

摘要：顺序执行异步函数异步为带来非阻塞等优势的同时，同时也在一些场景下带了不便，如顺序执行异步函数，下面总结了一些常用的方法。火于异步 1995年，当时最流行的浏览器——网景中开始运行 JavaScript （最初称为 LiveScript）。 1996年，微软发布了 JScript 兼容 JavaScript。随着网景、微软竞争而不断的技术更新，在 2000年前后，JavaScript ...

monw3c 2019-08-22 16:02 评论0 收藏0
ES6-7

摘要：的翻译文档由的维护很多人说，阮老师已经有一本关于的书了入门，觉得看看这本书就足够了。前端的异步解决方案之和异步编程模式在前端开发过程中，显得越来越重要。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。 JavaScript Promise 迷你书（中文版）超详细介绍promise的gitbook，看完再不会promise...... 本书的目的是以目前还在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 评论0 收藏0
JavaScript 异步

摘要：从最开始的到封装后的都在试图解决异步编程过程中的问题。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。写一个符合规范并可配合使用的写一个符合规范并可配合使用的理解的工作原理采用回调函数来处理异步编程。 JavaScript怎么使用循环代替(异步)递归问题描述在开发过程中，遇到一个需求：在系统初始化时通过http获取一个第三方服务器端的列表，第三方服务器提供了一个接口，可通过...

tuniutech 2019-08-21 18:34 评论0 收藏0
js 处理异步操作的几种方式

摘要：如果我们只有一个异步操作，用回调函数来处理是完全没有任何问题的。事件监听使用事件监听的方式番禺广州上述代码需要实现一个事件监听器。只处理对象广州番禺函数将函数的自动执行器，改在语言层面提供，不暴露给用户。概论由于 JavaScript 是一门单线程执行的语言，所以在我们处理耗时较长的任务时，异步编程就显得尤为重要。js 处理异步操作最传统的方式是回调函数，基本上所有的异步操作都可以...

Meils 2019-08-23 16:27 评论0 收藏0