post請求的時候，我們需要加上一個請求頭，所以可以在這里進行一個默認的設置，即設置post的請求頭為application/x-www-form-urlencoded;charset=UTF-8
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';復制代碼- 請求攔截
我們在發送請求前可以進行一個請求的攔截，為什么要攔截呢，我們攔截請求是用來做什么的呢？比如，有些請求是需要用戶登錄之后才能訪問的，或者post請求的時候，我們需要序列化我們提交的數據。這時候，我們可以在請求被發送之前進行一個攔截，從而進行我們想要的操作。
// 先導入vuex,因為我們要使用到里面的狀態對象
// vuex的路徑根據自己的路徑去寫
import store from '@/store/index';
// 請求攔截器
axios.interceptors.request.use( config => { // 每次發送請求之前判斷vuex中是否存在token // 如果存在，則統一在http請求的header都加上token，這樣后台根據token判斷你的登錄情況 // 即使本地存在token，也有可能token是過期的，所以在響應攔截器中要對返回狀態進行判斷 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存在說明用戶已經登陸過，則更新vuex中的token狀態。然后，在每次請求接口的時候，都會在請求的header中攜帶token，后台人員就可以根據你攜帶的token來判斷你的登錄是否過期，如果沒有攜帶，則說明沒有登錄過。這時候或許有些小伙伴會有疑問了，就是每個請求都攜帶token，那么要是一個頁面不需要用戶登錄就可以訪問的怎么辦呢？其實，你前端的請求可以攜帶token，但是后台可以選擇不接收啊！
響應的攔截
// 響應攔截器
axios.interceptors.response.use(
response => {
// 如果返回的狀態碼為200，說明接口請求成功，可以正常拿到數據
// 否則的話拋出錯誤
if (response.status === 200) { return Promise.resolve(response); } else { return Promise.reject(response); } }, // 服務器狀態碼不是2開頭的的情況 // 這里可以跟你們的后台開發人員協商好統一的錯誤狀態碼 // 然后根據返回的狀態碼進行一些操作，例如登錄過期提示，錯誤提示等等 // 下面列舉幾個常見的操作，其他需求可自行擴展 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: '網絡請求不存在', duration: 1500, forbidClick: true }); break; // 其他錯誤，直接拋出錯誤提示 default: Toast({ message: error.response.data.message, duration: 1500, forbidClick: true }); } return Promise.reject(error.response); } } });
響應攔截器很好理解，就是服務器返回給我們的數據，我們在拿到之前可以對他進行一些處理。例如上面的思想：如果后台返回的狀態碼是200，則正常返回數據，否則的根據錯誤的狀態碼類型進行一些我們需要的錯誤，其實這里主要就是進行了錯誤的統一處理和沒登錄或登錄過期后調整登錄頁的一個操作。
要注意的是，上面的Toast()方法，是我引入的vant庫中的toast輕提示組件，你根據你的ui庫，對應使用你的一個提示組件。
如果你想在稍后移除攔截器，可以這樣：
const myInterceptor = axios.interceptors.request.use(() => {/*...*/});
axios.interceptors.request.eject(myInterceptor);
可以為自定義 axios 實例添加攔截器
const instance = axios.create(); instance.interceptors.request.use(() => {/*...*/});
轉載：https://www.cnblogs.com/chaoyuehedy/p/9931146.html