基于vue-cli的vue项目之axios的使用4--并发请求

最新推荐文章于 2025-06-17 19:45:00 发布

原创最新推荐文章于 2025-06-17 19:45:00 发布 · 5.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#axios #跨域 #vue #javascript #前端

vue 专栏收录该内容

37 篇文章

订阅专栏

本文介绍了一种在Vue项目中实现并发请求的方法，并通过配置axios解决了跨域问题。主要步骤包括修改config/index.js文件来配置代理，将axios集成到Vue实例中，以及在组件中发起并发请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

并发请求，还是那句话，，，，域名被藏匿了

1.配置config/index.js:解决跨域问题
dev: {
		env: require('./dev.env'),
		port: 8008,
		autoOpenBrowser: false,
		assetsSubDirectory: 'static',
		assetsPublicPath: '/',
		proxyTable: {
			'/ajaxurl': {
				target: 'https://www.aaaaaaa.com/',
				changeOrigin: true,
				pathRewrite: {
					'^/ajaxurl': '/'
				}
			}

		}
	
	}

2.main.js：配置axios到原型链中,注意第二十五行
import Vue from 'vue'
import App from './App'
import axios from 'axios'
Vue.prototype.$http=axios;
new Vue({
	el: '#app',
	render: h => h(App)
})

3.app.vue：使用请求，get为例，第四十七行到第五十二行设置并发，ajax1与ajax2为两个请求，
其中ajax2的正确地址应该为/ajaxurl/welfare/gpa/index/index，第六十行为错误的链接
<template>
	<div id="app">
		huoqu
		<button @click="myajax">获取首页信息</button>
	</div>
</template>
<script>
	export default {
		name: 'app',
		components: {},
		data: function() {},
		methods: {
			//get为例子
			myajax: function() {
				this.$http.all([this.ajax1(),this.ajax2()])
				.then(this.$http.spread(function(a,b){//全部请求正确时候触发
					console.log(a);
					console.log(b);
					console.log("请求全部加载完毕");
				}))
		},
		//第一个接口请求
		ajax1(){
			return this.$http.get("/ajaxurl/welfare/gpa/brand/list?page=1&size=10");
		},
		//第二个接口请求
		ajax2(){
			return this.$http.get("/ajaxurl/welfare/gpa/index/inde");
		},
			
		}
	}
</script>
<style>

</style>

下面是正确的效果：