谈谈为什么你的 JavaScript 代码如此冗长

又一年过去了，JavaScript发生了许多变化。但是，即使是2019年了，还是需要给一些帮助你编写干净、整洁、有效、且具有扩展性的代码建议。

下面是让你成为更好的开发者的9条建议。

1. async / await

如果你还在为回调陷阱烦恼不已，那么就应该赶快扔掉这些2014年的代码了。除非绝对必要（比如某个库要求回调，或者出于性能的原因），否则不要再用回调了。Promise也不错，但当代码规模越来越大时，它们总是有些别扭。

我的解决方案就是async / await，能让阅读代码变得更容易，代码变得更整洁。实际上，Javascript中的任何Promise都可以await，只要你用的库能返回Promise，就可以await它。实际上，async/await只不过是promise的语法糖而已。为了让代码正确运行，你只需在函数前面加上async即可。

下面是个例子：

async function getData() {  const result = await axios.get('https://dube.io/service/ping')  const data = result.data  console.log('data', data)  return data}getData()

注意在顶层代码是无法await的，await只能在async函数中使用。此外，async / await是在ES2017中引入的，所以务必要对代码进行编译（transpile）。

2. 异步控制流

许多时候需要获取多个数据集并在每个数据集上做一些处理，或者在所有异步调用都返回之后执行某项任务。

for...of

假设网页上有一些精灵宝可梦，我们需要获取每一只的详细信息。我们不能等待所有调用结束，因为我们不知道一共有多少只。我们希望能在获取一部分数据之后立即更新数据集，这时候就可以使用for...of在一个数组上进行循环，然后在内部加入async的代码块，但这样做会造成阻塞，直到所有调用结束。一定要注意，这样做有可能会造成性能瓶颈，但这样做也不失为一种办法。

例子如下：

import axios from 'axios'let myData = [{id: 0}, {id: 1}, {id: 2}, {id: 3}]async function fetchData(dataSet) {  for(entry of dataSet) {    const result = await axios.get(`https://ironhack-pokeapi.herokuapp.com/pokemon/${entry.id}`)    const newData = result.data    updateData(newData)    console.log(myData)  }}function updateData(newData) {  myData = myData.map(el => {    if(el.id === newData.id) return newData    return el  })}fetchData(myData)

这些例子实际上都能运行，可以自行复制粘贴到你喜欢的代码沙盒工具中。

Promise.all

怎样才能并行获取所有宝可梦呢？我们可以await所有的promise，只需用Promise.all即可：

import axios from 'axios' let myData = [{id: 0}, {id: 1}, {id: 2}, {id: 3}]async function fetchData(dataSet) {  const pokemonPromises = dataSet.map(entry => {    return axios.get(`https://ironhack-pokeapi.herokuapp.com/pokemon/${entry.id}`)  })  const results = await Promise.all(pokemonPromises)  results.forEach(result => {    updateData(result.data)  })  console.log(myData) }function updateData(newData) {  myData = myData.map(el => {    if(el.id === newData.id) return newData    return el  })}fetchData(myData)