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为一个数组///进行你的下一步操作});


  • 2020-05-20 22:29:05

    javascript中为何在匿名function函数后面还外加

    它可以解释成为“匿名函数自调用”,也就是说,定义一个匿名函数,然后马上调用它(因为它是匿名的,如果不立即调用就获取不到该函数的引用了)。通常它被应用在一些大型的JS框架中(如上面所说的),因为这个匿名函数的函数体相当于提供一个匿名的名字空间,这样就不会再与用户自定义的JS函数、变量、对象发生冲突了。尽管JS没有显示地提供命名空间的定义和使用机制,但这种匿名方式却不失为是一种很好的解决命名空间问题的方法。

  • 2020-05-20 22:30:14

    js中利用prototype给类添加方法

    你可能会想,这不就是个简单的函数声明?没错,这个函数就是一个类的定义的实现。如何使用这个类呢?看下面的代码:var cls1 = new MyClass(); 这样,利用new就可以生成MyClass的一个实例了。所以在js中可以说函数就是类,类就是函数。

  • 2020-05-21 10:56:53

    fixed z-index失效

    作为一个假的前端,在调试一个页面时出现了如下bug。 左侧的菜单固定为fixed时,二级菜单无法设置有效的z-index,导致菜单隐藏在页面元素之下,明明页面元素的z-index是1,但是无论把菜单的z-index设置为多大,都不管用。