axios封装
common.js:
import axios from 'axios'
import { message } from 'antd'
import { baseURL } from '../utils/config'
import qs from 'qs'
import { showLoading, hideLoading } from '../utils/tools'
let isCanShow = true
const service = axios.create()
service.defaults.baseURL = baseURL
service.interceptors.request.use(
(config) => {
//获取token并放置在请求头中
const accessToken = localStorage.getItem('accessToken')
if (accessToken)
config.headers.Authorization =
'Bearer ' + localStorage.getItem('accessToken')
if (config.method === 'get') config.params = { ...config.data }
// 请求接口时显示loading,接口响应后隐藏loading,如果有特殊情况不能满足需求的,例如同时请求了多个接口
// 且接口响应时间有比较大的差异,loading的显示隐藏状态不能友好的展示,可以直接在业务代码或api层,把
// isLoading设置为false,则不再使用拦截器控制loading的状态,自己在业务代码里手动控制loading的状态
if (config.isLoading !== false) showLoading()
return config
},
(err) => {
return Promise.reject(err)
}
)
service.interceptors.response.use(
(res) => {
if (res.config.isLoading !== false) {
hideLoading()
}
//code是node接口的状态码,state是java接口的状态码
if (res.data.code === 200 || res.data.state === 1) {
return res.data
} else if (res.data.code === 400 || res.data.state === 0) {
let msg = ''
msg = res.data.message
if (res.data && res.data.data) {
msg += res.data.data.error_msg ? `:${res.data.data.error_msg} ` : ''
msg += res.data.data.error_code ? res.data.data.error_code : ''
}
if (res.config.isShowMessage !== false) {
message.warning(msg)
}
return res.data
} else {
return Promise.reject(res)
}
},
(err) => {
hideLoading()
let { response } = err
let { status } = response
if (status === 401) {
if (isCanShow) {
message.warning('token失效,请重新登录!')
isCanShow = false
}
setTimeout(() => {
isCanShow = true
}, 1000)
if (document.location.href.includes('#/sale')) {
window.reactRouter.replace({ pathname: '/sale/login' })
} else {
window.reactRouter.replace({ pathname: '/light/login' })
}
} else {
message.warning(err && err.message)
}
return Promise.reject(err)
}
)
export const common = async (config) => {
if (config.contentType === 'application/x-www-form-urlencoded') {
config.headers = { 'content-type': 'application/x-www-form-urlencoded' }
config.data = qs.stringify(config.data)
}
let res = await service(config)
return res
}
index.js:
import light from './lightApi'
import sale from './saleApi'
import dark from "./darkApi"
const Api = {
light,
sale,
dark
}
export default Api
lightApi.js:
import urls from './urls'
import { common } from './common'
//common函数传递的参数添加 contentType: 'application/x-www-form-urlencoded' 即可改变post请求参数传递的格式
const Api = {
//#region 公共接口)
commonQueryAllOperation: (data) => common({ url: urls.light.commonQueryAllOperation, data, method: 'post' }),
//#endregion
}
export default Api
lightUrls.js:
import { baseURL, nodeBaseURL } from '../utils/config'
const urls = {
//#region 公共接口
commonQueryAllOperation: "/abc",
//#endregion
}
export default urls
config.js:
const baseURL = {
dev: '', // 使用反向代理解决跨域时,dev应为空字符串
test: 'http://abc.cn',
// 使用yarn build打包,所有接口使用这个url,需要服务器解决跨域
prod: 'http://abc.cn'
}[process.env.REACT_APP_MODE]
const imageBaseUrl = {
dev: 'http://abc/',
test: 'http://abc/',
prod: 'http://abc/',
}[process.env.REACT_APP_MODE]
const nodeBaseURL = {
dev: '',
test: 'https://efficacious-tiny-infinity.glitch.me',
prod: 'https://efficacious-tiny-infinity.glitch.me',
}[process.env.REACT_APP_MODE]
export { baseURL, imageBaseUrl, nodeBaseURL }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步