Vue2 - 实现异步请求与服务器代理配置_vue.config.js可以写异步请求吗-CSDN博客

本文链接：https://blog.csdn.net/weixin_41606115/article/details/129034545

一、实现ajax异步请求

方法一使用axios实现ajax异步请求

Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js

Axios（相比于原生的XMLHttpRequest对象来说）简单易用,（相比于jQuery）axios包尺寸小且提供了易于扩展的接口，是专注于网络请求的库。

在项目中，安装axios库。

npm i axios

在script标签内引入axios库

import axios from 'axios'

使用axios

const url='http://localhost:8080/students';
axios.get(url).then(
          //成功的回掉
          response=>{
            console.log("请求成功了");
            console.log(response);
            console.log(response.data);
          },
          //失败的回调
          error=>{
            console.log("请求失败了",error.message);
            console.log(error);
          }
      )

参考文档：http://www.axios-js.com/zh-cn/docs/

方法二使用插件 vue-resource 实现（不推荐）

在项目里安装vue-resource插件

npm install vue-resource --save-dev

在main.js文件引入插件库，并使用插件

import Vue from 'vue'
import App from './App.vue'

import vueResource from 'vue-resource'//引入插件

Vue.config.productionTip = false
/  
   使用了插件 vue-resource 后，vc身上会多出来一个属性 $http (默认是没有该属性)
  /
Vue.use(vueResource)//使用插件

new Vue({
  render: h => h(App),
}).$mount('#app')

注意：使用了插件 vue-resource 后，vc身上会多出来一个属性 $http (默认是没有该属性)

使用方法

/  
  用 this.$http.get(url) 代替 axios.get(url)
  用法是一样的
 /
const url='http://localhost:8080/students';
this.$http.get(url).then(
      //成功的回掉
      response=>{
        console.log("请求成功了");
        console.log(response);
        console.log(response.data);
      },
      //失败的回调
      error=>{
        console.log("请求失败了",error.message);
        console.log(error);
      }
  )

与axios用法是一样的，用 this.$http.get(url) 代替 axios.get(url)

但 vue-resource 这个库现在的维护频率不高，推荐还是用axios （axios的封装比较优秀）

二、Vue脚手架配置服务器代理（解决跨域问题）

在vue.config.js配置devServer属性，即开启代理服务器，即以后的请求可以找代理服务器拿数据。

方法一（不推荐）

在vue.config.js中添加如下配置：

 devServer:{
  proxy:"http://localhost:5000"
}

说明：

优点：配置简单，请求资源时直接发给前端（8080）即可。

缺点：不能配置多个代理，不能灵活的控制请求是否走代理。

工作方式：

当请求的资源在前端服务器下有时，不会走代理转发给（后端）服务器。

当请求的资源在当前服务器下没有时代理会通过vue.config.js文件中配置的devServer.proxy 目标服务器地址去请求数据，目标服务器再返回带代理，代理会自动返回到当前。

即若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）

方法二（推荐）

编写vue.config.js配置具体代理规则：

module.exports = {
devServer: {
    proxy: {
    '/api1': {// 匹配所有以 '/api1'开头的请求路径
      target: 'http://localhost:5000',// 代理目标的基础路径
      pathRewrite: {'^/api1': ''}，//请求时重写，将前缀目替换为空，解决在目标服务器跳转前缀目录404的问题
     // ws: true,//用于支持websocket ，默认true
       changeOrigin: false 
    },
    '/api2': {// 匹配所有以 '/api2'开头的请求路径
      target: 'http://localhost:5001',// 代理目标的基础路径
      changeOrigin: true,
      pathRewrite: {'^/api2': ''}
    }
  }
}
}

changeOrigin用于控制请求头中的host值==>修改访问时原始路径（默认为true），目标服务器接收的发送端地址（即请求字段中的host字段）：根地址会修改为与目标地址一致 localhost：500x，false则保持发送端的服务器地址 localhost：8080。

changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000

changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080

changeOrigin默认值为true。

说明：

优点：可以配置多个代理，且可以灵活的控制请求是否走代理。

缺点：配置略微繁琐，请求资源时必须加前缀。

实例：

 // const url='http://localhost:5001/students';//（未开启代理）这里是直接请求目标服务器，会出现跨域问题（可以通过配置代理服务器解决）
      /  
         开启代理后（方法一 测试）
        /
      const url='http://localhost:8080/students';
      axios.get(url).then(
          //成功的回调
          response=>{
            console.log("请求成功了");
            console.log(response);
            console.log(response.data);
          },
          //失败的回调
          error=>{
            console.log("请求失败了",error.message);
            console.log(error);
          }
      )
    },