在Vue官方提供的脚手架中做网络请求

首先我们需要在脚手架中下载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-cors

2.开启插件
// 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就能实现相同的功能，请求代码：

http://ip+端口/xyl/ajax1，http://ip+端口/xyl/ajax2，http://ip+端口/xyl/ajax3，当检测到根目录是/xyl时就去请求对应服务器，再重写一下pathname就能实现http://ip+端口/ajax1这样的效果。

这时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，

         http://172.20.10.3:7001/ajax2

         http://172.20.10.3:7001/ajax3

      },

    },

是不是感觉减少了很多重复的代码量。

第二种：在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);
  },