代码:
import axios from 'axios'
import state from 'state'
class HttpRequest {
constructor(baseUrl = baseURL){
this.baseUrl = baseUrl
// 判断当前是否有请求未结束,
this.queue = {}
}
getInsideConfig(){
const config = {
baseURL: this.baseUrl,
Headers: {
'Access-Control-Allow-Origin': '*',
'Content-Type': 'application/json;charset=UTF-8',
'X-Requested-With': 'XMLHttpRequest'
},
credentials: 'same-origin',
withCredentials: true
}
if (state.token) {
config.headers.Authorization = user.state.token
}
return config
}
distroy (url) {
delete this.queue[url]
if (!Object.keys(this.queue).length) {
// ...
// 全局loading结束
}
}
setInterceptors(instance, url){
const that = this
// 请求拦截
instance.interceptors.request.use(config => {
// 全局loading...
if (!Object.keys(that.queue).length) {
// ...
// 加载开始
}
that.queue[url] = true
return config
}, error => {
return Promise.reject(error)
})
// 响应拦截
instance.interceptors.response.use(res => {
this.distroy(url)
// 通用响应拦截操作,如处理返参信息返回固定格式的信息
return res
}, error => {
this.distroy(url)
// 错误消息弹框、错误操作
return Promise.reject(error)
})
}
// 生成请求,处理请求信息、参数等
request (options) {
const instance = axios.create()
let data = {}
if (options.params || options.data) {
let dataObj = options.params ? options.params : options.data
if (!(options.data instanceof FormData)) {
data = Object.assign(dataObj, dataObj)
if (options.method === 'post' || options.method === 'put') {
if (!configIndex.isMock || process.env.NODE_ENV !== 'development') {
data = data.notEncode?data:Base64.encode(JSON.stringify(data))
}
}
} else {
data = dataObj
}
}
if (options.method === 'get') {
options.params = data
} else {
options.data = data
}
options = Object.assign(this.getInsideConfig(), options)
this.interceptors(instance, options.url)
return instance(options)
}
}
export default HttpRequest
下一文件设置baseurl
// 从上一文件中引入HttpRequest
import HttpRequest from ''
const baseUrl = ''
const axios = new HttpRequest(baseUrl)
export default axios
下一文件设置请求类型,输出方法
import axios from ''
export const getAxiosData = (url, query) => { // axios get类型
return axios.request({
url: url,
method: 'get',
params: { ...query }
})
}
export const _postAxiosData = (url, query) => { // axios get类型
return axios.request({
url: url,
method: 'post',
params: { ...query }
})
}
export const deleteDataId = (url, query) => { // axios delete类型
return axios.request({
url: url,
method: 'delete',
data: { ...query }
})
}
export const postAxiosData = (url, query) => { // axios post类型
return axios.request({
url: url,
method: 'post',
data: query
})
}
export const putAxiosData = (url, query) => { // axios put类型
return axios.request({
url: url,
method: 'put',
data: query
})
}
使用方法:
// 引入方法
import { postAxiosData } from ''
postAxiosData(url, query).then(res => {
if(res.code == 200){
console.log(res)
}
})