zoukankan      html  css  js  c++  java
  • axios.all()解决并发请求的问题

    实际工作中,经常有遇到一个页面初始需要多个请求的情况,也尝试过async去做,不过效果感觉不是很满意,之前也知道axios中有个all()的方法可以做多个请求,但是没有仔细去了解,今天看到一篇文章有写到这方面的知识,刚好自己也学习一下。

    axios.all()、axios.spread()这两个函数来处理多个请求,该方法是axios的静态方法,不是axios实例方法

    首先,在mina.js中引入axios,然后将其挂载在vue原型上,全局使用

    //引入axios模块(先下载“axios”)
    import axios from 'axios'
    //将axios挂载在vue原型链上
    Vue.prototype.$axios=axios;

    在组件中使用axios配合axios.all()、axios.spread()同时发送多个请求

    //在methods中定义请求方法,并return出去,不要写请求回调then()
    methods:{
        getAllTask:function(){
         console.log('调用第一个接口')
         return this.$axios({
                  url:'http://192.168.*.**:***/api/getTask/getAllData',
                  method:'GET',
                  params:{
                    offset:1,
                    pageSize:10
                  }
                })
        },
        getAllCity:function(){
         console.log('调用第二个接口')
         return this.$axios({
                    url:'http://192.168.*.**:***/city/getCities',
                    method:'GET',
                  })
        }
      },
    //在mounted周期同时发送两个请求,并在请求都结束后,输出结果
     mounted:function(){
        var me = this; 
        this.$axios.all([me.getAllTask(),me.getAllCity()])
        .then(me.$axios.spread(function(allTask, allCity){
            console.log('所有请求完成')
            console.log('请求1结果',allTask)
            console.log('请求2结果',allCity)
        }))
      }

    两个请求执行完成后,才执行axios.spread()中的函数,且axios.spread()回调函数的返回值中的请求结果的顺序和请求的顺序一致

  • 相关阅读:
    替代传统C/S和B/S技术的下一代客户/服务器编程技术
    理想的编程语言
    nginx进程模型
    Sybase 7.0 中文乱码问题
    netfilter 链接跟踪机制与NAT原理
    TraTraffic Server 进程模型
    nginx并发模型与traffic_server并发模型简单比较
    vs/nat原理分析
    ORACLE 查询表信息
    in 跟exists的区别
  • 原文地址:https://www.cnblogs.com/chao202426/p/12068260.html
Copyright © 2011-2022 走看看