vue中Axios的封裝和API接口的管理
- 2019 年 10 月 10 日
- 筆記
如圖，面對一團糟代碼的你~~~真的想說，What F~U~C~K！！！
回歸正題，我們所要的說的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的第二個參數就是一個參數對象。兩者略微的區別要留意哦！
axios的封裝基本就完成了，下面再簡單說下api的統一管理。
整齊的api就像電路板一樣，即使再複雜也能很清晰整個線路。上面說了，我們會新建一個api.js,然後在這個文件中存放我們所有的api接口。
/** * api接口統一管理 */ import { get, post } from './http'
現在，例如我們有這樣一個接口，是一個post請求：
http://www.baiodu.com/api/v1/users/my_address/address_edit_before
我們可以在api.js中這樣封裝：
export const apiAddress = p => post('api/v1/users/my_address/address_edit_before', p);
我們定義了一個apiAddress方法，這個方法有一個參數p，p是我們請求接口時攜帶的參數對象。而後調用了我們封裝的post方法，post方法的第一個參數是我們的接口地址，第二個參數是apiAddress的p參數，即請求接口時攜帶的參數對象。最後通過export導出apiAddress。
然後在我們的頁面中可以這樣調用我們的api接口：
import { apiAddress } from '@/request/api';// 導入我們的api接口 export default { name: 'Address', created () { this.onLoad(); }, methods: { // 獲取數據 onLoad() { // 調用api接口，並且提供了兩個參數 apiAddress({ type: 0, sort: 1 }).then(res => { // 獲取數據成功後的其他操作 ……………… }) } } }
其他的api接口，就在pai.js中繼續往下面擴展就可以了。友情提示，為每個接口寫好注釋哦！！！
api接口管理的一個好處就是，我們把api統一集中起來，如果後期需要修改接口，我們就直接在api.js中找到對應的修改就好了，而不用去每一個頁面查找我們的接口然後再修改會很麻煩。關鍵是，萬一修改的量比較大，就規格gg了。還有就是如果直接在我們的業務代碼修改接口，一不小心還容易動到我們的業務代碼造成不必要的麻煩。
好了，最後把完成的axios封裝代碼奉上。
/**axios封裝 * 請求攔截、相應攔截、錯誤統一處理 */ import axios from 'axios';import QS from 'qs'; import { Toast } from 'vant'; import store from '../store/index' // 環境的切換 if (process.env.NODE_ENV == 'development') { axios.defaults.baseURL = '/api'; } else if (process.env.NODE_ENV == 'debug') { axios.defaults.baseURL = ''; } else if (process.env.NODE_ENV == 'production') { axios.defaults.baseURL = 'http://api.123dailu.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({ 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); } } ); /** * 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) }) }); }
如果喜歡，就給個❤❤吧(*^▽^*)
2018.8.14更新
axios的封裝根據需求的不同而不同。這裡非常感謝評論里一些很中肯的建議，我也對此進行了思考和針對不同需求的改善。主要有以下改變：
1.優化axios封裝，去掉之前的get和post
2.斷網情況處理
3.更加模塊化的api管理
4.接口域名有多個的情況
5.api掛載到vue.prototype上省去引入的步驟
http.js中axios封裝的優化，先直接貼代碼：
/** * axios封裝 * 請求攔截、響應攔截、錯誤統一處理 */ import axios from 'axios'; import router from '../router'; import store from '../store/index'; import { Toast } from 'vant'; /** * 提示函數 * 禁止點擊蒙層、顯示一秒後關閉 */ const tip = msg => { Toast({ message: msg, duration: 1000, forbidClick: true }); } /** * 跳轉登錄頁 * 攜帶當前頁面路由，以期在登錄頁面完成登錄後返回當前頁面 */ const toLogin = () => { router.replace({ path: '/login', query: { redirect: router.currentRoute.fullPath } }); } /** * 請求失敗後的錯誤統一處理 * @param {Number} status 請求失敗的狀態碼 */ const errorHandle = (status, other) => { // 狀態碼判斷 switch (status) { // 401: 未登錄狀態，跳轉登錄頁 case 401: toLogin(); break; // 403 token過期 // 清除token並跳轉登錄頁 case 403: tip('登錄過期，請重新登錄'); localStorage.removeItem('token'); store.commit('loginSuccess', null); setTimeout(() => { toLogin(); }, 1000); break; // 404請求不存在 case 404: tip('請求的資源不存在'); break; default: console.log(other); }} // 創建axios實例 var instance = axios.create({ timeout: 1000 * 12}); // 設置post請求頭 instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; /** * 請求攔截器 * 每次請求前，如果存在token則在請求頭中攜帶token */ instance.interceptors.request.use( config => { // 登錄流程控制中，根據本地是否存在token判斷用戶的登錄情況 // 但是即使token存在，也有可能token是過期的，所以在每次的請求頭中攜帶token // 後台根據攜帶的token判斷用戶的登錄情況，並返回給我們對應的狀態碼 // 而後我們可以在響應攔截器中，根據狀態碼進行一些統一的操作。 const token = store.state.token; token && (config.headers.Authorization = token); return config; }, error => Promise.error(error)) // 響應攔截器 instance.interceptors.response.use( // 請求成功 res => res.status === 200 ? Promise.resolve(res) : Promise.reject(res), // 請求失敗 error => { const { response } = error; if (response) { // 請求已發出，但是不在2xx的範圍 errorHandle(response.status, response.data.message); return Promise.reject(response); } else { // 處理斷網的情況 // eg:請求超時或斷網時，更新state的network狀態 // network狀態在app.vue中控制着一個全局的斷網提示組件的顯示隱藏 // 關於斷網組件中的刷新重新獲取數據，會在斷網組件中說明 if (!window.navigator.onLine) { store.commit('changeNetwork', false); } else { return Promise.reject(error); } } }); export default instance;
這個axios和之前的大同小異，做了如下幾點改變：
1.去掉了之前get和post方法的封裝，通過創建一個axios實例然後export default方法導出，這樣使用起來更靈活一些。
2.去掉了通過環境變量控制baseUrl的值。考慮到接口會有多個不同域名的情況，所以準備通過js變量來控制接口域名。這點具體在api里會介紹。
3.增加了請求超時，即斷網狀態的處理。說下思路，當斷網時，通過更新vuex中network的狀態來控制斷網提示組件的顯示隱藏。斷網提示一般會有重新加載數據的操作，這步會在後面對應的地方介紹。
4.公用函數進行抽出，簡化代碼，盡量保證單一職責原則。
下面說下api這塊，考慮到一下需求：
1.更加模塊化
2.更方便多人開發，有效減少解決命名衝突
3.處理接口域名有多個情況
這裡這裡呢新建了一個api文件夾，裏面有一個index.js和一個base.js，以及多個根據模塊劃分的接口js文件。index.js是一個api的出口，base.js管理接口域名，其他js則用來管理各個模塊的接口。
先放index.js代碼：
/** * api接口的統一出口 */ // 文章模塊接口 import article from '@/api/article'; // 其他模塊的接口…… // 導出接口 export default { article, // …… }
index.js是一個api接口的出口，這樣就可以把api接口根據功能劃分為多個模塊，利於多人協作開發，比如一個人只負責一個模塊的開發等，還能方便每個模塊中接口的命名哦。
base.js:
/** * 接口域名的管理 */ const base = { sq: 'https://xxxx111111.com/api/v1', bd: 'http://xxxxx22222.com/api' } export default base;
通過base.js來管理我們的接口域名，不管有多少個都可以通過這裡進行接口的定義。即使修改起來，也是很方便的。
最後就是接口模塊的說明，例如上面的article.js:
/** * article模塊接口列表 */ import base from './base'; // 導入接口域名列表 import axios from '@/utils/http'; // 導入http中創建的axios實例 import qs from 'qs'; // 根據需求是否導入qs模塊 const article = { // 新聞列表 articleList () { return axios.get(`${base.sq}/topics`); }, // 新聞詳情,演示 articleDetail (id, params) { return axios.get(`${base.sq}/topic/${id}`, { params: params }); }, // post提交 login (params) { return axios.post(`${base.sq}/accesstoken`, qs.stringify(params)); } // 其他接口………… } export default article;
1.通過直接引入我們封裝好的axios實例，然後定義接口、調用axios實例並返回，可以更靈活的使用axios，比如你可以對post請求時提交的數據進行一個qs序列化的處理等。
2.請求的配置更靈活，你可以針對某個需求進行一個不同的配置。關於配置的優先級，axios文檔說的很清楚，這個順序是：在 lib/defaults.js 找到的庫的默認值，然後是實例的 defaults 屬性，最後是請求的 config 參數。後者將優先於前者。
3.restful風格的接口，也可以通過這種方式靈活的設置api接口地址。
最後，為了方便api的調用，我們需要將其掛載到vue的原型上。在main.js中：
import Vue from 'vue' import App from './App' import router from './router' // 導入路由文件 import store from './store' // 導入vuex文件 import api from './api' // 導入api接口 Vue.prototype.$api = api; // 將api掛載到vue的原型上
然後我們可以在頁面中這樣調用接口，eg：
methods: { onLoad(id) { this.$api.article.articleDetail(id, { api: 123 }).then(res=> { // 執行某些操作 }) } }
再提一下斷網的處理，這裡只做一個簡單的示例：
<template> <div id="app"> <div v-if="!network"> <h3>我沒網了</h3> <div @click="onRefresh">刷新</div> </div> <router-view/> </div> </template> <script> import { mapState } from 'vuex'; export default { name: 'App', computed: { ...mapState(['network']) }, methods: { // 通過跳轉一個空頁面再返回的方式來實現刷新當前頁面數據的目的 onRefresh () { this.$router.replace('/refresh') } } } </script>
這是app.vue，這裡簡單演示一下斷網。在http.js中介紹了，我們會在斷網的時候，來更新vue中network的狀態，那麼這裡我們根據network的狀態來判斷是否需要加載這個斷網組件。斷網情況下，加載斷網組件，不加載對應頁面的組件。當點擊刷新的時候，我們通過跳轉refesh頁面然後立即返回的方式來實現重新獲取數據的操作。因此我們需要新建一個refresh.vue頁面，並在其beforeRouteEnter鉤子中再返回當前頁面。
// refresh.vue beforeRouteEnter (to, from, next) { next(vm => { vm.$router.replace(from.fullPath) }) }
這是一種全局通用的斷網提示，當然了，也可以根據自己的項目需求操作。具體操作就仁者見仁智者見智了。
如果更多的需求，或者說是不一樣的需求，可以根據自己的需求進行一個改進。
如果感覺對你有幫助，那就收藏❤❤吧！
完
