一：axios的封裝
vue項(xiàng)目中，和后臺(tái)交互獲取數(shù)據(jù)這塊，我們通常使用的是axios庫，它是promise的http庫，可運(yùn)行在瀏覽器端和node.js中。

安裝

npm install axios //安裝axios

引入
一般都在項(xiàng)目的src目錄中，新建一個(gè)request文件夾，然后在里面新建一個(gè)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ù)，后面會(huì)提到 //vant的toast提示框組件，大家可根據(jù)自己的ui組件更改 import {Toast} from 'vant'

環(huán)境的切換
我們的項(xiàng)目環(huán)境可能有開發(fā)環(huán)境、測(cè)試環(huán)境可生產(chǎn)環(huán)境。我們通過node的環(huán)境變量來匹配我們的默認(rèn)的接口url前綴。axios.defaults.baseURL可以設(shè)置axios的默認(rèn)請(qǐng)求地址

//環(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è)置請(qǐng)求超時(shí)
通過axios.defaults.timeout設(shè)置默認(rèn)的請(qǐng)求超時(shí)時(shí)間。例如超過了10s，就會(huì)告知用戶當(dāng)前請(qǐng)求超時(shí)，請(qǐng)刷新等。

axios.defaults.timeout = 10000

post請(qǐng)求頭的設(shè)置post請(qǐng)求的時(shí)候，我們需要加上一個(gè)請(qǐng)求頭，所以可以在這里進(jìn)行一個(gè)默認(rèn)的設(shè)置，即設(shè)置post的請(qǐng)求頭為application/x-www-form-urlencoded;charset=UTF-8

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

請(qǐng)求攔截
我們?cè)诎l(fā)送請(qǐng)求前可以進(jìn)行一個(gè)請(qǐng)求的攔截，為什么要攔截呢？我們攔截請(qǐng)求是用來做什么的呢？比如，有些請(qǐng)求是需要用戶登錄之后才能訪問的，或者post請(qǐng)求的時(shí)候，我們需要序列化我們提交的數(shù)據(jù)。這時(shí)候，我們可以在請(qǐng)求被發(fā)送之前進(jìn)行一個(gè)攔截，從而進(jìn)行我們想要的操作。

// 先導(dǎo)入vuex,因?yàn)槲覀円褂玫嚼锩娴臓顟B(tài)對(duì)象 // vuex的路徑根據(jù)自己的路徑去寫 import store from '@/store/index';// 請(qǐng)求攔截器axios.interceptors.request.use( config => { // 每次發(fā)送請(qǐng)求之前判斷vuex中是否存在token // 如果存在，則統(tǒng)一在http請(qǐng)求的header都加上token，這樣后臺(tái)根據(jù)token判斷你的登錄情況// 即使本地存在token，也有可能token是過期的，所以在響應(yīng)攔截器中要對(duì)返回狀態(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中），會(huì)首先從本地存儲(chǔ)中讀取token，如果token存在說明用戶已經(jīng)登錄過，則更新vuex中的token狀態(tài)。然后，在每次請(qǐng)求接口的時(shí)候，都會(huì)在請(qǐng)求的header中攜帶token，后臺(tái)人員就可以更加你攜帶的token來判斷你的登錄是否過期，如果沒有攜帶，則說明沒有登錄過。這時(shí)候或許有些小伙伴會(huì)有疑問了。就是每個(gè)請(qǐng)求都攜帶token，那么要是一個(gè)頁面不需要用戶登錄就可以訪問的怎么辦呢？其實(shí)，前端的請(qǐng)求可以攜帶token，但是后臺(tái)可以選擇不接受

響應(yīng)的攔截

// 響應(yīng)攔截器 axios.interceptors.response.use( response => { // 如果返回的狀態(tài)碼為200，說明接口請(qǐng)求成功，可以正常拿到數(shù)據(jù) // 否則的話拋出錯(cuò)誤if (response.status === 200) { return Promise.resolve(response); } else { return Promise.reject(response); } }, // 服務(wù)器狀態(tài)碼不是2開頭的的情況// 這里可以跟你們的后臺(tái)開發(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過期// 登錄過期對(duì)用戶進(jìn)行提示// 清除本地token和清空vuex中token對(duì)象// 跳轉(zhuǎn)登錄頁面 case 403:Toast({message: '登錄過期，請(qǐng)重新登錄',duration: 1000,forbidClick: true});// 清除tokenlocalStorage.removeItem('token');store.commit('loginSuccess', null);// 跳轉(zhuǎn)登錄頁面，并將要瀏覽的頁面fullPath傳過去，登錄成功后跳轉(zhuǎn)需要訪問的頁面 setTimeout(() => { router.replace({ path: '/login', query: { redirect: router.currentRoute.fullPath } }); }, 1000); break;// 404請(qǐng)求不存在case 404:Toast({message: '網(wǎng)絡(luò)請(qǐng)求不存在',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ù)，我們?cè)谀玫街翱梢詫?duì)他進(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庫，對(duì)應(yīng)使用你的一個(gè)提示組件。

