关于vue.js:Vue-中的-Ajax

1.1 应用代理服务器

1.1.1 形式一

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

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

阐明：

1. 长处：配置简略，申请资源时间接发给前端（8080）即可。
2. 毛病：不能配置多个代理，不能灵便的管制申请是否走代理。
3. 工作形式：若依照上述配置代理，当申请了前端不存在的资源时，那么该申请会转发给服务器（优先匹配前端资源）

1.1.2 形式二

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

module.exports = {
    devServer: {
        proxy: {
            '/api1': {
                // 匹配所有以 '/api1' 结尾的申请门路
                target: 'http://localhost:5000',// 代理指标的根底门路
                changeOrigin: true,
                pathRewrite: {'^/api1': ''}
            },
            '/api2': {
                // 匹配所有以 '/api2' 结尾的申请门路
                target: 'http://localhost:5001',// 代理指标的根底门路
                changeOrigin: true,
                pathRewrite: {'^/api2': ''}
            }
        }
    }
}
/*
changeOrigin 设置为 true 时，服务器收到的申请头中的 host 为：localhost:5000
changeOrigin 设置为 false 时，服务器收到的申请头中的 host 为：localhost:8080
changeOrigin 默认值为 true
*/

阐明：

1. 长处：能够配置多个代理，且能够灵便的管制申请是否走代理。
2. 毛病：配置稍微繁琐，申请资源时必须加前缀。

1.2 Vue 我的项目中罕用的 2 个 Ajax 库

1.2.1 Axios

1. 阐明：通用的 Ajax 申请库，官网举荐，应用宽泛
2. 装置：npm install axios

3. 应用步骤：

   1. 引入

      import axios from "axios";

   2. 应用

      axios.get("http://localhost:8080/api/students").then((response) => {console.log("申请胜利了", response.data);
          },
          (error) => {console.log("申请失败了", error.message);
          }
      );

1.2.2 vue-resource

Vue 插件库，Vue 1.x 应用宽泛， 官网已不保护