菜鳥一枚,如有錯誤,歡迎指正。
安裝
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)
? ? ? ? })
? ? });
}