美文网首页
axios.all及Promise.all合并多个请求且都返回数

axios.all及Promise.all合并多个请求且都返回数

作者: 牙牙and小尾巴 | 来源:发表于2019-04-25 16:33 被阅读0次

很多时候,我们需要同时向后端进行多个请求,当所有请求都返回数据后,再进行一些操作。比如:初始化页面时,可能需要初始化一些基础数据,才能进行操作。获取这些基础数据,可能需要向后端发送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为一个数组
       ///进行你的下一步操作
      });

相关文章

  • axios.all及Promise.all合并多个请求且都返回数

    很多时候,我们需要同时向后端进行多个请求,当所有请求都返回数据后,再进行一些操作。比如:初始化页面时,可能需要初始...

  • 关于Promise

    Promise.all () 可以使用Promise.all 封装多个请求,这时候返回的数据会封装成数组,在使用[...

  • axios.all()解决并发请求

    axios.all()、axios.spread()两个辅助函数用于处理同时发送多个请求,可以实现在多个请求都完成...

  • promise(ES6)

    promise.all 多个起步请求,要所有的请求都拿到结果了再执行操作 promise.race 多个请求,只...

  • 17.ES6 Promise.all 异步操作并行

    在ES6中可以将多个Promise.all异步请求并行操作:1、当所有结果成功返回时按照请求顺序返回成功;2、当其...

  • axios 同时执行多个请求

    同时执行多个请求 axios.all([ ]) .then(axios.spread(function (user...

  • axios.all()解决并发请求

    简介:axios.all()、axios.spread()两个辅助函数用于处理同时发送多个请求,可以实现在多个请求...

  • axios方法

    axios.all() 批量发送请求,等所有请求都有返回时,再执行统一的回调。 网站导航 网站导航

  • 多个请求执行完再执行下一个方法(vue Promise.all用

    vue等多个请求执行完再执行下一个方法可以用promise.all。 Promise.all可以将多个Promis...

  • es6:promise

    异步任务,请求服务器数据: 传入请求地址,调用 调用结果 等待多个promise:Promise.all(prom...

网友评论

      本文标题:axios.all及Promise.all合并多个请求且都返回数

      本文链接:https://www.haomeiwen.com/subject/kruzgqtx.html