axios封裝(簡單封裝)

菜鳥一枚,如有錯誤,歡迎指正。

安裝

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)

? ? ? ? })

? ? });

}

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容