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请求可能都放在一个文件中,并且对加了拦截器等等。示例如下:
在dongzuohttp.js文件中的定义如下:

//request文件中创建axios实例request,并对其设置了拦截器等
import request from '@/utils/request'
export const dongzuoApi = {
   //查询基础信息
   findalldic: data => request({
       url: '/dic/getAllDic',
       method: 'post',
       data,
       showload:true
   }),
   //查询字典
   finddongzuodic:()=>request({
       url: '/motion/findAllMotion',
       method: 'post',
   }),
};

在vue文件中的使用如下:

let paradata = {
       danweiFlag: true
     };
let p1 = dongzuoApi.finddongzuodic();
let p2 = dongzuoApi.findalldic(paradata);

axios.all([p1, p2]).then(
       axios.spread(function(r1, r2) {
         console.log(r1,r2);
         ///进行你的下一步操作
       })
   );

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

    Promise.all([p1, p2]).then(function(values) {
       console.log(values);//values为一个数组
       ///进行你的下一步操作
      });
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 13,904评论 1 32
  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 14,052评论 6 13
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,415评论 1 45
  • 一、温故而知新 1. 内存不够怎么办 内存简单分配策略的问题地址空间不隔离内存使用效率低程序运行的地址不确定 关于...
    SeanCST阅读 12,412评论 0 27
  • 折柳赠别,江湖又是天涯路。将行何处,啼鸟林中诉。 还忆少时,你我同床住。匆匆渡,回眸已暮,此情怎堪负。
    唐春元阅读 1,549评论 0 5

友情链接更多精彩内容