import axios from 'axios'
import { Message, MessageBox, Loading } from 'element-ui'
import router from '@/router'
import { getToken, removeToken } from '@/utils/auth'
// 創(chuàng)建axios實例
const service = axios.create({
baseURL: process.env.BASE_API,
withCredentials: true,
timeout: 10 * 1000 // 請求超時時間
})
// 白名單
const whiteList = ['/api/core/logout']
// showFullScreenLoading() tryHideFullScreenLoading() 要干的事兒就是將同一時刻的請求合并。
// 聲明一個變量 needLoadingRequestCount,每次調(diào)用showFullScreenLoading方法 needLoadingRequestCount + 1。
// 調(diào)用tryHideFullScreenLoading()方法,needLoadingRequestCount - 1。needLoadingRequestCount為 0 時,結(jié)束 loading。
let needLoadingRequestCount = 0
// loading實例
let fullLoading
// 有請求報錯(403)
let hasRequestError = false
export const showLoading = () => {
if (needLoadingRequestCount === 0) {
fullLoading = Loading.service({
background: 'rgba(0, 0, 0, .5)',
text: '加載中',
spinner: 'el-icon-loading'
})
}
needLoadingRequestCount++
}
export const tryHideLoading = () => {
if (needLoadingRequestCount <= 0) return
needLoadingRequestCount--
if (needLoadingRequestCount === 0) {
fullLoading.close()
}
}
// request攔截器
service.interceptors.request.use(
config => {
if (config.url !== '/api/core/pcLogin' && !getToken()) {
return Promise.reject()
}
// 白名單內(nèi)的地址不顯示loading
if (whiteList.indexOf(config.url) < 0) {
showLoading()
}
// 讓每個請求攜帶自定義token 請根據(jù)實際情況自行修改
config.headers['token'] = getToken()
return config
},
error => {
return Promise.reject(error)
}
)
// response 攔截器
service.interceptors.response.use(
response => {
/**
* code為非0是拋錯 可結(jié)合自己業(yè)務(wù)進行修改
*/
const res = response.data
if (res.code !== 0) {
const codeObject = {
'408': '服務(wù)器等待客戶端發(fā)送的請求時間過長,超時',
'500': res.msg
}
// 403為token失效
if (res.code === 403) {
if (hasRequestError) {
return
} else {
hasRequestError = true
Message({
message: '登錄信息失效,請重新登錄',
type: 'error'
})
fullLoading.close()
removeToken()
router.replace('/login')
}
} else {
let message = ``
message = codeObject[${res.code}]
if (!message) {
message = Http請求異常,請聯(lián)系管理員
// router.replace('/login')
}
Message({
message,
type: 'error',
duration: 3 * 1000
})
}
return Promise.reject('error')
} else {
hasRequestError = false
tryHideLoading()
return response.data
}
},
error => {
if (getToken()) {
Message({
message: Http請求異常,請聯(lián)系管理員,
type: 'error',
duration: 5 * 1000
})
} else {
console.log(error)
}
// return Promise.reject(error)
}
)
// 將axios 的 post 方法
export function $post(url, params) {
return new Promise((resolve, reject) => {
service
.post(url, params)
.then(res => {
resolve(res)
})
.catch(err => {
reject(err)
})
})
}
// 將axios 的 put 方法
export function $put(url, params) {
return new Promise((resolve, reject) => {
service
.put(url, params)
.then(res => {
resolve(res)
})
.catch(err => {
reject(err)
})
})
}
// 將axios 的 delete 方法
export function $delete(url, params) {
return new Promise((resolve, reject) => {
service
.delete(url, params)
.then(res => {
resolve(res)
})
.catch(err => {
reject(err)
})
})
}
// 將axios 的 get 方法
export function $get(url, params) {
return new Promise((resolve, reject) => {
service
.get(url, {
params: params
})
.then(res => {
resolve(res) // 返回請求成功的數(shù)據(jù) data
})
.catch(err => {
reject(err)
})
})
}