axios.all()解决并发请求

简介:axios.all()axios.spread()两个辅助函数用于处理同时发送多个请求,可以实现在多个请求都完成后再执行一些逻辑。注意:该方法是axios的静态方法,不是axios实例的方法!

首先下载axios

npm install axios --sava-dev

mina.js中引入axios,因为其不属于vue全家桶,所以将其挂载在vue原型上,实现全局使用

main.js

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

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

Home.vue

//在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.all()解决并发请求_第1张图片

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

你可能感兴趣的:(ajax,vue,axios,http请求,ajax)