vue中Axios的封裝與API接口的管理詳解
如圖,面對一團糟代碼的你~~~真的想說,What F~U~C~K?。。?/p>
回歸正題,我們所要的說的axios的封裝和api接口的統(tǒng)一管理,其實主要目的就是在幫助我們簡化代碼和利于后期的更新維護。
一、axios的封裝
在vue項目中,和后臺交互獲取數(shù)據(jù)這塊,我們通常使用的是axios庫,它是基于promise的http庫,可運行在瀏覽器端和node.js中。他有很多優(yōu)秀的特性,例如攔截請求和響應(yīng)、取消請求、轉(zhuǎn)換json、客戶端防御XSRF等。所以我們的尤大大也是果斷放棄了對其官方庫vue-resource的維護,直接推薦我們使用axios庫。如果還對axios不了解的,可以移步axios文檔。
安裝
npm install axios; // 安裝axios
引入
一般我會在項目的src目錄中,新建一個request文件夾,然后在里面新建一個http.js和一個api.js文件。http.js文件用來封裝我們的axios,api.js用來統(tǒng)一管理我們的接口。
// 在http.js中引入axios import axios from 'axios'; // 引入axios import QS from 'qs'; // 引入qs模塊,用來序列化post類型的數(shù)據(jù),后面會提到 // vant的toast提示框組件,大家可根據(jù)自己的ui組件更改。 import { Toast } from 'vant';
環(huán)境的切換
我們的項目環(huán)境可能有開發(fā)環(huán)境、測試環(huán)境和生產(chǎn)環(huán)境。我們通過node的環(huán)境變量來匹配我們的默認的接口url前綴。axios.defaults.baseURL可以設(shè)置axios的默認請求地址就不多說了。
// 環(huán)境的切換 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'; }
設(shè)置請求超時
通過axios.defaults.timeout設(shè)置默認的請求超時時間。例如超過了10s,就會告知用戶當(dāng)前請求超時,請刷新等。
axios.defaults.timeout = 10000;
post請求頭的設(shè)置post請求的時候,我們需要加上一個請求頭,所以可以在這里進行一個默認的設(shè)置,即設(shè)置post的請求頭為application/x-www-form-urlencoded;charset=UTF-8
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
- 請求攔截
我們在發(fā)送請求前可以進行一個請求的攔截,為什么要攔截呢,我們攔截請求是用來做什么的呢?比如,有些請求是需要用戶登錄之后才能訪問的,或者post請求的時候,我們需要序列化我們提交的數(shù)據(jù)。這時候,我們可以在請求被發(fā)送之前進行一個攔截,從而進行我們想要的操作。
請求攔截
// 先導(dǎo)入vuex,因為我們要使用到里面的狀態(tài)對象 // vuex的路徑根據(jù)自己的路徑去寫 import store from '@/store/index'; // 請求攔截器axios.interceptors.request.use( config => { // 每次發(fā)送請求之前判斷vuex中是否存在token // 如果存在,則統(tǒng)一在http請求的header都加上token,這樣后臺根據(jù)token判斷你的登錄情況 // 即使本地存在token,也有可能token是過期的,所以在響應(yīng)攔截器中要對返回狀態(tài)進行判斷 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存在說明用戶已經(jīng)登陸過,則更新vuex中的token狀態(tài)。然后,在每次請求接口的時候,都會在請求的header中攜帶token,后臺人員就可以根據(jù)你攜帶的token來判斷你的登錄是否過期,如果沒有攜帶,則說明沒有登錄過。這時候或許有些小伙伴會有疑問了,就是每個請求都攜帶token,那么要是一個頁面不需要用戶登錄就可以訪問的怎么辦呢?其實,你前端的請求可以攜帶token,但是后臺可以選擇不接收??!
響應(yīng)的攔截
// 響應(yīng)攔截器 axios.interceptors.response.use( response => { // 如果返回的狀態(tài)碼為200,說明接口請求成功,可以正常拿到數(shù)據(jù) // 否則的話拋出錯誤 if (response.status === 200) { return Promise.resolve(response); } else { return Promise.reject(response); } }, // 服務(wù)器狀態(tài)碼不是2開頭的的情況 // 這里可以跟你們的后臺開發(fā)人員協(xié)商好統(tǒng)一的錯誤狀態(tài)碼 // 然后根據(jù)返回的狀態(tài)碼進行一些操作,例如登錄過期提示,錯誤提示等等 // 下面列舉幾個常見的操作,其他需求可自行擴展 error => { if (error.response.status) { switch (error.response.status) { // 401: 未登錄 // 未登錄則跳轉(zhuǎn)登錄頁面,并攜帶當(dāng)前頁面的路徑 // 在登錄成功后返回當(dāng)前頁面,這一步需要在登錄頁操作。 case 401: router.replace({ path: '/login', query: { redirect: router.currentRoute.fullPath } }); break; // 403 token過期 // 登錄過期對用戶進行提示 // 清除本地token和清空vuex中token對象 // 跳轉(zhuǎn)登錄頁面 case 403: Toast({ message: '登錄過期,請重新登錄', duration: 1000, forbidClick: true }); // 清除token localStorage.removeItem('token'); store.commit('loginSuccess', null); // 跳轉(zhuǎn)登錄頁面,并將要瀏覽的頁面fullPath傳過去,登錄成功后跳轉(zhuǎn)需要訪問的頁面 setTimeout(() => { router.replace({ path: '/login', query: { redirect: router.currentRoute.fullPath } }); }, 1000); break; // 404請求不存在 case 404: Toast({ message: '網(wǎng)絡(luò)請求不存在', duration: 1500, forbidClick: true }); break; // 其他錯誤,直接拋出錯誤提示 default: Toast({ message: error.response.data.message, duration: 1500, forbidClick: true }); } return Promise.reject(error.response); } } });
響應(yīng)攔截器很好理解,就是服務(wù)器返回給我們的數(shù)據(jù),我們在拿到之前可以對他進行一些處理。例如上面的思想:如果后臺返回的狀態(tài)碼是200,則正常返回數(shù)據(jù),否則的根據(jù)錯誤的狀態(tài)碼類型進行一些我們需要的錯誤,其實這里主要就是進行了錯誤的統(tǒng)一處理和沒登錄或登錄過期后調(diào)整登錄頁的一個操作。
要注意的是,上面的Toast()方法,是我引入的vant庫中的toast輕提示組件,你根據(jù)你的ui庫,對應(yīng)使用你的一個提示組件。
封裝get方法和post方法
我們常用的ajax請求方法有g(shù)et、post、put等方法,相信小伙伴都不會陌生。axios對應(yīng)的也有很多類似的方法,不清楚的可以看下文檔。但是為了簡化我們的代碼,我們還是要對其進行一個簡單的封裝。下面我們主要封裝兩個方法:get和post。
get方法:我們通過定義一個get函數(shù),get函數(shù)有兩個參數(shù),第一個參數(shù)表示我們要請求的url地址,第二個參數(shù)是我們要攜帶的請求參數(shù)。get函數(shù)返回一個promise對象,當(dāng)axios其請求成功時resolve服務(wù)器返回 值,請求失敗時reject錯誤值。最后通過export拋出get函數(shù)。
/** * get方法,對應(yīng)get請求 * @param {String} url [請求的url地址] * @param {Object} params [請求時攜帶的參數(shù)] */ 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方法必須要使用對提交從參數(shù)對象進行序列化的操作,所以這里我們通過node的qs模塊來序列化我們的參數(shù)。這個很重要,如果沒有序列化操作,后臺是拿不到你提交的數(shù)據(jù)的。這就是文章開頭我們import QS from 'qs';的原因。如果不明白序列化是什么意思的,就百度一下吧,答案一大堆。
/** * post方法,對應(yīng)post請求 * @param {String} url [請求的url地址] * @param {Object} params [請求時攜帶的參數(shù)] */ 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) }) }); }
這里有個小細節(jié)說下,axios.get()方法和axios.post()在提交數(shù)據(jù)時參數(shù)的書寫方式還是有區(qū)別的。區(qū)別就是,get的第二個參數(shù)是一個{},然后這個對象的params屬性值是一個參數(shù)對象的。而post的第二個參數(shù)就是一個參數(shù)對象。兩者略微的區(qū)別要留意哦!
axios的封裝基本就完成了,下面再簡單說下api的統(tǒng)一管理。
整齊的api就像電路板一樣,即使再復(fù)雜也能很清晰整個線路。上面說了,我們會新建一個api.js,然后在這個文件中存放我們所有的api接口。
首先我們在api.js中引入我們封裝的get和post方法
/** * api接口統(tǒng)一管理 */ import { get, post } from './http'
現(xiàn)在,例如我們有這樣一個接口,是一個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方法,這個方法有一個參數(shù)p,p是我們請求接口時攜帶的參數(shù)對象。而后調(diào)用了我們封裝的post方法,post方法的第一個參數(shù)是我們的接口地址,第二個參數(shù)是apiAddress的p參數(shù),即請求接口時攜帶的參數(shù)對象。最后通過export導(dǎo)出apiAddress。
然后在我們的頁面中可以這樣調(diào)用我們的api接口:
import { apiAddress } from '@/request/api';// 導(dǎo)入我們的api接口 export default { name: 'Address', created () { this.onLoad(); }, methods: { // 獲取數(shù)據(jù) onLoad() { // 調(diào)用api接口,并且提供了兩個參數(shù) apiAddress({ type: 0, sort: 1 }).then(res => { // 獲取數(shù)據(jù)成功后的其他操作 ……………… }) } } }
其他的api接口,就在pai.js中繼續(xù)往下面擴展就可以了。友情提示,為每個接口寫好注釋哦?。。pi接口管理的一個好處就是,我們把api統(tǒng)一集中起來,如果后期需要修改接口,我們就直接在api.js中找到對應(yīng)的修改就好了,而不用去每一個頁面查找我們的接口然后再修改會很麻煩。關(guān)鍵是,萬一修改的量比較大,就規(guī)格gg了。還有就是如果直接在我們的業(yè)務(wù)代碼修改接口,一不小心還容易動到我們的業(yè)務(wù)代碼造成不必要的麻煩。
好了,最后把完成的axios封裝代碼奉上。
/**axios封裝 * 請求攔截、相應(yīng)攔截、錯誤統(tǒng)一處理 */ import axios from 'axios';import QS from 'qs'; import { Toast } from 'vant'; import store from '../store/index' // 環(huán)境的切換 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 => { // 每次發(fā)送請求之前判斷是否存在token,如果存在,則統(tǒng)一在http請求的header都加上token,不用每次請求都手動添加了 // 即使本地存在token,也有可能token是過期的,所以在響應(yīng)攔截器中要對返回狀態(tài)進行判斷 const token = store.state.token; token && (config.headers.Authorization = token); return config; }, error => { return Promise.error(error); }) // 響應(yīng)攔截器 axios.interceptors.response.use( response => { if (response.status === 200) { return Promise.resolve(response); } else { return Promise.reject(response); } }, // 服務(wù)器狀態(tài)碼不是200的情況 error => { if (error.response.status) { switch (error.response.status) { // 401: 未登錄 // 未登錄則跳轉(zhuǎn)登錄頁面,并攜帶當(dāng)前頁面的路徑 // 在登錄成功后返回當(dāng)前頁面,這一步需要在登錄頁操作。 case 401: router.replace({ path: '/login', query: { redirect: router.currentRoute.fullPath } }); break; // 403 token過期 // 登錄過期對用戶進行提示 // 清除本地token和清空vuex中token對象 // 跳轉(zhuǎn)登錄頁面 case 403: Toast({ message: '登錄過期,請重新登錄', duration: 1000, forbidClick: true }); // 清除token localStorage.removeItem('token'); store.commit('loginSuccess', null); // 跳轉(zhuǎn)登錄頁面,并將要瀏覽的頁面fullPath傳過去,登錄成功后跳轉(zhuǎn)需要訪問的頁面 setTimeout(() => { router.replace({ path: '/login', query: { redirect: router.currentRoute.fullPath } }); }, 1000); break; // 404請求不存在 case 404: Toast({ message: '網(wǎng)絡(luò)請求不存在', duration: 1500, forbidClick: true }); break; // 其他錯誤,直接拋出錯誤提示 default: Toast({ message: error.response.data.message, duration: 1500, forbidClick: true }); } return Promise.reject(error.response); } } ); /** * get方法,對應(yīng)get請求 * @param {String} url [請求的url地址] * @param {Object} params [請求時攜帶的參數(shù)] */ 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方法,對應(yīng)post請求 * @param {String} url [請求的url地址] * @param {Object} params [請求時攜帶的參數(shù)] */ 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) }) }); }
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關(guān)文章
vue中調(diào)用百度地圖獲取經(jīng)緯度的實現(xiàn)
最近做個項目,需要實現(xiàn)獲取當(dāng)前位置的經(jīng)緯度,所以本文主要介紹了vue中調(diào)用百度地圖獲取經(jīng)緯度的實現(xiàn),文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-08-08Vue3響應(yīng)式高階用法之shallowReadonly()使用
在前端開發(fā)中,Vue3的shallowReadonly() API允許開發(fā)者創(chuàng)建部分只讀的狀態(tài),這對于保持頂層屬性不變而內(nèi)部屬性可變的場景非常有用,本文將詳細介紹?shallowReadonly()?的使用方法及其應(yīng)用場景,具有一定的參考價值,感興趣的可以了解一下2024-09-09vue3?element?plus?table?selection展示數(shù)據(jù),默認選中功能方式
這篇文章主要介紹了vue3?element?plus?table?selection展示數(shù)據(jù),默認選中功能方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07vue實現(xiàn)一個獲取按鍵展示快捷鍵效果的Input組件
這篇文章主要介紹了vue如何實現(xiàn)一個獲取按鍵展示快捷鍵效果的Input組件,幫助大家更好的理解和使用vue框架,感興趣的朋友可以了解下2021-01-01