頁面發(fā)送http請求沽瘦，很多情況我們要對請求和其響應進行特定的處理唉匾；如果請求數非常多旦委，單獨對每一個請求進行處理會變得非常麻煩，程序的優(yōu)雅性也會大打折扣尉间。
好在強大的axios為開發(fā)者提供了這樣一個API：攔截器偿乖。
攔截器分為 請求（request）攔截器和 響應（response）攔截器
請求攔截器
axios.interceptors.request.use(function (config) {
? ? // 在發(fā)起請求請做一些業(yè)務處理
? ? return config;
? }, function (error) {
? ? // 對請求失敗做處理
? ? return Promise.reject(error);
? });
響應攔截器
axios.interceptors.response.use(function (response) {
? ? // 對響應數據做處理
? ? return response;
? }, function (error) {
? ? // 對響應錯誤做處理
? ? return Promise.reject(error);
? })
vue添加axios攔截器
安裝 axios
npm install axios –save-dev
新建文件 axios.js（設置請求超時時間用）
開始統(tǒng)一封裝axios， 首先引入axios哲嘲、qs依賴
import axios from "axios";
import qs from "qs";
然后創(chuàng)建一個axios實例贪薪，這個process.env.BASE_URL在config/dev.evn.js、prod.evn.js里面進行配置：
/****** 創(chuàng)建axios實例 ******/
const service = axios.create({
? ? baseURL: process.env.BASE_URL,? // api的base_url
? ? timeout: 5000? // 請求超時時間
});
使用request攔截器對axios請求配置做統(tǒng)一處理
service.interceptors.request.use(config => {? ?
? ? app.$vux.loading.show({? ? ? ?
? ? ? ? text: '數據加載中……'? ?
? ? });? ?
? ? config.method === 'post'? ? ? ?
? ? ? ? ? config.data = qs.stringify({...config.data})? ? ? ?
? ? ? ? : config.params = {...config.params};? ?
? ? config.headers['Content-Type'] = 'application/x-www-form-urlencoded';? ?
? ? return config;
? ? }, error => {? //請求錯誤處理?
? ? ? ? app.$vux.toast.show({? ? ? ?
? ? ? ? ? ? type: 'warn',? ? ? ?
? ? ? ? ? ? text: error?
? ? ? ? });? ?
? ? ? ? Promise.reject(error)
? ? }
);
對response做統(tǒng)一處理
service.interceptors.response.use(? ?
? ? response => {? //成功請求到數據? ? ? ?
? ? ? ? app.$vux.loading.hide();? ? ? ?
? ? ? ? //這里根據后端提供的數據進行對應的處理? ? ? ?
? ? ? ? if (response.data.result === 'TRUE') {? ? ? ? ? ?
? ? ? ? ? ? return response.data;? ? ? ?
? ? ? ? } else {? ? ? ? ? ?
? ? ? ? ? ? app.$vux.toast.show({?
? ? ? ? ? ? ? ? //常規(guī)錯誤處理? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? type: 'warn',? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? text: response.data.data.msg? ? ? ? ? ?
? ? ? ? ? ? });? ? ? ?
? ? ? ? }? ?
? ? },? ?
? ? error => {? //響應錯誤處理console.log('error');? ? ? ?
? ? ? ? console.log(error);? ? ? ?
? ? ? ? console.log(JSON.stringify(error));? ? ? ?
? ? ? ? let text = JSON.parse(JSON.stringify(error)).response.status === 404? ? ? ? ? ?
? ? ? ? ? ? ? '404'? ? ? ? ? ?
? ? ? ? ? ? : '網絡異常眠副，請重試';? ? ? ?
? ? ? ? app.$vux.toast.show({? ? ? ? ? ?
? ? ? ? ? ? type: 'warn',? ? ? ? ? ?
? ? ? ? ? ? text: text? ? ? ?
? ? ? ? });? ? ? ?
? ? ? ? return Promise.reject(error)?
? ? }
)
demo
// 根據狀態(tài)碼進行判斷跳轉
// -100跳回登錄? ? -101提示錯誤信息
axios.interceptors.response.use(function (response) {
? let that = this
? let sid = window.location.href
? if (response.status == -100) {
? ? ? ? ? router.replace({
? ? ? ? ? ? ? path: '/admin_login',
? ? ? ? ? ? ? query: {backurl: sid}
? ? ? ? ? })
? } else if (response.status == -101) {
? ? ? this.$message.error(response.data.message);
? }
? return response;
}, function (error) {
? // 對響應錯誤做點什么
? return Promise.reject(error);
});
