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 使用廣泛，官方已不維護