vue中Axios的封裝與API接口的管理詳解
如圖，面對一團糟代碼的你~~~真的想說，What F~U~C~K！??！
回歸正題，我們所要的說的axios的封裝和api接口的統(tǒng)一管理，其實主要目的就是在幫助我們簡化代碼和利于后期的更新維護。
一、axios的封裝
在vue項目中，和后臺交互獲取數(shù)據(jù)這塊，我們通常使用的是axios庫，它是基于promise的http庫，可運行在瀏覽器端和node.js中。他有很多優(yōu)秀的特性，例如攔截請求和響應、取消請求、轉換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可以設置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';
}
設置請求超時
通過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';
- 請求攔截
我們在發(fā)送請求前可以進行一個請求的攔截，為什么要攔截呢，我們攔截請求是用來做什么的呢？比如，有些請求是需要用戶登錄之后才能訪問的，或者post請求的時候，我們需要序列化我們提交的數(shù)據(jù)。這時候，我們可以在請求被發(fā)送之前進行一個攔截，從而進行我們想要的操作。
請求攔截
// 先導入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是過期的，所以在響應攔截器中要對返回狀態(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，但是后臺可以選擇不接收??！
響應的攔截
// 響應攔截器
axios.interceptors.response.use(
response => {
// 如果返回的狀態(tài)碼為200，說明接口請求成功，可以正常拿到數(shù)據(jù)
// 否則的話拋出錯誤
if (response.status === 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
},
// 服務器狀態(tài)碼不是2開頭的的情況
// 這里可以跟你們的后臺開發(fā)人員協(xié)商好統(tǒng)一的錯誤狀態(tài)碼
// 然后根據(jù)返回的狀態(tài)碼進行一些操作，例如登錄過期提示，錯誤提示等等
// 下面列舉幾個常見的操作，其他需求可自行擴展
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: '網(wǎng)絡請求不存在',
duration: 1500,
forbidClick: true
});
break;
// 其他錯誤，直接拋出錯誤提示
default:
Toast({
message: error.response.data.message,
duration: 1500,
forbidClick: true
});
}
return Promise.reject(error.response);
}
}
});
響應攔截器很好理解，就是服務器返回給我們的數(shù)據(jù)，我們在拿到之前可以對他進行一些處理。例如上面的思想：如果后臺返回的狀態(tài)碼是200，則正常返回數(shù)據(jù)，否則的根據(jù)錯誤的狀態(tài)碼類型進行一些我們需要的錯誤，其實這里主要就是進行了錯誤的統(tǒng)一處理和沒登錄或登錄過期后調整登錄頁的一個操作。
要注意的是，上面的Toast()方法，是我引入的vant庫中的toast輕提示組件，你根據(jù)你的ui庫，對應使用你的一個提示組件。
封裝get方法和post方法
我們常用的ajax請求方法有get、post、put等方法，相信小伙伴都不會陌生。axios對應的也有很多類似的方法，不清楚的可以看下文檔。但是為了簡化我們的代碼，我們還是要對其進行一個簡單的封裝。下面我們主要封裝兩個方法：get和post。
get方法：我們通過定義一個get函數(shù)，get函數(shù)有兩個參數(shù)，第一個參數(shù)表示我們要請求的url地址，第二個參數(shù)是我們要攜帶的請求參數(shù)。get函數(shù)返回一個promise對象，當axios其請求成功時resolve服務器返回 值，請求失敗時reject錯誤值。最后通過export拋出get函數(shù)。
/**
* get方法，對應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方法，對應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就像電路板一樣，即使再復雜也能很清晰整個線路。上面說了，我們會新建一個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ù)對象。而后調用了我們封裝的post方法，post方法的第一個參數(shù)是我們的接口地址，第二個參數(shù)是apiAddress的p參數(shù)，即請求接口時攜帶的參數(shù)對象。最后通過export導出apiAddress。
然后在我們的頁面中可以這樣調用我們的api接口：
import { apiAddress } from '@/request/api';// 導入我們的api接口
export default {
name: 'Address',
created () {
this.onLoad();
},
methods: {
// 獲取數(shù)據(jù)
onLoad() {
// 調用api接口，并且提供了兩個參數(shù)
apiAddress({
type: 0,
sort: 1
}).then(res => {
// 獲取數(shù)據(jù)成功后的其他操作
………………
})
}
}
}
其他的api接口，就在pai.js中繼續(xù)往下面擴展就可以了。友情提示，為每個接口寫好注釋哦?。?！api接口管理的一個好處就是，我們把api統(tǒng)一集中起來，如果后期需要修改接口，我們就直接在api.js中找到對應的修改就好了，而不用去每一個頁面查找我們的接口然后再修改會很麻煩。關鍵是，萬一修改的量比較大，就規(guī)格gg了。還有就是如果直接在我們的業(yè)務代碼修改接口，一不小心還容易動到我們的業(yè)務代碼造成不必要的麻煩。
好了，最后把完成的axios封裝代碼奉上。
/**axios封裝
* 請求攔截、相應攔截、錯誤統(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是過期的，所以在響應攔截器中要對返回狀態(tài)進行判斷
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);
}
},
// 服務器狀態(tài)碼不是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: '網(wǎng)絡請求不存在',
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 [請求時攜帶的參數(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方法，對應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)
})
});
}
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關文章
這篇文章主要介紹了vue-router 路由傳參用法,結合實例形式分析了vue-router 路由傳參基本使用方法及操作注意事項,需要的朋友可以參考下2020-03-03
vue element-ui table組件動態(tài)生成表頭和數(shù)據(jù)并修改單元格格式 父子組件通信
這篇文章主要介紹了vue element-ui table組件動態(tài)生成表頭和數(shù)據(jù)并修改單元格格式 父子組件通信,需要的朋友可以參考下2019-08-08
vue中提供了一種混合機制--mixins，用來更高效的實現(xiàn)組件內容的復用。下面給大家談談我對vue中mixin的一點理解，需要的朋友參考下吧2017-12-12
Vue基于iview實現(xiàn)登錄密碼的顯示與隱藏功能
這篇文章主要介紹了Vue基于iview實現(xiàn)登錄密碼的顯示與隱藏功能,本文通過截圖實例代碼說明給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-03-03
el-descriptions引入代碼中l(wèi)abel不生效問題及解決
這篇文章主要介紹了el-descriptions引入代碼中l(wèi)abel不生效問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
vue+element-ui實現(xiàn)表格編輯的三種實現(xiàn)方式
這篇文章主要介紹了vue+element-ui實現(xiàn)表格編輯的三種實現(xiàn)方式，主要有表格內部顯示和編輯切換，通過彈出另外一個表格編輯和直接通過樣式控制三種方式，感興趣的小伙伴們可以參考一下2018-10-10
最近在自己寫頁面,然后寫登錄注冊UI的時候需要一個驗證碼組件,去搜一下沒找到什么合適的,于是自己寫一個,這篇文章主要給大家介紹了關于Vue實現(xiàn)驗證碼登錄的相關資料,需要的朋友可以參考下2022-03-03
vue中$router.back()和$router.go()的用法
這篇文章主要介紹了vue中$router.back()和$router.go()的用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
在現(xiàn)代前端開發(fā)中,Vue.js以其高效的響應式數(shù)據(jù)綁定和視圖更新機制著稱,而這一切的核心技術之一就是虛擬DOM和Diff算法,本文將詳細介紹虛擬DOM的概念、Diff算法的工作原理,以及Vue如何利用這些技術高效地更新UI,需要的朋友可以參考下2025-02-02
本文主要介紹了QT和vue交互的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07