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-10-28 10:50:26

    VectorDrawable简单介绍

    在项目中使用矢量图至少可以缩小我们apk包的尺寸,而且可以在屏幕适配时提供很大的方便,因为矢量图是分辨率无关的。

  • 2018-10-28 11:14:29

    矢量资源工具Vector_Asset_Studio

    Android Studio有一个称为“Vector Asset Studio”的工具, 它可以将SVG文件和PSD文件转化为工程可用的矢量可绘制资源(vector drawable resources),

  • 2018-10-28 11:16:09

    Android vector标签 PathData 画图超详解

    SVG是一种矢量图格式,是Scalable Vector Graphics三个单词的首字母缩写。在xml文件中的标签是<vector>,画出的图形可以像一般的图片资源使用,例子如下

  • 2018-10-30 00:16:41

    android ToolBar 设置颜色

    app:popupTheme——有时候我们有需求:ActionBar文字是白的,ActionBar Overflow弹出的是白底黑字让ActionBar文字是白的,那么对应的theme肯定是Dark。可是让ActionBar弹出的是白底黑字,那么需要Light主题。这时候popupTheme就派上用场了。android:theme 与app:theme——在AppCompat v21里,提供了一个快速方便的方法设置Toolbar的主题,使用app:theme。而新版本22.1.x中,AppCompat 允许对 Toolbar 使用 android:theme代替 app:theme。最好的一点是:它会自动继承父视图的theme ,并且兼容所有APIv11以上的设备。

  • 2018-11-01 22:08:19

    Android Toolbar左、中、右对齐

    默认的Android Toolbar中添加子元素view是从左到右依次添加。需要注意的是,Android Toolbar为自身的NavigationIcon(app:navigationIcon)最靠右,Logo(app:logo)紧接NavigationIcon、Title(app:title)接续Logo、保留了默认的位置(从左边到右)。这些Android Toolbar保留的系统设置字段将挤压开发者自己安放在Toolbar中的子view,如图所示: