1、創建Config類,用戶存儲一些全局變量
class Config {
constructor() {
this.BASE_URL = 'http://www.baidu.com'
this.IMAGE_URL = 'http://www.cdn.baidu.com'
this.SITE_PREFIX = 'ZP_'
this.AJAX_CONFIG = {
timeout: 10000,
headers: {},
auth: {},
}
this.AJAX_CODE_MESSAGE = {
200: "服務器成功返回請求的數據。",
201: "新建或修改數據成功。",
202: "一個請求已經進入後臺排隊(異步任務)。",
204: "刪除數據成功。",
400: "發出的請求有錯誤,服務器沒有進行新建或修改數據的操作。",
401: "用戶沒有權限(令牌、用戶名、密碼錯誤)。",
403: "用戶得到授權,但是訪問是被禁止的。",
404: "發出的請求針對的是不存在的記錄,服務器沒有進行操作。",
406: "請求的格式不可得。",
410: "請求的資源被永久刪除,且不會再得到的。",
422: "當創建一個對象時,發生一個驗證錯誤。",
500: "服務器發生錯誤,請檢查服務器。",
502: "網關錯誤。",
503: "服務不可用,服務器暫時過載或維護。",
504: "網關超時。",
}
}
}
const CONFIG = new Config()
export {
Config,
CONFIG,
}
2、創建Utils類
import { Config } from './config';
import axios from 'axios';
class Utils extends Config {
constructor(props) {
super(props)
this.ajax = null
this.ajaxInit()
}
ajaxInit() {
this.ajax = axios.create({
...this.AJAX_CONFIG
})
this.ajax.interceptors.request.use(function (config) {
// 在發送請求之前做些什麼
return config
}, function (error) {
// 對請求錯誤做些什麼
return Promise.reject(error)
})
this.ajax.interceptors.response.use(function (response) {
// 對響應數據做點什麼
if (!response) {
console.log("您的網絡發生異常,無法連接服務器")
}
return response;
}, function (error) {
// 對響應錯誤做點什麼
const response = error.response
const status = response.status
if (status === 401) {
console.log(this.AJAX_CODE_MESSAGE[status])
} else if (status >= 400 && status < 500) {
console.log(this.AJAX_CODE_MESSAGE[status])
} else if (status >= 500) {
console.log(this.AJAX_CODE_MESSAGE[status])
}
return Promise.reject(error)
})
}
setToken(token) {
localStorage.setItem(this.SITE_PREFIX + 'token', token)
return null
}
getToken() {
return localStorage.getItem(this.SITE_PREFIX + 'token')
}
setUserInfo(user) {
localStorage.setItem(this.SITE_PREFIX + 'user', user)
return null
}
getUserInfo() {
return localStorage.getItem(this.SITE_PREFIX + 'user')
}
}
export default new Utils()
不喜勿噴,十分感謝。