又一年過去了，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)