Axios實現多個並行請求

開發背景：

項目需求是獲取最近30天的顧客數據，而百度智客對應的接口一次只能獲取某一天的顧客數據。也就是說，須要發送30個請求。

實現思路：

由於項目是用axios發送http請求的，因此首先想到了axios的方法：

代碼示例：

這裏用 jsonplaceholder中的數據，舉例說明axios實現並行請求的方法。

function getPosts() {
  // 存儲全部http請求
  let reqList = []
  // 存儲後臺響應每一個請求後的返回結果
  let resList = []

  for(let i = 0; i< 30; i++) {
    let req = axios.get('https://jsonplaceholder.typicode.com/posts/' + (i + 1))
    
    reqList.push(req)
    resList.push(('post' + (i + 1)).replace(/[']+/g, ''))
  }

  return axios.all(reqList).then(axios.spread(function(...resList) {
    return resList // 拿到全部posts數據
  }))
}   

async function renderPage() {
  let posts = await getPosts()
  let docfrag = document.createDocumentFragment()

  for(let i = 0; i< posts.length; i++) {
    if (posts[i] && posts[i].status === 200) {
      let newLi = document.createElement('li')
      
      newLi.innerText = posts[i].data.title
      docfrag.appendChild(newLi)
    }
  }
  document.querySelector('.posts').appendChild(docfrag)
}

renderPage()

在線示例:

axios實現多個並行請求