菜鳥一枚，如有錯誤，歡迎指正。
安裝
npm install axios;?
1.引入
import axios from 'axios';?
import QS from 'qs'; // 引入qs模塊，用來序列化post類型的數據
//vantui的toast提示框組件，大家可根據自己的ui組件更改。
import { Toast } from 'vant';
環境的切換
我們的項目環境可能有開發環境、測試環境和生產環境。我們通過node的環境變量來匹配我們的默認的接口url前綴。axios.defaults.baseURL可以設置axios的默認請求地址。
if (process.env.NODE_ENV == 'development') {
axios.defaults.baseURL = '';}
else if (process.env.NODE_ENV == 'debug') {
axios.defaults.baseURL = '';
}
else if (process.env.NODE_ENV == 'production') {
axios.defaults.baseURL = '';
}
設置請求超時
通過axios.defaults.timeout設置默認的請求超時時間。例如超過了10s，就會告知用戶當前請求超時，請刷新等。
axios.defaults.timeout = 10000
設置默認的post請求頭
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
請求攔截
一般是在登錄完成之后，將用戶的token通過localStorage或者cookie存在本地，然后用戶每次在進入頁面的時候，會首先從本地存儲中讀取token，如果token存在說明用戶已經登陸過，則更新vuex中的token狀態，每次發送請求之前判斷vuex中是否存在token，如果存在，則統一在http請求的header都加上token，這樣后臺根據token判斷你的登錄情況，即使本地存在token，也有可能token是過期的，所以在響應攔截器中要對返回狀態進行判斷
import store from '@/store/index';
axios.interceptors.request.use(
? ? config => {
? ? ? ? const token = store.state.token;
? ? ? ? token && (config.headers.Authorization = token);
? ? ? ? return config;
? ? },
? ? error => {
? ? ? ? return Promise.error(error);
})
響應的攔截
返回的狀態碼為200請求成功，正常拿到數據，否則的話可以跟后臺開發人員協商好統一的錯誤狀態碼，然后根據狀態碼進行操作，例如登錄過期跳轉登陸，錯誤提示等，下面列舉幾個常見的操作，其他需求可自行擴展
axios.interceptors.response.use(
? ? response => {
? ? ? ? if (response.status === 200) {
? ? ? ? ? ? return Promise.resolve(response);
? ? ? ? } else {
? ? ? ? ? ? return Promise.reject(response);
? ? ? ? }
? ? },
? ? 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對象，跳轉登錄頁面，并將要瀏覽的頁面fullPath傳過去，登錄成功后跳轉需要訪問的頁面
? ? ? ? ? ? ? ? case 403:
? ? ? ? ? ? ? ? ? ? ? Toast({
? ? ? ? ? ? ? ? ? ? ? ? message: '登錄過期，請重新登錄',
? ? ? ? ? ? ? ? ? ? ? ? duration: 1000,
? ? ? ? ? ? ? ? ? ? ? ? forbidClick: true
? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? ? ? localStorage.removeItem('token');
? ? ? ? ? ? ? ? ? ? store.commit('loginTimeout');
? ? ? ? ? ? ? ? ? ? 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);
? ? ? ? }
? ? }
});
封裝get方法和post方法（還有一些方法如用到可以參考axios官網）
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)
? ? })
});}
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)
? ? ? ? })
? ? });
}
