vue中Axios的封裝和API介面的管理
我們所要的說的axios的封裝和api介面的統一管理，其實主要目的就是在幫助我們簡化程式碼和利於後期的更新維護。
一、axios的封裝
在vue專案中，和後臺互動獲取資料這塊，我們通常使用的是axios庫，它是基於promise的http庫，可執行在瀏覽器端和node.js中。他有很多優秀的特性，例如攔截請求和響應、取消請求、轉換json、客戶端防禦XSRF等。所以我們的尤大大也是果斷放棄了對其官方庫vue-resource的維護，直接推薦我們使用axios庫。如果還對axios不瞭解的，可以移步axios文件。
安裝
npm install axios; // 安裝axios
引入
一般我會在專案的src目錄中，新建一個request資料夾，然後在裡面新建一個http.js和一個api.js檔案。http.js檔案用來封裝我們的axios，api.js用來統一管理我們的介面。
// 在http.js中引入axios
import axios from 'axios'; // 引入axios
import QS from 'qs'; // 引入qs模組，用來序列化post型別的資料，後面會提到
// vant的toast提示框元件，大家可根據自己的ui元件更改。
import { Toast } from 'vant';
環境的切換
我們的專案環境可能有開發環境、測試環境和生產環境。我們通過node的環境變數來匹配我們的預設的介面url字首。axios.defaults.baseURL可以設定axios的預設請求地址就不多說了。
// 環境的切換 if (process.env.NODE_ENV == 'development') { axios.defaults.baseURL = 'https://www.baidu.com';} else if (process.env.NODE_ENV == 'debug') { axios.defaults.baseURL = 'https://www.ceshi.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的路徑根據自己的路徑去寫
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({
message: '登入過期，請重新登入',
duration: 1000,
forbidClick: true
});
// 清除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({
message: '網路請求不存在',
duration: 1500,
forbidClick: true
});
break;
// 其他錯誤，直接丟擲錯誤提示
default:
Toast({
message: error.response.data.message,
duration: 1500,
forbidClick: true
});
}
return Promise.reject(error.response);
}
}
});
響應攔截器很好理解，就是伺服器返回給我們的資料，我們在拿到之前可以對他進行一些處理。例如上面的思想：如果後臺返回的狀態碼是200，則正常返回資料，否則的根據錯誤的狀態碼型別進行一些我們需要的錯誤，其實這裡主要就是進行了錯誤的統一處理和沒登入或登入過期後調整登入頁的一個操作。
要注意的是，上面的Toast()方法，是我引入的vant庫中的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的第二個引數就是一個引數物件。兩者略微的區別要留意哦！