封裝get方法和post方法
我們常用的ajax請(qǐng)求方法有g(shù)et、post、put等方法。axios對(duì)應(yīng)的也有很多類型的方法，不清楚的可以看下文檔。但是為了簡(jiǎn)化我們的代碼，我們還是要對(duì)其進(jìn)行一個(gè)簡(jiǎn)單的封裝。下面我們主要封裝兩個(gè)方法：get和post

get方法：我們通過定義一個(gè)get函數(shù)，get函數(shù)有兩個(gè)參數(shù)，第一個(gè)參數(shù)表示我們要請(qǐng)求的url地址，第二個(gè)參數(shù)是我們要攜帶的請(qǐng)求參數(shù)。get函數(shù)返回一個(gè)promise對(duì)象，當(dāng)axios其請(qǐng)求成功時(shí)resolve服務(wù)器返回值，請(qǐng)求失敗時(shí)reject錯(cuò)誤值。最后通過export拋出get函數(shù)

/*** get方法，對(duì)應(yīng)get請(qǐng)求* @param {String} url [請(qǐng)求的url地址]* @param {Object} params [請(qǐng)求時(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方法必須要使用對(duì)提交從參數(shù)對(duì)象進(jìn)行序列化的操作，所以這里我們通過node的qs模塊來序列化我們的參數(shù)。這個(gè)很重要，如果沒有序列化操作，后臺(tái)是拿不到你提交的數(shù)據(jù)的。這就是文章開頭我們import QS form ‘qs’的原因。如果不明白序列化是什么意思的，就百度一下吧，答案一大堆

/** * post方法，對(duì)應(yīng)post請(qǐng)求 * @param {String} url [請(qǐng)求的url地址] * @param {Object} params [請(qǐng)求時(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è)對(duì)象的params屬性值是一個(gè)參數(shù)對(duì)象的。而post的第二個(gè)參數(shù)就是一個(gè)參數(shù)對(duì)象。

axios的封裝基本就完成了，下面在簡(jiǎn)單說下api的統(tǒng)一管理
首先我們?cè)赼pi.js中引入我們封裝的get和post方法

/** * api接口統(tǒng)一管理*/ import { get, post } from './http'

現(xiàn)在，例如我們有這樣一個(gè)接口，是一個(gè)post請(qǐng)求

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是我們請(qǐng)求接口時(shí)攜帶的參數(shù)對(duì)象。而后調(diào)用了我們封裝的post方法，post方法的第一個(gè)參數(shù)是我們的接口地址，第二個(gè)參數(shù)是apiAddress的p參數(shù)，即請(qǐng)求接口時(shí)攜帶的參數(shù)對(duì)象。最后通過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中找到對(duì)應(yīng)的修改就好了，而不用去每一個(gè)頁面查找我們的接口然后在修改會(huì)很麻煩。關(guān)鍵是，萬一修改的量比較大，就規(guī)格gg了。還有就是如果直接在我們的業(yè)務(wù)代碼修改接口，一不小心還容易到我們的業(yè)務(wù)代碼造成不必要的麻煩。

好了，最后吧完成的axios封裝代碼奉上

/**axios封裝* 請(qǐng)求攔截、相應(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/'; }// 請(qǐng)求超時(shí)時(shí)間 axios.defaults.timeout = 10000;// post請(qǐng)求頭 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';// 請(qǐng)求攔截器 axios.interceptors.request.use( config => {// 每次發(fā)送請(qǐng)求之前判斷是否存在token，如果存在，則統(tǒng)一在http請(qǐng)求的header都加上token，不用每次請(qǐng)求都手動(dòng)添加了// 即使本地存在token，也有可能token是過期的，所以在響應(yīng)攔截器中要對(duì)返回狀態(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過期 // 登錄過期對(duì)用戶進(jìn)行提示 // 清除本地token和清空vuex中token對(duì)象 // 跳轉(zhuǎn)登錄頁面 case 403: Toast({ message: '登錄過期，請(qǐng)重新登錄', 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請(qǐng)求不存在 case 404: Toast({ message: '網(wǎng)絡(luò)請(qǐng)求不存在', duration: 1500, forbidClick: true }); break; // 其他錯(cuò)誤，直接拋出錯(cuò)誤提示 default: Toast({ message: error.response.data.message, duration: 1500, forbidClick: true }); } return Promise.reject(error.response); } } ); /** * get方法，對(duì)應(yīng)get請(qǐng)求 * @param {String} url [請(qǐng)求的url地址] * @param {Object} params [請(qǐng)求時(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方法，對(duì)應(yīng)post請(qǐng)求 * @param {String} url [請(qǐng)求的url地址] * @param {Object} params [請(qǐng)求時(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) }) }); }

總結(jié)

以上是生活随笔為你收集整理的vue中Axios的封装与API接口的管理详解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。