请求接口封装

import axios from 'axios'
import { Message, MessageBox, Loading } from 'element-ui'
import router from '@/router'
import { getToken, removeToken } from '@/utils/auth'

// 创建axios实例
const service = axios.create({
baseURL: process.env.BASE_API,
withCredentials: true,
timeout: 10 * 1000 // 请求超时时间
})

// 白名单
const whiteList = ['/api/core/logout']

// showFullScreenLoading() tryHideFullScreenLoading() 要干的事儿就是将同一时刻的请求合并。
// 声明一个变量 needLoadingRequestCount，每次调用showFullScreenLoading方法 needLoadingRequestCount + 1。
// 调用tryHideFullScreenLoading()方法，needLoadingRequestCount - 1。needLoadingRequestCount为 0 时，结束 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()
}
// 白名单内的地址不显示loading
if (whiteList.indexOf(config.url) < 0) {
showLoading()
}
// 让每个请求携带自定义token 请根据实际情况自行修改
config.headers['token'] = getToken()
return config
},
error => {
return Promise.reject(error)
}
)

// response 拦截器
service.interceptors.response.use(
response => {
/**
* code为非0是抛错 可结合自己业务进行修改
*/
const res = response.data
if (res.code !== 0) {
const codeObject = {
'408': '服务器等待客户端发送的请求时间过长，超时',
'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请求异常，请联系管理员
// 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请求异常，请联系管理员,
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) // 返回请求成功的数据 data
})
.catch(err => {
reject(err)
})
})
}