axios请求封装成一个类
// 封装axios 的请求,返回重新封装的数据格式
import axios from 'axios'
import errorHandle from './errorHandle'
class HttpRequest {
constructor (baseUrl) {
this.baseUrl = baseUrl
}
// 获取实例的配置
getInsideConfig () {
const config = {
baseURL: this.baseURL,
headers: {
'Content-type': 'application/json;charset=utf-8'
},
timeout: 10000
}
return config
}
// 设定拦截器
interceptors (instance) {
// Add a request interceptor 请求拦截器
instance.interceptors.request.use(function (config) {
// Do something before request is sent
console.log('config is:')
console.log(config)
return config
}, (err) => {
// Do something with request error
errorHandle(err)
return Promise.reject(err)
})
// 对错误统一处理
// Add a response interceptor 响应拦截器
instance.interceptors.response.use((res) => {
// Any status code that lie within the range of 2xx cause this function to trigger
// Do something with response data
console.log('res is:')
console.log(res)
if (res.status === 200) {
return Promise.resolve(res.data)
} else {
return Promise.reject(res)
}
}, (err) => {
// Any status codes that falls outside the range of 2xx cause this function to trigger
// Do something with response error
errorHandle(err)
return Promise.reject(err)
})
}
// 创建实例
request (options) {
const instance = axios.create()
this.interceptors(instance)
const newOptions = Object.assign(this.getInsideConfig(), options)
return instance.request(newOptions)
}
// get 请求
get (url, config) {
const options = Object.assign({
method: 'get',
url: url
}, config)
return this.request(options)
}
// post 请求
post (url, data) {
const options = Object.assign({
method: 'post',
url: url,
data: data
})
return this.request(options)
}
}
export default HttpRequest
最新版本添加了拦截重复请求的情况
// 封装axios 的请求,返回重新封装的数据格式
import axios from 'axios'
import errorHandle from './errorHandle'
const CancelToken = axios.CancelToken
class HttpRequest {
constructor (baseUrl) {
this.baseUrl = baseUrl
this.pending = {}
}
// 获取实例的配置
getInsideConfig () {
const config = {
baseURL: this.baseURL,
headers: {
'Content-type': 'application/json;charset=utf-8'
},
timeout: 10000
}
return config
}
removePending (key, isRequest = false) {
if (this.pending[key] && isRequest) {
this.pending[key]('取消重复请求')
}
delete this.pending[key]
}
// 设定拦截器
interceptors (instance) {
instance.interceptors.request.use((config) => {
// Do something before request is sent
const key = config.url + '&' + config.method
this.removePending(key, true)
config.cancelToken = new CancelToken((c) => {
this.pending[key] = c
})
return config
}, (err) => {
// Do something with request error
errorHandle(err)
return Promise.reject(err)
})
// 对错误统一处理
// Add a response interceptor 响应拦截器
instance.interceptors.response.use((res) => {
const key = res.url + '&' + res.method
this.removePending(key)
if (res.status === 200) {
return Promise.resolve(res.data)
} else {
return Promise.reject(res)
}
}, (err) => {
// Any status codes that falls outside the range of 2xx cause this function to trigger
// Do something with response error
errorHandle(err)
return Promise.reject(err)
})
}
// 创建实例
request (options) {
const instance = axios.create()
this.interceptors(instance)
const newOptions = Object.assign(this.getInsideConfig(), options)
return instance.request(newOptions)
}
// get 请求
get (url, config) {
const options = Object.assign({
method: 'get',
url: url
}, config)
return this.request(options)
}
// post 请求
post (url, data) {
const options = Object.assign({
method: 'post',
url: url,
data: data
})
return this.request(options)
}
}
export default HttpRequest