我们从封装axios请求中来讲解拦截器
首先引入axios
import axios from 'axios'创建axios请求dolphinRequest
const dolphinRequest = axios.create({
baseURL: ip地址
timeout: 15000 //定义请求超时时长
})
*请求发送之前拦截（可以处理一些数据）
dolphinRequest.interceptors.request.use(
config => {
//统一设置请求头部信息
config.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8'
//判断请求方式是post还是get
if (config.method === 'post') {
config.data = qs.parse(config.data)
}
if (config.method === 'get') {
config.params = { ...config.params }
config.params = qs.parse(qs.stringify(config.params))
}
//数据根据请求方式进行拼接发送给后台
return config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
)
*后台相应之后的拦截（对接收的数据进行处理之后再使用）
dolphinRequest.interceptors.response.use(
response => {
const res = response.data
if (res.code !== 200) { //错误提示
return Promise.reject(res.msg || 'Error')
} else { //成功返回数据
return res
}
},
error => {
return Promise.reject(error)
}
)
- 导出封装好的axios,供外部使用
export { dolphinRequest }
