首先我们需要在脚手架中下载axios包用于我们做网络请求：npm i axios
然后我们可以在两个地方做网络请求，一个是在我们的组件中，另外一个是在main.js入口文件做网络请求。
在做网络请求前，我们先在egg框架中写一个数据接口并启动服务器，我们在vue脚手架中去请求数据。
第一种：在组件中导入axios包做网络请求
首先在当前组件中导入axios包，当页面渲染完成时作AJAX请求，并将数据渲染到页面上。
代码：
<template>
<div class="app">
<div>{{obj.name1}}--{{obj.age+"岁"}}</div>
</div>
</template>
<script>
import axios from "axios"
export default {
data() {
return {
obj:{}
}
},
async created() {
//请求数据接口
let res= await axios("http://172.20.10.3:7001/ajax")
console.log(res);
//将值赋给data数据源
this.obj=res.data
},
}
</script>代码写好了，但是我们运行在浏览器看效果的时候页面并成功。
因为什么原因呢？
因为跨域了，我们脚手架搭建运行的服务器网址是http://172.20.10.3:8080,而egg框架搭建运行的服务器网址是http://172.20.10.3:7001，两者的端口一个是7001，一个是8080，所以造成了跨域。
解决方案1：在egg框架内下载 egg-cors 插件来实现cors跨域请求。
1.下载
npm i --save egg-cors2.开启插件
// config/plugin.js文件
cors:{
enable: true,
package: 'egg-cors',
}
3.配置插件
// config/config.default.js文件
config.cors = {
origin: '*',
allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH'
}
配置完成后重启egg服务器，再从新请求。
解决办法2：利用代理服务器，让我们的后端帮我们去egg框架服务器的数据，服务器与服务器之间的访问不会造成跨域。
我们不用手写服务器代理的代码，脚手架为我们配置了，我们只需要填写数据就行。
在vue.config.js中
添加devServer:{}
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave:false,
devServer: {
port: 8080, //默认vue脚手架配置就8080
//代理配置,这里只是配置,不用写代理服务器的代码(配置好了它帮我们实现)
//第一种简单配置
proxy: {
'/ajax': 'http://172.20.10.3:7001',
},
//第二种详细配置
proxy: {
'/xyl': {
target: 'http://172.20.10.3:7001',
secure: true, //如果代理的target是https接口,需要配置它
pathRewrite: {
'^/xyl': '/'
},
//请求时重写pathname:将/xyl换成/
//项目组件中请求的是http://172.20.10.3:8080/xyl/ajax1
//8080服务器就会帮我们代理请求 http://172.20.10.3:7001/ajax1
},
},
}
})
这里我们用第二种。
对应App.vue中的代码修改一下：
<template>
<div class="app">
<div>{{obj.name1}}--{{obj.age+"岁"}}</div>
</div>
</template>
<script>
import axios from "axios"
export default {
data() {
return {
obj:{}
}
},
async created() {
//向本服务器后端发起请求
let res= await axios("http://172.20.10.3:8080/xyl/ajax")
console.log(res);
//将值赋给data数据源
this.obj=res.data
},
}
</script>
<style>
.app{
width: 400px;
height: 400px;
background-color: burlywood;
}
</style>很多人好奇我们为什么要用/ajax前加一级/xyl，我们直接ajax就行了，但是为什么要多加一级呢？
看起来会变复杂一点，但是在实际开发中我们不可能只会请求一个接口，会有很多很多，如果我们不加一级/xyl,不同的接口我们需要配置很多个proxy，但是我加了一级/xyl，可以化分一个服务器的接口，当服务器代理遇到/xyl的时候，它就知道访问那个服务器，在需要访问该服务器的接口前都加上/xyl，当作服务器代理时都只会访问一个服务器，相当于做了一个汇总。这就是一种优化。
举个例子就明白了，如7001下有三个数据接口ajax1,ajax2,ajax3，我们当前网页需要请求，我们直接将这些接口作为根目录请求，http://ip+端口/ajax1，http://ip+端口/ajax2，http://ip+端口/ajax3，
这个时候请求了当前服务器要它去代理，我们就需要配置三个proxy，如
devServer: {
port: 8080, //默认vue脚手架配置就8080
//代理配置,这里只是配置,不用写代理服务器的代码(配置好了它帮我们实现)
//检测到/ajax1时，去请求这个7001服务器的资源
proxy: {
'/ajax1': 'http://172.20.10.3:7001',
//最终请求代码：http://172.20.10.3:7001/ajax1
},
//检测到/ajax2时，去请求这个7001服务器的资源
proxy: {
'/ajax2': 'http://172.20.10.3:7001',
},
//检测到/ajax3时，去请求这个7001服务器的资源
proxy: {
'/ajax3': 'http://172.20.10.3:7001',
},
}
可以看到都是请求同一个服务器的资源，但是写了三个proxy。
但是我们多加一级目录/xyl，只需要配置一个proxy就能实现相同的功能，请求代码：
这时devServe的配置：
//检测到/xyl时
proxy: {
'/xyl': {
target: 'http://172.20.10.3:7001',
secure: true, //如果代理的target是https接口,需要配置它
pathRewrite: {
'^/xyl': '/'
},
//请求时重写pathname:将/xyl换成/
//8080服务器就会帮我们代理请求
http://172.20.10.3:7001/ajax1，
},
},
是不是感觉减少了很多重复的代码量。
第二种：在main.js入口文件导入axios包做网络请求
我们首先要知道为什么要在人口文件导入，因为在组件中要做网络请求时就要导入axios包，如果我们要写很多组件，这些组件都要做网络请求就都需要导入axios包，这就造成了大量的重复操作。
但是我们在main.js中导入axios包只需要一次，也是减少了代码量。
第二，为什么在入口文件中导入axios包组件中能够使用？
这一步我们还需要做一个操作把这个axios工具函数设置给Vue对象的原型上，因为Vue对象的原型都在所有组件的原型对象上，所以所有组件都能够使用axios网络请求工具。
第三，在这里我们还可以做一步优化，我们可以设置这个axios请求的公共部分，如：我们设置了公共部分为http://172.20.10.3:8080/xyl，我们在做网络请求时写axios("/ajax"),那么实际的网络请求就变成了http://172.20.10.3:8080/xyl/ajax1，这样进一步优化前面写/xyl的情况，再进一步减少了代码量。
main.js中代码：
import Vue from 'vue'
import App from './App.vue'
//导入axios包
import axios from "axios"
//配置公共url
axios.defaults.baseURL="http://192.168.101.109:8080/hqyj"
//如果这个axios去请求 "ajax1"，它实际的网http://192.168.101.109:8080/hqyj/ajax1
//给Vue原型上添加这个axios
Vue.prototype.$axios=axios
var vm=new Vue({
render: h => h(App),
}).$mount('#app')
console.log(vm)调用时：
async created() {
let res=await this.$axios("/ajax")
console.log(res);
},
