本文就简单的对Axios 请求拦截器以及响应拦截器的封装 进行代码的编写:
import axios from 'axios'
let baseURL_dev = 'http://localhost:8080' // 开发环境
// let baseURL_pro = '' // 公司域名
// let baseURL_test = '' // 内网地址
// 创建axios实例
const fetch = axios.create({
baseURL: baseURL_dev,
timeout: 7000, // 超时设置,如果7000毫秒还没有响应数据就会停止发送请求
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
})
// 封装请求拦截器
fetch.interceptors.request.use((config) => {
// 在这里做一些检测或者包装等处理
// console.log('请求拦截', config)
// 鉴权 token添加
config.headers.Authorization = localStorage.getItem('token') || ''
return config
})
// 封装响应拦截器
fetch.interceptors.response.use((response) => {
// 请求成功
// console.log('响应拦截', response)
// response数据过滤,根据后端标识字符来进行响应数据response的过滤
// 示例:假设后端返回的数据中有data字段,且data字段中有err字段
if (response.data && response.data.err==0) {
return response.data.data
} else { // 当然可根据返回字段进行多重数据过滤
alert(response.data.msg)
}
}, (error) => {
// 请求失败
return Promise.reject(error)
})
export default fetch