美文网首页
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合并多个请求且都返回数

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