此次封裝分為初級版和進階版兩部分，初級版可做練手使用。實際上， axios 封裝與否皆可做專案，在元件內正常發起請求也是最原始的方式，但隨著前端的發展越來越快，專案體量的增大，必然會更加需要模組化的思想，在這裡把 axios 看做一個發起請求的模組即可...
準備工作
目錄結構初始化
首先，假設你的目錄結構如圖：
每個人可能有不同的程式碼目錄，這個不同強求完全一致，理解封裝思想即可。
至於每個目錄結構是做什麼的，傳送門從零使用vue-cli3+webpack4搭建專案
axios簡單介紹
在 vue 專案中，和後臺互動獲取資料這塊，我們通常使用的是 axios 庫，它是基於 promise 的 http 庫，可執行在瀏覽器端和 node.js 中。他有很多優秀的特性，例如攔截請求和響應、取消請求、轉換 json 、客戶端防禦 XSRF 等。所以 vue 作者也是果斷放棄了對其官方庫 vue-resource 的維護，直接推薦我們使用 axios 庫。如果還對 axios 不瞭解的，可以移步axios文件。
安裝axios
npm install axios
複製程式碼初級版axios封裝
有 vue 封裝經驗的小夥伴請跳過初級部分，直接檢視進階版即可。
在config中index.js中的內容
node 中 qs 的知識點請參考官方文件
** qs.parse() 將 URL 解析成物件的形式 qs.stringify() 將物件序列化成 URL 的形式，以 & 進行拼接**
import axios from "axios";
import qs from "qs";
// 延時時間
const http = axios.create({
//baseURL:"XXXX",
timeout: 5000
})
//請求攔截
http.interceptors.request.use((config) => {
// post請求對請求資料進行序列化
if (config.method === "post") {
config.data = qs.stringify(config.data);
}
return config;
}, (err) => {
return Promise.reject(err);
})
//響應攔截
http.interceptors.response.use((res) => {
return res.data;
}, (err) => {
return Promise.reject(err);
})
export default (method, url, data = null) => {
if (method == "post") {
return http.post(url, data);
} else if (method == "get") {
return http.get(url, {
params: data
});
} else {
return;
}
}
複製程式碼API統一管控
在api資料夾login.js中對請求的管控，如果專案龐大，分檔案管控請求更方便，login.js統一管控登入介面：
// 引入
import http from "../config/index.js"
const RegCode = (arg) => http("post","/node/user/getCode", arg)
const Register=(arg)=>http("post","/node/user/register",arg)
const LoginBtn=(arg)=>http("post","/node/user/login",arg)
let Login={
RegCode,
Register,
LoginBtn
}
// 匯出
export default Login
複製程式碼在vuex中login.js的使用方式
import Login from "../../api/login"
const state = {
loginState: false
}
// 在actions中做非同步請求，通過async、await可是非同步請求同步執行
const actions = {
async actionLogin({
commit
}, params) {
let loginData = await Login.LoginBtn(params)
commit("mutateLogin", loginData)
}
}
const mutations = {
mutateLogin(state, params) {
if (params.state = 1) {
state.loginState = true
alert('login success')
} else {
alert('login fail')
}
}
}
export default {
state,
mutations,
actions,
namespaced: true
}
複製程式碼在其他需使用的元件裡直接呼叫即可
/* 新建了一個非常簡易的模板，便於理解 */
<template>
<div id='app'>
<div @click="handlerLogin">登入</div>
</div>
</template>
<script>
//匯入元件
import Vuex from "vuex"
export default {
name: 'App',
methods: {
...Vuex.mapActions({
handlerLogin: "login/actionLogin"
})
}
}
</script>
<style>
/* 樣式程式碼 */
#app {
}
</style>
複製程式碼以上，初級版的axios封裝已完成。
進階版axios封裝
此部分會更詳細一些，希望大家多提建議。
引入( config 資料夾下的 index.js 中)
// 在http.js中引入axios
import axios from 'axios'
// 引入qs模組，用來序列化post型別的資料
import QS from 'qs'
// mint-ui的toast提示框元件，大家可根據自己的ui元件更改
import { Toast } from 'mint-ui';
複製程式碼專案中如何使用mint-ui，請參考官方文件
環境的切換
我們的專案環境可能有開發環境、測試環境和生產環境。我們通過node的環境變數來匹配我們的預設的介面url字首。axios.defaults.baseURL可以設定axios的預設請求地址就不多說了。
// 環境的切換
if (process.env.NODE_ENV === 'development') {
axios.defaults.baseURL = 'https://www.development.com';}
else if (process.env.NODE_ENV === 'test') {
axios.defaults.baseURL = 'https://www.test.com'
}
else if (process.env.NODE_ENV === 'production') {
axios.defaults.baseURL = 'https://www.production.com'
}
複製程式碼設定請求超時
通過axios.defaults.timeout設定預設的請求超時時間。例如超過了10s，就會告知使用者當前請求超時，請重新整理等。
axios.defaults.timeout = 10000;
複製程式碼post請求頭的設定
post請求的時候，我們需要加上一個請求頭，所以可以在這裡進行一個預設的設定，即設定post的請求頭為application/x-www-form-urlencoded;charset=UTF-8
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
複製程式碼請求攔截
我們在傳送請求前可以進行一個請求的攔截，為什麼要攔截呢，我們攔截請求是用來做什麼的呢？比如，有些請求是需要使用者登入之後才能訪問的，或者post請求的時候，我們需要序列化我們提交的資料。這時候，我們可以在請求被髮送之前進行一個攔截，從而進行我們想要的操作。
// 先匯入vuex,因為我們要使用到裡面的狀態物件
// vuex的路徑根據自己的路徑去寫，token儘量寫成本地儲存的形式，不然的話vuex重新整理之後就沒有了
import store from '@/store/index';
// 請求攔截器
axios.interceptors.request.use( config => {
// 每次傳送請求之前判斷vuex中是否存在token
// 如果存在，則統一在http請求的header都加上token，這樣後臺根據token判斷你的登入情況
// 即使本地存在token，也有可能token是過期的，所以在響應攔截器中要對返回狀態進行判斷
const token = store.state.token
token && (config.headers.Authorization = token)
return config
}, error => {
return Promise.error(error)
})
複製程式碼這裡說一下token，一般是在登入完成之後，將使用者的token通過localStorage或者cookie存在本地，然後使用者每次在進入頁面的時候（即在main.js中），會首先從本地儲存中讀取token，如果token存在說明使用者已經登陸過，則更新vuex中的token狀態。然後，在每次請求介面的時候，都會在請求的header中攜帶token，後臺人員就可以根據你攜帶的token來判斷你的登入是否過期，如果沒有攜帶，則說明沒有登入過。這時候或許有些小夥伴會有疑問了，就是每個請求都攜帶token，那麼要是一個頁面不需要使用者登入就可以訪問的怎麼辦呢？其實，你前端的請求可以攜帶token，但是後臺可以選擇不接收啊！
響應攔截
// 響應攔截器
axios.interceptors.response.use(
response => {
// 如果返回的狀態碼為200，說明介面請求成功，可以正常拿到資料
// 否則的話丟擲錯誤
if (response.status === 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
},
// 伺服器狀態碼不是2開頭的的情況
// 這裡可以跟你們的後臺開發人員協商好統一的錯誤狀態碼
// 然後根據返回的狀態碼進行一些操作，例如登入過期提示，錯誤提示等等
// 下面列舉幾個常見的操作，其他需求可自行擴充套件
error => {
if (error.response.status) {
switch (error.response.status) {
// 401: 未登入
// 未登入則跳轉登入頁面，並攜帶當前頁面的路徑
// 在登入成功後返回當前頁面，這一步需要在登入頁操作。
case 401:
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
break;
// 403 token過期
// 登入過期對使用者進行提示
// 清除本地token和清空vuex中token物件
// 跳轉登入頁面
case 403:
Toast('登入過期，請重新登入');
// 清除token
localStorage.removeItem('token');
store.commit('loginSuccess', null);
// 跳轉登入頁面，並將要瀏覽的頁面fullPath傳過去，登入成功後跳轉需要訪問的頁面
setTimeout(() => {
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
}, 1000);
break;
// 404請求不存在
case 404:
Toast('網路請求不存在');
break;
// 其他錯誤，直接丟擲錯誤提示
default:
Toast(error.response.data.message);
}
return Promise.reject(error.response);
}
}
});
複製程式碼要注意的是，上面的Toast()方法，是我引入的mint-ui庫中的toast輕提示元件，你可根據你的ui庫，對應使用你的一個提示元件。
封裝get方法和post方法
我們常用的ajax請求方法有get、post、put等方法，相信小夥伴都不會陌生。axios對應的也有很多類似的方法，不清楚的可以看下文件。但是為了簡化我們的程式碼，我們還是要對其進行一個簡單的封裝。下面我們主要封裝兩個方法：get和post。 get方法：我們通過定義一個get函式，get函式有兩個引數，第一個參數列示我們要請求的url地址，第二個引數是我們要攜帶的請求引數。get函式返回一個promise物件，當axios其請求成功時resolve伺服器返回 值，請求失敗時reject錯誤值。最後通過export丟擲get函式。
/**
* get方法，對應get請求
* @param {String} url [請求的url地址]
* @param {Object} params [請求時攜帶的引數]
*/
export function get(url, params){
return new Promise((resolve, reject) =>{
axios.get(url, {
params: params
}).then(res => {
resolve(res.data);
}).catch(err =>{
reject(err.data)
})
});}
複製程式碼post方法：原理同get基本一樣，但是要注意的是，post方法必須要使用對提交從引數物件進行序列化的操作，所以這裡我們通過node的qs模組來序列化我們的引數。這個很重要，如果沒有序列化操作，後臺是拿不到你提交的資料的。這就是文章開頭我們import QS from 'qs';的原因。
/**
* post方法，對應post請求
* @param {String} url [請求的url地址]
* @param {Object} params [請求時攜帶的引數]
*/
export function post(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, QS.stringify(params))
.then(res => {
resolve(res.data);
})
.catch(err =>{
reject(err.data)
})
});
}
複製程式碼這裡有個小細節說下，axios.get()方法和axios.post()在提交資料時引數的書寫方式還是有區別的。區別就是，get的第二個引數是一個{}，然後這個物件的params屬性值是一個引數物件的。而post的第二個引數就是一個引數物件。兩者略微的區別要留意哦！
api統一管理
上面說了，我們會在api資料夾統一管控請求介面。 首先我們在login.js中引入我們封裝的get和post方法。
/**
* api介面統一管理
*/
import { get, post } from './http'
複製程式碼現在，例如我們有這樣一個介面，是一個post請求：
http://www.baidu.com/api/login
複製程式碼在login.js中這樣封裝
export const login= p => post('api/login', p);
複製程式碼我們定義了一個login方法，這個方法有一個引數p，p是我們請求介面時攜帶的引數物件。而後呼叫了我們封裝的post方法，post方法的第一個引數是我們的介面地址，第二個引數是login的p引數，即請求介面時攜帶的引數物件。最後通過export匯出login。 然後在我們的頁面中可以這樣呼叫我們的api介面：(如果想使用初級版裡面的呼叫方式是一樣的，初級版不過是將非同步轉為同步了)
import { login } from '../../api/login.js';// 匯入我們的api介面
export default {
name: 'Address',
created () {
this.onLoad();
},
methods: {
// 獲取資料
onLoad() {
// 呼叫api介面，並且提供了兩個引數
login({
username:xxx,
password:xxx
}).then(res => {
// 獲取資料成功後的其他操作
………………
})
}
}
}
複製程式碼其他的api介面，像login.js一樣擴充套件即可。友情提示，為每個介面寫好註釋哦！！！api介面管理的一個好處就是，我們把api統一集中起來，如果後期需要修改介面，我們就直接在api中找到對應的修改就好了，而不用去每一個頁面查詢我們的介面然後再修改會很麻煩。關鍵是，萬一修改的量比較大，就呵呵噠了。還有就是如果直接在我們的業務程式碼修改介面，一不小心還容易動到我們的業務程式碼造成不必要的麻煩。
好了，最後把完成的axios封裝程式碼奉上。
/**axios封裝
* 請求攔截、相應攔截、錯誤統一處理
*/
import axios from 'axios';
import QS from 'qs';
import { Toast } from 'mint-ui';
import store from '../store/index'
// 環境的切換
if (process.env.NODE_ENV === 'development') {
axios.defaults.baseURL = 'http://www.dev.com';
} else if (process.env.NODE_ENV === 'test') {
axios.defaults.baseURL = 'http://www.test.com';
} else if (process.env.NODE_ENV === 'production') {
axios.defaults.baseURL = 'http://www.pro.com';
}
// 請求超時時間
axios.defaults.timeout = 10000;
// post請求頭
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
// 請求攔截器
axios.interceptors.request.use(
config => {
// 每次傳送請求之前判斷是否存在token，如果存在，則統一在http請求的header都加上token，不用每次請求都手動新增了
// 即使本地存在token，也有可能token是過期的，所以在響應攔截器中要對返回狀態進行判斷
const token = store.state.token;
token && (config.headers.Authorization = token);
return config;
},
error => {
return Promise.error(error);
})
// 響應攔截器
axios.interceptors.response.use(
response => {
if (response.status === 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
},
// 伺服器狀態碼不是200的情況
error => {
if (error.response.status) {
switch (error.response.status) {
// 401: 未登入
// 未登入則跳轉登入頁面，並攜帶當前頁面的路徑
// 在登入成功後返回當前頁面，這一步需要在登入頁操作。
case 401:
router.replace({
path: '/login',
query: { redirect: router.currentRoute.fullPath }
});
break;
// 403 token過期
// 登入過期對使用者進行提示
// 清除本地token和清空vuex中token物件
// 跳轉登入頁面
case 403:
Toast('登入過期，請重新登入');
// 清除token
localStorage.removeItem('token');
store.commit('loginSuccess', null); // 不太懂的話可不對狀態碼進行操作
// 跳轉登入頁面，並將要瀏覽的頁面fullPath傳過去，登入成功後跳轉需要訪問的頁面
setTimeout(() => {
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
}, 1000);
break;
// 404請求不存在
case 404:
Toast('網路請求不存在');
break;
// 其他錯誤，直接丟擲錯誤提示
default:
Toast(error.response.data.message);
}
return Promise.reject(error.response);
}
}
);
/**
* get方法，對應get請求
* @param {String} url [請求的url地址]
* @param {Object} params [請求時攜帶的引數]
*/
export function get(url, params){
return new Promise((resolve, reject) =>{
axios.get(url, {
params: params
})
.then(res => {
resolve(res.data);
})
.catch(err => {
reject(err.data)
})
});
}
/**
* post方法，對應post請求
* @param {String} url [請求的url地址]
* @param {Object} params [請求時攜帶的引數]
*/
export function post(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, QS.stringify(params))
.then(res => {
resolve(res.data);
})
.catch(err => {
reject(err.data)
})
});
}
複製程式碼總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流。
你的贊是我前進的動力
求贊，求評論，求分享...