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

axios 引入

axios 使用步驟很簡(jiǎn)單，首先在前端項(xiàng)目中，引入 axios：

npm install axios -S

裝好之后，按理說可以直接使用了，但是，一般在生產(chǎn)環(huán)境中，我們都需要對(duì)網(wǎng)絡(luò)請(qǐng)求進(jìn)行封裝。

因?yàn)榫W(wǎng)絡(luò)請(qǐng)求可能會(huì)出錯(cuò)，這些錯(cuò)誤有的是代碼錯(cuò)誤導(dǎo)致的，也有的是業(yè)務(wù)錯(cuò)誤，不管是哪一種錯(cuò)誤，都需要開發(fā)者去處理，而我們不可能在每一次發(fā)送請(qǐng)求時(shí)都去枚舉各種錯(cuò)誤情況。

因此我們需要對(duì)前端請(qǐng)求進(jìn)行封裝，封裝完成后，將前端錯(cuò)誤統(tǒng)一處理，這樣，開發(fā)者只需要在每一次發(fā)送請(qǐng)求的地方處理請(qǐng)求成功的情況即可。

請(qǐng)求封裝

在 axios 中，我們可以使用 axios 自帶的攔截器來實(shí)現(xiàn)對(duì)錯(cuò)誤的統(tǒng)一處理。

在 axios 中，有請(qǐng)求攔截器，也有響應(yīng)攔截器。

請(qǐng)求攔截器中可以統(tǒng)一添加公共的請(qǐng)求參數(shù)，例如單點(diǎn)登錄中前端統(tǒng)一添加 token 參數(shù)。

響應(yīng)攔截器則可以實(shí)現(xiàn)對(duì)錯(cuò)誤的統(tǒng)一處理。

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

封裝后的 axios 如下：

import axios from 'axios'
import {Message} from 'element-ui'
axios.interceptors.request.use(config => {
 return config;
}, err => {
 Message.error({message: '請(qǐng)求超時(shí)!'});
})
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: '服務(wù)器被吃了⊙﹏⊙∥'});
 } else if (err.response.status == 403) {
 Message.error({message: '權(quán)限不足,請(qǐng)聯(lián)系管理員!'});
 } 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: '未知錯(cuò)誤!'});
 }
 }
})

代碼解釋：

1.首先導(dǎo)入 axios 和 Massage 組件
2.接下來定義一個(gè)請(qǐng)求攔截器
3.最后定義一個(gè)響應(yīng)攔截器，這個(gè)攔截器有兩個(gè)參數(shù)，第一個(gè)參數(shù) data 表示服務(wù)端處理成功的響應(yīng)，第二個(gè) err 表示服務(wù)端處理失敗的響應(yīng)。對(duì)照著 jQuery 中的 Ajax ，第一個(gè)相當(dāng)于 success 回調(diào)，第二個(gè)相當(dāng)于 error 回調(diào)。
4.響應(yīng)的 data 表示服務(wù)端返回的數(shù)據(jù)，數(shù)據(jù)格式是 {data:{status:200,msg"",obj:{}},status:200} 其中，data 中的對(duì)象就是服務(wù)端返回的具體的 JSON ，外面的 status 表示 HTTP 響應(yīng)碼，里邊的 status 是自定義的 RespBean 中返回的數(shù)據(jù)
5.首先判斷 HTTP 響應(yīng)碼為 200 ，并且服務(wù)端返回的 status 為 500 ，表示業(yè)務(wù)邏輯錯(cuò)誤，此時(shí)直接通過 Message 將錯(cuò)誤信息展示出來，然后 return 即可。
6.如果服務(wù)端返回的字段中包含 msg ，則將 msg 顯示出來，這個(gè) msg 一般是成功的提示。
7.最后返回 data.data ，即將服務(wù)端返回的數(shù)據(jù) return ，這個(gè)數(shù)據(jù)最終會(huì)來到請(qǐng)求調(diào)用的地方。
8.當(dāng) HTTP 響應(yīng)碼大于等于 400 時(shí)，進(jìn)入 err 中。

方法封裝

請(qǐng)求封裝完成后，還需要對(duì)方法進(jìn)行封裝，方便調(diào)用：

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}`
 });
}

由于在前后端分離項(xiàng)目中，大多數(shù)情況下，后端接口都采用 RESTful 風(fēng)格來設(shè)計(jì)，所以前端主要封裝 GET\POST\PUT\DELETE 方法，然后所有的請(qǐng)求參數(shù)都是用 JSON。

這里一開始定義了一個(gè) base 變量，這是請(qǐng)求的前綴，方便后期維護(hù)（如果需要統(tǒng)一修改請(qǐng)求前綴）。

制作 Vue 插件

封裝好的方法已經(jīng)可以直接使用了，但是比較麻煩，每次使用時(shí)，都需要在相關(guān)的 vue 文件中引入方法，像下面這樣：
import {postRequest} from "../utils/api";

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

參考 Vue 官方文檔 https://cn.vuejs.org/v2/guide/plugins.html，如下：

官方給出了 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 就可以獲取到網(wǎng)絡(luò)請(qǐng)求方法的引用了，如下：

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

注意 ，then 中的 msg 就是響應(yīng)攔截器中返回的 msg ，這個(gè) msg 如果沒有值，表示請(qǐng)求失?。ㄊ∫呀?jīng)在攔截器中進(jìn)行處理了），如果有值，表示請(qǐng)求成功！

配置請(qǐng)求轉(zhuǎn)發(fā)

在前后端分離中，前端和后端在不同的端口或者地址上運(yùn)行，如果前端直接向后端發(fā)送請(qǐng)求，這個(gè)請(qǐng)求是跨域的。

但是在項(xiàng)目部署時(shí)，前端打包編譯后拷貝到 Java 項(xiàng)目中，和 Java 項(xiàng)目一起運(yùn)行，此時(shí)不存在跨域問題。

所以這里我們的解決思路不是解決跨域問題，而是通過配置 NodeJS 的請(qǐng)求轉(zhuǎn)發(fā)，來實(shí)現(xiàn)網(wǎng)絡(luò)請(qǐng)求順利發(fā)送。

請(qǐng)求轉(zhuǎn)發(fā)在 vue 項(xiàng)目的 config/index.js 文件中配置：

添加了請(qǐng)求轉(zhuǎn)發(fā)配置之后，一定要重啟前端項(xiàng)目才會(huì)生效。

此時(shí)啟動(dòng)前端項(xiàng)目，就可以順利發(fā)送網(wǎng)絡(luò)請(qǐng)求了。

總結(jié)

本文主要和大伙分享了在前后端分離的情況下，如何對(duì)前端網(wǎng)絡(luò)請(qǐng)求進(jìn)行封裝，并且如何配置請(qǐng)求轉(zhuǎn)發(fā)，這是前后端分離中的基礎(chǔ)課，小伙伴們有問題歡迎留言討論。松哥將自己封裝的網(wǎng)絡(luò)請(qǐng)求庫已經(jīng)放在 GitHub 上，歡迎大家參考 https://github.com/lenve/javaboy-code-samples。

最新評(píng)論