【JS】993- JavaScript 异步流程控制-轻识

来源 | https://github.com/cheogo/learn-javascript

本文主要讲解 JavaScript 在异步流程控制中的一些实践、容错以及复杂异步环境下我们该如何去处理。

发展历史

简要的提及一下，异步流程控制的发展历史大概是 callback hell => Promise => Generator => async/await

ES6 中 Promise 是通过 .then().then().catch() 的方式来解决 callback 多层嵌套的问题。但 Promise 依然是异步执行的，这时候 TJ 的 co，通过 Generator 实现了异步代码的同步化。这个模式和 ES7 中的 async/await 类似。

function A() {  // async get dataA  function B(dataA) {    // async get dataB    function C(dataB) {    }  }}
Promise(A).then(B).then(C).catch(err => console.log(err))
co(function *() {  var dataA = yield A()  var dataB = yield B(dataA)  var dataC = yield C(dataB)})
async () => {  const dataA = await A()  const dataB = await B(dataA)  const dataC = await C(dataB)}

使用

首先是语法糖支持情况，你可以使用下面命令行查看当前 node 版本对于 ES6/ES7 的支持。

目前大多浏览器是不支持新语法的，如果你当前环境不支持新语法，你可以使用 bable、 co、 Promise、 bluebird 等开源项目来扩展功能。

$ node --v8-options | grep harmony

对了如果你还对这些新语法的使用方式和 API 陌生的话，建议看看《ECMAScript 6 入门》这本书。

下面的内容，假定你对基本的使用已经有所了解，我们开始正篇。

Promise 实践和容错

之前当面试官的时候，如果面试对象经常使用 ES6，我会喜欢问一个问题：假设你的移动端页面上有头部、中部、底部三部分数据需要并发的去请求 api 拿到返回数据，你会怎么处理？用 Promise 如何实现？如果其中一个 API 出了错误怎么容错？

1.第一个问题很简单，依次执行三个异步请求函数，在获取到数据后执行渲染函数填充到页面上

2.第二个问题，其实也没多绕，你可以同时执行三个 Promise 函数，也可以打包成 Promise.all() 一并执行，显然对于这种并发执行的异步函数 Promise.all() 更符合程序设计。

const render = log = console.logconst asyncApi = (num) => {  return new Promise((resolve, reject) => {    setTimeout(() => {      if (typeof num !== 'number') {        reject('param error')      }      num += 10      resolve(num)    }, 100);  })}
asyncApi(0).then(render).catch(log)  // 10asyncApi(5).then(render).catch(log)  // 15asyncApi(10).then(render).catch(log) // 20
Promise.all([asyncApi(0), asyncApi(5), asyncApi(10)]).then(render).catch(log) // [ 10, 15, 20 ]

3.无论怎样，我会把面试者引导到 Promise.all() 上，这时候我会抛出问题如果其中一个 API 出了错误怎么容错？

asyncApi(0).then(render).catch(log)       // 10asyncApi(false).then(render).catch(log)   // param errorasyncApi(10).then(render).catch(log)      // 20
Promise.all([asyncApi(0), asyncApi(false), asyncApi(10)]).then(render).catch(log) // param error

对比发现，Promise 之间互不影响。但由于 Promise.all() 其实是将传入的多个 Promise 打包成一个，任何一个地方出错了都会直接抛出异常，导致不执行 then 直接跳到了 catch，丢失了成功的数据。

4.解决方式是使用 resolve 传递错误，then 环节去处理

const render = log = console.logconst asyncApi = (num) => {  return new Promise((resolve, reject) => {    setTimeout(() => {      if (typeof num !== 'number') {        resolve({ err: 'param error' }) // 修改前：reject('param error')      }      num += 10      resolve({ data: num }) // 修改前：resolve(num)    }, 100);  })}
Promise.all([asyncApi(0), asyncApi(false), asyncApi(10)]).then(render).catch(log) // [ { data: 10 }, { err: 'param error' }, { data: 20 } ]，这时候就可以区分处理了

复杂环境

我们假设一个如下的复杂场景，异步请求之间相互依赖。仅仅用 Promise 来实现，会不停的调用 then、 return 并且创建匿名函数。

// 流程示意图//          data            data1// asyncApi -----> asyncApi -----> render/error//     10 + data            data2           data3//          -----> asyncApi -----> asyncApi -----> render/error
asyncApi(0).then(data => {  return Promise.all([asyncApi(data.data), asyncApi(10 + data.data)])}).then(([data1, data2]) => {  render(data1)  return asyncApi(data2.data)}).then(render).catch(log)

而如果加上 async/await 来改写它，就可以完全按同步的写法来获取异步数据，并且语义清晰。

const run = async () => {  let data = await asyncApi(0)  let [data1, data2] = await Promise.all([asyncApi(data.data), asyncApi(10 + data.data)])  render(data1)  let data3 = await asyncApi(data2.data)  render(data3)}run().catch(log)