axios发送并发网络请求

最新推荐文章于 2025-01-03 16:11:14 发布

冷太阳a

最新推荐文章于 2025-01-03 16:11:14 发布

阅读量281

点赞数

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/A_9888/article/details/106130559

版权

Vue 专栏收录该内容

45 篇文章

订阅专栏

第一步安装配置axios

npm install axios --sava

第二部全局引用并将其挂在到vue的原型上。

//将axios挂载在vue全局使用
Vue.config.productionTip = false;
Vue.prototype.$axios = Axios;

在这里插入图片描述

第三步实现并发请求

Advice.vue页面
//定义两个接口
 const img_Url = "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata"
const video_Url = "https://api.apiopen.top/videoRecommend?id=127398"
//在methods中定义请求方法，并return出去，不要写请求回调then()
methods:{
	    addAdvice:function(){
	     console.log('第一个接口被调用了')
	     return this.$axios({
	              url:'img_Url',
	              method:'GET',
	              params:{
	                offset:1,
	                pageSize:10
	              }
	            })
	    },
	    getAllCity:function(){
	     console.log('调用第二个接口')
	     return this.$axios({
	                url:'video_Url',
	                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)
	
	    }))
   
  }