建站
咨詢
售后
建站咨詢
新聞中心
如圖，面對一團(tuán)糟代碼的你~~~真的想說，What F~U~C~K?。。?/p>
專注于為中小企業(yè)提供成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)達(dá)孜免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了成百上千企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
回歸正題，我們所要的說的axios的封裝和api接口的統(tǒng)一管理，其實(shí)主要目的就是在幫助我們簡化代碼和利于后期的更新維護(hù)。
一、axios的封裝
在vue項(xiàng)目中，和后臺交互獲取數(shù)據(jù)這塊，我們通常使用的是axios庫，它是基于promise的http庫，可運(yùn)行在瀏覽器端和node.js中。他有很多優(yōu)秀的特性，例如攔截請求和響應(yīng)、取消請求、轉(zhuǎn)換json、客戶端防御XSRF等。所以我們的尤大大也是果斷放棄了對其官方庫vue-resource的維護(hù)，直接推薦我們使用axios庫。如果還對axios不了解的，可以移步axios文檔。
安裝
- npm install axios; // 安裝axios
引入
一般我會在項(xiàng)目的src目錄中，新建一個(gè)request文件夾，然后在里面新建一個(gè)http.js和一個(gè)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)境的切換
我們的項(xiàng)目環(huán)境可能有開發(fā)環(huán)境、測試環(huán)境和生產(chǎn)環(huán)境。我們通過node的環(huán)境變量來匹配我們的默認(rèn)的接口url前綴。axios.defaults.baseURL可以設(shè)置axios的默認(rèn)請求地址就不多說了。
- // 環(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è)置請求超時(shí)
通過axios.defaults.timeout設(shè)置默認(rèn)的請求超時(shí)時(shí)間。例如超過了10s，就會告知用戶當(dāng)前請求超時(shí)，請刷新等。
- axios.defaults.timeout = 10000;
post請求頭的設(shè)置
post請求的時(shí)候，我們需要加上一個(gè)請求頭，所以可以在這里進(jìn)行一個(gè)默認(rèn)的設(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ā)送請求前可以進(jìn)行一個(gè)請求的攔截，為什么要攔截呢，我們攔截請求是用來做什么的呢？比如，有些請求是需要用戶登錄之后才能訪問的，或者post請求的時(shí)候，我們需要序列化我們提交的數(shù)據(jù)。這時(shí)候，我們可以在請求被發(fā)送之前進(jìn)行一個(gè)攔截，從而進(jìn)行我們想要的操作。
請求攔截
- // 先導(dǎo)入vuex,因?yàn)槲覀円褂玫嚼锩娴臓顟B(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)進(jìn)行判斷
- const token = store.state.token;
- token && (config.headers.Authorization = token);
- return config;
- },
- error => {
- return Promise.error(error);
- })
這里說一下token，一般是在登錄完成之后，將用戶的token通過localStorage或者cookie存在本地，然后用戶每次在進(jìn)入頁面的時(shí)候（即在main.js中），會首先從本地存儲中讀取token，如果token存在說明用戶已經(jīng)登陸過，則更新vuex中的token狀態(tài)。然后，在每次請求接口的時(shí)候，都會在請求的header中攜帶token，后臺人員就可以根據(jù)你攜帶的token來判斷你的登錄是否過期，如果沒有攜帶，則說明沒有登錄過。這時(shí)候或許有些小伙伴會有疑問了，就是每個(gè)請求都攜帶token，那么要是一個(gè)頁面不需要用戶登錄就可以訪問的怎么辦呢？其實(shí)，你前端的請求可以攜帶token，但是后臺可以選擇不接收啊！
響應(yīng)的攔截
- // 響應(yīng)攔截器
- axios.interceptors.response.use(
- response => {
- // 如果返回的狀態(tài)碼為200，說明接口請求成功，可以正常拿到數(shù)據(jù)
- // 否則的話拋出錯(cuò)誤
- if (response.status === 200) {
- return Promise.resolve(response);
- } else {
- return Promise.reject(response);
- }
- },
- // 服務(wù)器狀態(tài)碼不是2開頭的的情況
- // 這里可以跟你們的后臺開發(fā)人員協(xié)商好統(tǒng)一的錯(cuò)誤狀態(tài)碼
- // 然后根據(jù)返回的狀態(tài)碼進(jìn)行一些操作，例如登錄過期提示，錯(cuò)誤提示等等
- // 下面列舉幾個(gè)常見的操作，其他需求可自行擴(kuò)展
- 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過期
- // 登錄過期對用戶進(jìn)行提示
- // 清除本地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;
- // 其他錯(cuò)誤，直接拋出錯(cuò)誤提示
- default:
- Toast({
- message: error.response.data.message,
- duration: 1500,
- forbidClick: true
- });
- }
- return Promise.reject(error.response);
- }
- }
- });
響應(yīng)攔截器很好理解，就是服務(wù)器返回給我們的數(shù)據(jù)，我們在拿到之前可以對他進(jìn)行一些處理。例如上面的思想：如果后臺返回的狀態(tài)碼是200，則正常返回?cái)?shù)據(jù)，否則的根據(jù)錯(cuò)誤的狀態(tài)碼類型進(jìn)行一些我們需要的錯(cuò)誤，其實(shí)這里主要就是進(jìn)行了錯(cuò)誤的統(tǒng)一處理和沒登錄或登錄過期后調(diào)整登錄頁的一個(gè)操作。
要注意的是，上面的Toast()方法，是我引入的vant庫中的toast輕提示組件，你根據(jù)你的ui庫，對應(yīng)使用你的一個(gè)提示組件。
封裝get方法和post方法
我們常用的ajax請求方法有g(shù)et、post、put等方法，相信小伙伴都不會陌生。axios對應(yīng)的也有很多類似的方法，不清楚的可以看下文檔。但是為了簡化我們的代碼，我們還是要對其進(jìn)行一個(gè)簡單的封裝。下面我們主要封裝兩個(gè)方法：get和post。
get方法：我們通過定義一個(gè)get函數(shù)，get函數(shù)有兩個(gè)參數(shù)，第一個(gè)參數(shù)表示我們要請求的url地址，第二個(gè)參數(shù)是我們要攜帶的請求參數(shù)。get函數(shù)返回一個(gè)promise對象，當(dāng)axios其請求成功時(shí)resolve服務(wù)器返回 值，請求失敗時(shí)reject錯(cuò)誤值。最后通過export拋出get函數(shù)。
- /**
- * get方法，對應(yīng)get請求
- * @param {String} url [請求的url地址]
- * @param {Object} params [請求時(shí)攜帶的參數(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ù)對象進(jìn)行序列化的操作，所以這里我們通過node的qs模塊來序列化我們的參數(shù)。這個(gè)很重要，如果沒有序列化操作，后臺是拿不到你提交的數(shù)據(jù)的。這就是文章開頭我們import QS from 'qs';的原因。如果不明白序列化是什么意思的，就百度一下吧，答案一大堆。
- /**
- * post方法，對應(yīng)post請求
- * @param {String} url [請求的url地址]
- * @param {Object} params [請求時(shí)攜帶的參數(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)
- })
- });
- }
這里有個(gè)小細(xì)節(jié)說下，axios.get()方法和axios.post()在提交數(shù)據(jù)時(shí)參數(shù)的書寫方式還是有區(qū)別的。區(qū)別就是，get的第二個(gè)參數(shù)是一個(gè){}，然后這個(gè)對象的params屬性值是一個(gè)參數(shù)對象的。而post的第二個(gè)參數(shù)就是一個(gè)參數(shù)對象。兩者略微的區(qū)別要留意哦！
axios的封裝基本就完成了，下面再簡單說下api的統(tǒng)一管理。
整齊的api就像電路板一樣，即使再復(fù)雜也能很清晰整個(gè)線路。上面說了，我們會新建一個(gè)api.js,然后在這個(gè)文件中存放我們所有的api接口。
- 首先我們在api.js中引入我們封裝的get和post方法
- /**
- * api接口統(tǒng)一管理
- */
- import { get, post } from './http'
現(xiàn)在，例如我們有這樣一個(gè)接口，是一個(gè)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);
我們定義了一個(gè)apiAddress方法，這個(gè)方法有一個(gè)參數(shù)p，p是我們請求接口時(shí)攜帶的參數(shù)對象。而后調(diào)用了我們封裝的post方法，post方法的第一個(gè)參數(shù)是我們的接口地址，第二個(gè)參數(shù)是apiAddress的p參數(shù)，即請求接口時(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接口，并且提供了兩個(gè)參數(shù)
- apiAddress({
- type: 0,
- sort: 1
- }).then(res => {
- // 獲取數(shù)據(jù)成功后的其他操作
- ………………
- })
- }
- }
- }
其他的api接口，就在pai.js中繼續(xù)往下面擴(kuò)展就可以了。友情提示，為每個(gè)接口寫好注釋哦！??！
api接口管理的一個(gè)好處就是，我們把a(bǔ)pi統(tǒng)一集中起來，如果后期需要修改接口，我們就直接在api.js中找到對應(yīng)的修改就好了，而不用去每一個(gè)頁面查找我們的接口然后再修改會很麻煩。關(guān)鍵是，萬一修改的量比較大，就規(guī)格gg了。還有就是如果直接在我們的業(yè)務(wù)代碼修改接口，一不小心還容易動到我們的業(yè)務(wù)代碼造成不必要的麻煩。
好了，最后把完成的axios封裝代碼奉上。
- /**axios封裝
- * 請求攔截、相應(yīng)攔截、錯(cuò)誤統(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/';
- }
- // 請求超時(shí)時(shí)間
- 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)進(jìn)行判斷
- 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過期
- // 登錄過期對用戶進(jìn)行提示
- // 清除本地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;
- // 其他錯(cuò)誤，直接拋出錯(cuò)誤提示
- 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í)攜帶的參數(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í)攜帶的參數(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)
- })
- });
- }
如果喜歡，就給個(gè)吧(*^▽^*)
*********華麗麗的分割線******************華麗麗的分割線******************華麗麗的分割線******************華麗麗的分割線******************華麗麗的分割線*********
2018.8.14更新
axios的封裝根據(jù)需求的不同而不同。這里非常感謝評論里一些很中肯的建議，我也對此進(jìn)行了思考和針對不同需求的改善。主要有以下改變：
1.優(yōu)化axios封裝，去掉之前的get和post
2.斷網(wǎng)情況處理
3.更加模塊化的api管理
4.接口域名有多個(gè)的情況
5.api掛載到vue.prototype上省去引入的步驟
http.js中axios封裝的優(yōu)化，先直接貼代碼：
- /**
- * axios封裝
- * 請求攔截、響應(yīng)攔截、錯(cuò)誤統(tǒng)一處理
- */
- import axios from 'axios';
- import router from '../router';
- import store from '../store/index';
- import { Toast } from 'vant';
- /**
- * 提示函數(shù)
- * 禁止點(diǎn)擊蒙層、顯示一秒后關(guān)閉
- */
- const tip = msg => {
名稱欄目：Vue中Axios的封裝和API接口的管理
網(wǎng)站URL：http://www.5511xx.com/article/cophgpe.html
