关于前端:编写高质量可维护的代码异步优化

这是第 77 篇不掺水的原创，想获取更多原创好文，请搜寻公众号关注咱们吧~ 本文首发于政采云前端博客：编写高质量可保护的代码——异步优化

前言

在当初前端开发中，异步操作的频次曾经越来越高了，特地对于数据接口申请和定时器的应用，使得咱们不得不关注异步在业务中碰到的场景，以及对异步的优化。谬误的异步解决可能会带来很多问题，诸如页面渲染、反复加载等问题。

上面咱们就先简略的从 JavaScript 中有大抵的哪几种异步类型为切入点，而后再列举一些业务中咱们会碰到的场景来一一剖析下，咱们该如何解决。

异步实现品种

首先对于异步实现的形式上大抵有如下几种：

callback

callback 即回调函数。这家伙呈现很早很早了，他其实是解决异步的根本办法。并且回调的概念不单单呈现在 JavaScript，你也会在 Java 或者 C# 等后端语言中也能找到他的影子。

回调函数简略的说其实就是给另外一个寄主函数作为传参的函数。在寄主函数执行实现或者执行到特定阶段之后触发调用回调函数并执行，而后把执行后果再返回给寄主函数的过程。

比方咱们相熟的 setTimeout 或者 React 中的 setState 的第二个办法都是以回调函数形式去解决异步的实现。

setTimeout(() => {
   // 期待 0.2s 之后再做具体的业务操作
   this.doSomething();}, 200);
this.setState({count: res.count,}, () => {
  // 在更新完 count 之后再做具体的业务操作
  this.doSomething();});

Promise

Promise 是个好货色，有了它之后咱们能够对异步进行很多操作，并且能够把异步以链式的形式进行操作。

其实在 JQuery 中的 deferred 和它就有点像，都是采纳回调函数的解决方案，都能够做链式调用，然而在 Promise 中减少了谬误的 catch 办法能够更加不便的解决异样场景，并且它内置状态 (resolve, reject，pending)，状态只能由 pending 变为另外两种的其中一种，且扭转后不可逆也不可再度批改。

let promise = new Promise((resolve, reject) => {reject("对不起，你不是我的菜");
});
promise.then((data) => {console.log('第一次 success' + data);
  return '第一次 success' + data
},(error) => {console.log(error) }
).then((data2) => {console.log('第二次 success' + data2);
},(error2) => {console.log(error2) }
).catch((e) => {console.log('抓到谬误啦' + e);
});

await/async

await/async 其实是 Promise 的一种降级版本，应用 await/async 调用异步的时候是从上到下，程序执行，就像在写同步代码一样，这更加的合乎咱们编写代码的习惯和思维逻辑，所以容易了解。整体代码逻辑也会更加的清晰。

async function asyncDemoFn() {const data1 = await getData1();
  const data2 = await getData2(data1);
  const data3 =  await getData3(data2);
  console.log(data3)
}
await asyncDemoFn()

generator

generator 中文名叫结构器，是 ES6 中的一个新货色，我置信很多人在事实的代码中很少能接触到它，所以它相对而言对大家来说还是比拟艰涩，然而这家伙还是很强的，简略来说它能管制异步调用，并且其实是一个状态机。

function* foo() {for (let i = 1; i <= 3; i++) {let x = yield ` 等我一下呗，i = ${i}`;
    console.log(x);
  }
}
setTimeout(() => {console.log('终于轮到我了');
}, 1);
var a = foo();
console.log(a); // foo {<closed>}
var b = a.next();
console.log(b); // {value: "等我一下呗，i = 1", done: false}
var c = a.next();
console.log(c); // {value: "等我一下呗，i = 2", done: false}
var d = a.next();
console.log(d); // {value: "等我一下呗，i = 3", done: false}
var e = a.next();
console.log(e); // {value: undefined, done: true}
// 终于轮到我了 

下面代码的函数 foo 是一个协程，它的厉害的中央就是 yield 命令。它示意执行到此处，执行权将交给其余协程。也就是说，yield 命令是异步两个阶段的分界线。

协程遇到 yield 命令就暂停，等到执行权返回，再从暂停的中央持续往后执行。它的最大长处，就是代码的写法十分像同步操作，如果去除 yield 命令，几乎截然不同。

再来个有点贴近点场景形式来应用下 generator。比方当初在页面中咱们须要主动的执行 checkAuth 和 checkAddress 查看，咱们就用 generator 的形式去实现主动查看上述两异步查看。

const checkAuth = () => {return new Promise((resolve)=>{setTimeout(()=>{resolve('checkAuth1') 
        },1000)
    })
}
const checkAddress = () => {return new Promise((resolve)=>{setTimeout(()=>{resolve('checkAddress2')
        },2000)
    })
}
var steps = [checkAuth,checkAddress]
function* foo(checkList) {for (let i = 0; i < checkList.length; i++) {let x = yield checkList[i]();
    console.log(x);
  }
}
var stepsGen = foo(steps)
var run = async (gen)=>{
    var isFinnish = false
    do{const {done,value} = gen.next()
       console.log('done:',done)
       console.log('value:',value)
       const result = await value
       console.log('result:',result)
       
       isFinnish = done
    }while(!isFinnish)
    console.log('isFinnish:',isFinnish)
}
run(stepsGen)

品种比照

• 从工夫维度从早到晚：callback，promise，generator，await/async
• await/async 是目前对于异步的终极模式
• callback 让咱们有了根本的形式去解决异步状况，Promise 辞别了 callback 的回调天堂并且减少 resolve，reject 和 catch 等办法让咱们能解决不同的状况，generator 减少了对于异步的可操作性，相似一个状态机可临时停住多个异步的执行，而后在适合的时候继续执行残余的异步调用，await/async 让异步调用更加语义化，并且主动执行异步

异步业务中碰到的场景

回调天堂

在应用回调函数的时候咱们可能会有这样的场景，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)
})

程序执行

在程序执行中，咱们能够有如下的两种形式去做

1. 应用 async/await 配合 for

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

1. 应用 async/await 配合 while

//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()

1. 应用 async/await 配合 reduce

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

1. 应用递归

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 异步编程六种计划

Async/Await 代替 Promise 的 6 个理由

Javascript 异步编程的 4 种办法

招贤纳士

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

如果你想扭转始终被事折腾，心愿开始能折腾事；如果你想扭转始终被告诫须要多些想法，却无从破局；如果你想扭转你有能力去做成那个后果，却不须要你；如果你想扭转你想做成的事须要一个团队去撑持，但没你带人的地位；如果你想扭转既定的节奏，将会是“5 年工作工夫 3 年工作教训”；如果你想扭转原本悟性不错，但总是有那一层窗户纸的含糊… 如果你置信置信的力量，置信平凡人能成就不凡事，置信能遇到更好的本人。如果你心愿参加到随着业务腾飞的过程，亲手推动一个有着深刻的业务了解、欠缺的技术体系、技术发明价值、影响力外溢的前端团队的成长历程，我感觉咱们该聊聊。任何工夫，等着你写点什么，发给 ZooTeam@cai-inc.com