axios并发操作

2020-12-01 17:25:39

参考地址 axios.all及Promise.all合并多个请求且都返回数据后进行其他操作

很多时候,我们需要同时向后端进行多个请求,当所有请求都返回数据后,再进行一些操作。比如:初始化页面时,可能需要初始化一些基础数据,才能进行操作。获取这些基础数据,可能需要向后端发送request1,request2。。。等多个请求,而后续的操作说需要request1,request2等都正确返回数据后才能进行。
在axios官方文档中对一次性并发多个请求示例如下:

function getUserAccount(){return axios.get('/user/12345');}function getUserPermissions(){return axios.get('/user/12345/permissions');}axios.all([getUserAccount(),getUserPermissions()]).then(axios.spread(function(acct,perms){//当这两个请求都完成的时候会触发这个函数,两个参数分别代表返回的结果}))

但是很多时候,我们在项目中并不会直接去axios.get,axios请求可能都放在一个文件中,并且对加了拦截器等等。示例如下:

export const cargoDayNumber = (data) => {
  return axios.request({
    url: '/api/zz-xt/statistical/areas',
    method: 'post',
    data: data
  })
}

在vue文件中的使用如下:

let r1 = carVisitTime({ createTime: '2019-06-27' })let r2 = statistic({ createTime: '2019-06-27' })let r3 = cargoDayNumber({ createTime: '2019-07-01' })let r4 = enterpriseRanking()axios.all([r1, r2, r3, r4]).then(axios.spread((r1, r2, r3, r4) => {this.numberVehicleVisits = r1.datathis.loadingDateRank.loading = r2.data.loadingthis.loadingDateRank.unloading = r2.data.unloadingthis.loadingAreasRank.loadingRegionalList = r3.data.inflowthis.loadingAreasRank.unloadingRegionalList = r3.data.outflowthis.enterpriseLoadWeight.enterpriseLoadingRankList = r4.data.loadingRankthis.enterpriseLoadWeight.enterpriseUnloadingRankList = r4.data.unloadingRank}))

除了axios.all,我们也可以使用Promise.all,示例如下 

Promise.all([p1, p2]).then(function(values) {console.log(values);//values为一个数组///进行你的下一步操作});


  • 2018-03-21 22:26:03

    Android BASE64Encoder不能用的问题

    昨天项目与后台交互的接口传参数需要加密,用的是BASE64Encoder加密,可是这个类不能用,谷歌了一下说的是:

  • 2018-03-21 22:28:02

    Java加密算法 AES

    AES 算法 对称加密,密码学中的高级加密标准 2005年成为有效标准

  • 2018-03-24 13:23:26

    Only the original thread that created a view hierarchy can touch its views

    很多网友在Android中使用多线程处理UI相关内容时可能会发现Logcat提示Only the original thread that created a view hierarchy can touch its views这样的错误,这主要是Android的相关View和控件不是线程安全的,我们必须做独立的处理这点比J2ME麻烦一些,这里Android给 我们提供了很多方法,有关线程的

  • 2018-03-26 18:05:09

    MYSQL OR与AND一起 的用法

    查询结果是id = 2且age = 20或者id=1SELECT * from student WHERE id = 1 or id = 2 AND age = 20;12

  • 2018-03-27 11:27:09

    Java中Set集合的使用

    Set类继承了Conllection类,是一种集合类。Set的实现类有三个,下面我们会一一来说这些的不一样。

  • 2018-03-27 11:36:58

    Java中数组、List、Set互相转换

    需要注意的是, Arrays.asList() 返回一个受指定数组决定的固定大小的列表。所以不能做 add 、 remove等操作,否则会报错。

  • 2018-03-27 16:37:57

    Java 8 将List转换为Map

    几个Java 8示例来向您展示如何将一个List对象转换为一个Map,以及如何处理重复的键