Axios实现多个并行请求

开发背景:

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

实现思路:

因为项目是用axios发送http请求的,所以首先想到了axios的方法:


axios-concurrent-requests

代码示例:

这里用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实现多个并行请求

推荐阅读更多精彩内容

  • 关于Mongodb的全面总结 MongoDB的内部构造《MongoDB The Definitive Guide》...
    中v中阅读 21,591评论 2 80
  • 年课堂第八讲是李茜老师带来的《让我的爱伴你远行》。这节课太棒了!如果让我用四个字来总结的话,那就是:大开...
    H011常利锋阅读 319评论 0 2
  • 梭罗曾在《瓦尔登湖》里说过这样一句话:“从前,如何诚实地谋生同时又保留自己追求的自由,这个问题比现在更困扰我,不幸...
    萤风白阅读 100评论 0 1
  • 这是一个因为'爱和性别'而存在争议的话题。有些人,因为爱成为一对情侣;有些人,因为爱而组成一个家庭。他们当中有男人...
    㐅名阅读 269评论 2 7
  • 这篇文章是我的一篇读书笔记,医生阿图的《清单革命》。阿图是非常有名的医生,写了五本畅销书,在世界范围拥有极高的声誉...
    邢大侠阅读 201评论 0 1