請求接口封裝

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)
})
})
}

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容