Axios完成多个并行要求

开辟背景:

  项目需求是猎取近来30天的主顾数据,而百度智客对应的接口一次只能猎取某一天的主顾数据。也就是说,须要发送30个要求。

完成思绪:

由于项目是用axios发送http要求的,所以起首想到了axios的要领:
《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完成多个并行要求

    原文作者:Tomchao
    原文地址: https://segmentfault.com/a/1190000015719831
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