需求是攔截前端的網絡請求和響應。
廢話不多說，直接上干貨。
我用的是vue-cli3所以這個config文件是我自己創建的。
先介紹env.js
//根據不同的環境更改不同的baseUrl
let baseUrl = '';
//開發環境下
if (process.env.NODE_ENV == 'development') {
baseUrl = '';
} else if (process.env.NODE_ENV == 'production') {
baseUrl = '生產地址';
}
export {
baseUrl,//導出baseUrl
}
在這里我首先設置了開發環境和生產環境的地址，并向外拋出。
在看一下axios.js
import {
baseUrl, //引入baseUrl
} from "../config/env";
import axios from 'axios';
import qs from 'qs';
import store from '../src/store/index';
// 創建 axios 實例
let service = axios.create({
baseUrl: baseUrl,
timeout: 20000, // 請求超時時間
crossDomain: true,//設置cross跨域
withCredentials: true//設置cross跨域 并設置訪問權限 允許跨域攜帶cookie信息
})
// 設置 post 默認 Content-Type
service.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
// 添加請求攔截器
service.interceptors.request.use(
(config) => {
// if(store.state.requestLoading){
// return ;
// }
store.commit('OPEN_LOADING');
// console.log( vue.$store.requestLoading)
//判斷請求方式是否為POST，進行轉換格式
config.method === 'post'
? config.data = qs.stringify({...config.data})
: config.params = {...config.params};
// 請求發送前進行處理
return config
},
(error) => {
store.commit('CLOSE_LOADING');
// 請求錯誤處理
return Promise.reject(error)
}
)
// 添加響應攔截器
service.interceptors.response.use(
(response) => {
store.commit('CLOSE_LOADING');
let { data } = response;
return data
},
(error) => {
store.commit('CLOSE_LOADING');
let info = {},
{ errCode, errMsg, data } = error.response;
if (!error.response) {
info = {
code: 5000,
msg: 'Network Error'
}
} else {
// 此處整理錯誤信息格式
info = {
code: errCode,
data: data,
msg: errMsg
}
}
}
)
/**
* 創建統一封裝過的 axios 實例
* @return {AxiosInstance}
*/
export default service
最后將這個axios.js文件引入main.js中，并將引入的axios掛載到Vue實例上就ok了。
完美！如有不對的地方還請各位大佬指點，萬分感謝。
踩過的坑：
怎么在axios攔截器中使用vuex，首先我們要引入vuex的js文件，然后就可以用了，就這么簡單。
本站文章版權歸原作者及原出處所有 。內容為作者個人觀點， 并不代表本站贊同其觀點和對其真實性負責，本站只提供參考并不構成任何投資及應用建議。本站是一個個人學習交流的平臺，網站上部分文章為轉載，并不用于任何商業目的，我們已經盡可能的對作者和來源進行了通告，但是能力有限或疏忽，造成漏登，請及時聯系我們，我們將根據著作權人的要求，立即更正或者刪除有關內容。本站擁有對此聲明的最終解釋權。
