摘要：今天松哥就帶大家來看看的使用。此時啟動前端項目，就可以順利發送網絡請求了。松哥將自己封裝的網絡請求庫已經放在上，歡迎大家參考。

前端網絡訪問，主流方案就是 Ajax，Vue 也不例外，在 Vue2.0 之前，網絡訪問較多的采用 vue-resources，Vue2.0 之后，官方不再建議使用 vue-resources ，這個項目本身也停止維護，目前建議使用的方案是 axios。今天松哥就帶大家來看看 axios 的使用。

axios 使用步驟很簡單，首先在前端項目中，引入 axios：

npm install axios -S

裝好之后，按理說可以直接使用了，但是，一般在生產環境中，我們都需要對網絡請求進行封裝。

因為網絡請求可能會出錯，這些錯誤有的是代碼錯誤導致的，也有的是業務錯誤，不管是哪一種錯誤，都需要開發者去處理，而我們不可能在每一次發送請求時都去枚舉各種錯誤情況。

因此我們需要對前端請求進行封裝，封裝完成后，將前端錯誤統一處理，這樣，開發者只需要在每一次發送請求的地方處理請求成功的情況即可。

在 axios 中，我們可以使用 axios 自帶的攔截器來實現對錯誤的統一處理。

在 axios 中，有請求攔截器，也有響應攔截器。

請求攔截器中可以統一添加公共的請求參數，例如單點登錄中前端統一添加 token 參數。

響應攔截器則可以實現對錯誤的統一處理。

另外一個需要注意的地方則是錯誤的展示需要使用一種通用的方式，而不可以和頁面綁定（例如，登錄失敗，在用戶名/密碼輸入框后面展示錯誤信息，不支持這種錯誤顯示方式），這里推薦使用 ElementUI 中的 Massage 來展示錯誤信息，這是一個頁面無關的組件。

封裝后的 axios 如下：

import axios from "axios"
import {Message} from "element-ui"
axios.interceptors.request.use(config => {
  return config;
}, err => {
  Message.error({message: "請求超時!"});
})
axios.interceptors.response.use(data => {
  if (data.status && data.status == 200 && data.data.status == 500) {
    Message.error({message: data.data.msg});
    return;
  }
  if (data.data.msg) {
    Message.success({message: data.data.msg});
  }
  return data.data;
}, err => {
  if (err.response.status == 504 || err.response.status == 404) {
    Message.error({message: "服務器被吃了⊙﹏⊙∥"});
  } else if (err.response.status == 403) {
    Message.error({message: "權限不足,請聯系管理員!"});
  } else if (err.response.status == 401) {
    Message.error({message: err.response.data.msg});
  } else {
    if (err.response.data.msg) {
      Message.error({message: err.response.data.msg});
    }else{
      Message.error({message: "未知錯誤!"});
    }
  }
})

代碼解釋：

首先導入 axios 和 Massage 組件

接下來定義一個請求攔截器

最后定義一個響應攔截器，這個攔截器有兩個參數，第一個參數 data 表示服務端處理成功的響應，第二個 err 表示服務端處理失敗的響應。對照著 jQuery 中的 Ajax ，第一個相當于 success 回調，第二個相當于 error 回調。

響應的 data 表示服務端返回的數據，數據格式是 {data:{status:200,msg"",obj:{}},status:200} 其中，data 中的對象就是服務端返回的具體的 JSON ，外面的 status 表示 HTTP 響應碼，里邊的 status 是自定義的 RespBean 中返回的數據

首先判斷 HTTP 響應碼為 200 ，并且服務端返回的 status 為 500 ，表示業務邏輯錯誤，此時直接通過 Message 將錯誤信息展示出來，然后 return 即可。

如果服務端返回的字段中包含 msg ，則將 msg 顯示出來，這個 msg 一般是成功的提示。

最后返回 data.data ，即將服務端返回的數據 return ，這個數據最終會來到請求調用的地方。

當 HTTP 響應碼大于等于 400 時，進入 err 中。

請求封裝完成后，還需要對方法進行封裝，方便調用：

let base = "";
export const postRequest = (url, params) => {
  return axios({
    method: "post",
    url: `${base}${url}`,
    data: params,
    headers: {
      "Content-Type": "application/json"
    }
  });
}
export const putRequest = (url, params) => {
  return axios({
    method: "put",
    url: `${base}${url}`,
    data: params,
    headers: {
      "Content-Type": "application/json"
    }
  });
}
export const deleteRequest = (url) => {
  return axios({
    method: "delete",
    url: `${base}${url}`
  });
}
export const getRequest = (url) => {
  return axios({
    method: "get",
    url: `${base}${url}`
  });
}

由于在前后端分離項目中，大多數情況下，后端接口都采用 RESTful 風格來設計，所以前端主要封裝 GETPOSTPUTDELETE 方法，然后所有的請求參數都是用 JSON。

這里一開始定義了一個 base 變量，這是請求的前綴，方便后期維護（如果需要統一修改請求前綴）。

封裝好的方法已經可以直接使用了，但是比較麻煩，每次使用時，都需要在相關的 vue 文件中引入方法，像下面這樣：

import {postRequest} from "../utils/api";

但是這種操作方式太麻煩，所以我們可以考慮將方法進一步封裝成 Vue 的插件，這樣在每一個 vue 文件中，不需要引入方法就能夠直接調用方法了。

參考 Vue 官方文檔 cn.vuejs.org/v2/guide/pl…

官方給出了 5 種插件制作方式，我們這里采用第 4 種方案。 具體操作就是在 main.js 中引入所有的封裝好的方法，然后掛載到 Vue.prototype 上即可，如下：

import {postRequest} from "./utils/api";
import {putRequest} from "./utils/api";
import {deleteRequest} from "./utils/api";
import {getRequest} from "./utils/api";
Vue.prototype.getRequest = getRequest;
Vue.prototype.deleteRequest = deleteRequest;
Vue.prototype.putRequest = putRequest;
Vue.prototype.postRequest = postRequest;

封裝完成后，以后在 vue 文件中，直接通過 this 就可以獲取到網絡請求方法的引用了，如下：

this.postRequest("/doLogin", this.user).then(msg=>{
  if (msg) {
    //登錄成功，頁面跳轉
  }
})

注意 ，then 中的 msg 就是響應攔截器中返回的 msg ，這個 msg 如果沒有值，表示請求失敗（失敗已經在攔截器中進行處理了），如果有值，表示請求成功！

在前后端分離中，前端和后端在不同的端口或者地址上運行，如果前端直接向后端發送請求，這個請求是跨域的。

但是在項目部署時，前端打包編譯后拷貝到 Java 項目中，和 Java 項目一起運行，此時不存在跨域問題。

所以這里我們的解決思路不是解決跨域問題，而是通過配置 NodeJS 的請求轉發，來實現網絡請求順利發送。

請求轉發在 vue 項目的 config/index.js 文件中配置：

添加了請求轉發配置之后，一定要重啟前端項目才會生效。

此時啟動前端項目，就可以順利發送網絡請求了。

本文主要和大伙分享了在前后端分離的情況下，如何對前端網絡請求進行封裝，并且如何配置請求轉發，這是前后端分離中的基礎課，小伙伴們有問題歡迎留言討論。松哥將自己封裝的網絡請求庫已經放在 GitHub 上，歡迎大家參考 github.com/lenve/javab…。

關注公眾號牧碼小子，專注于 Spring Boot+微服務，定期視頻教程分享，關注后回復 Java ，領取松哥為你精心準備的 Java 干貨！