异步业务中碰到的场景

回调地狱

在使用回调函数的时候我们可能会有这样的场景，B 需要在 A 的返回之后再继续调用，所以在这样有先后关系的时候就存在了一个叫回调地狱的问题了。

getData1().then((resData1) => {
  getData2(resData1).then((resData2) => {
    getData3(resData2).then((resData3)=>{
      console.log('resData3:', resData3)
    })
  });
});

碰到这样的情况我们可以试着用 await/async 方式去解这种有多个深层嵌套的问题。

async function asyncDemoFn2() {
  const resData1 = await getData1();
  const resData2 = await getData2(resData1);
  const resData3 =  await getData3(resData2);
  console.log(resData3)
}
await asyncDemoFn2()

异步循环

在业务中我们最最经常碰到的就是其实还是存在多个异步调用的顺序问题，大致上可以分为如下几种：

并行执行

在并行执行的时候，我们可以直接使用 Promise 的 all 方法

Promise.all([getData1(),getData2(),getData3()]).then(res={
console.log('res:',res)
})

顺序执行

在顺序执行中，我们可以有如下的两种方式去做

const sources = [getData1,getData2,getData3]
async function promiseQueue() {
  console.log('开始');
  for (let targetSource in sources) {
    await targetSource();
  }
  console.log('完成');
};
promiseQueue()

// getData1,getData2,getData3 都为 promise 对象
const sources = [getData1,getData2,getData3]
async function promiseQueue() {
  let index = 0
  console.log('开始');
  while(index >=0 && index < sources.length){
    await targetSource();
    index++
  }
  console.log('完成');
};
promiseQueue()

// getData1,getData2,getData3 都为 promise 对象
const sources = [getData1,getData2,getData3]
sources.reduce(async (previousValue, currentValue)=>{
  await previousValue
  return currentValue()
},Promise.resolve())

const sources = [getData1,getData2,getData3]
function promiseQueue(list , index = 0) {
  const len = list.length
  console.log('开始');
  if(index >= 0 && index < len){
    list[index]().then(()=>{
      promiseQueue(list, index+1)      
    })
  }
  console.log('完成');
}
promiseQueue(sources)

结尾

今天只是关于异步的普通使用场景的讨论，并且做了些简单的例子。其实关于异步的使用还有很多很多复杂的使用场景。更多的奇思妙想正等着你。

参考文献

JS 异步编程六种方案：(https://juejin.im/post/6844903760280420366#heading-12)

Async/Await 替代 Promise 的 6 个理由：(https://blog.fundebug.com/2017/04/04/nodejs-async-await/)

Javascript 异步编程的 4 种方法：(http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%BC%BFjavascript.html)

看完两件事

如果你觉得这篇内容对你挺有启发，我想邀请你帮我两件小事

1.点个「在看」，让更多人也能看到这篇内容（点了「在看」，bug -1 😊）

招贤纳士

政采云前端团队（ZooTeam），一个年轻富有激情和创造力的前端团队，隶属于政采云产品研发部，Base 在风景如画的杭州。团队现有 40 余个前端小伙伴，平均年龄 27 岁，近 3 成是全栈工程师，妥妥的青年风暴团。成员构成既有来自于阿里、网易的“老”兵，也有浙大、中科大、杭电等校的应届新人。团队在日常的业务对接之外，还在物料体系、工程平台、搭建平台、性能体验、云端应用、数据分析及可视化等方向进行技术探索和实战，推动并落地了一系列的内部技术产品，持续探索前端技术体系的新边界。

如果你想改变一直被事折腾，希望开始能折腾事；如果你想改变一直被告诫需要多些想法，却无从破局；如果你想改变你有能力去做成那个结果，却不需要你；如果你想改变你想做成的事需要一个团队去支撑，但没你带人的位置；如果你想改变既定的节奏，将会是“5 年工作时间 3 年工作经验”；如果你想改变本来悟性不错，但总是有那一层窗户纸的模糊… 如果你相信相信的力量，相信平凡人能成就非凡事，相信能遇到更好的自己。如果你希望参与到随着业务腾飞的过程，亲手推动一个有着深入的业务理解、完善的技术体系、技术创造价值、影响力外溢的前端团队的成长历程，我觉得我们该聊聊。任何时间，等着你写点什么，发给 ZooTeam@cai-inc.com

本文分享自微信公众号 - 政采云前端团队（Zoo-Team）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。

ZooTeam

编写高质量可维护的代码：异步优化