vue中 axios如何二次封装?
时间: 2023-11-27 09:46:07 浏览: 105
vue axios基于常见业务场景的二次封装的实现
5星 · 资源好评率100%
在Vue中,我们可以通过对Axios进行二次封装来方便地处理HTTP请求。以下是一个简单的Axios二次封装的示例:
```javascript
import axios from 'axios'
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 5000
})
service.interceptors.request.use(
config => {
// 在请求发送之前做一些处理
return config
},
error => {
// 处理请求错误
console.log(error)
return Promise.reject(error)
}
)
service.interceptors.response.use(
response => {
// 在响应数据之前做一些处理
return response.data
},
error => {
// 处理响应错误
console.log(error)
return Promise.reject(error)
}
)
export default service
```
在这个示例中,我们首先使用`axios.create()`方法创建了一个Axios实例,并设置了一些默认配置。然后,我们使用`interceptors`属性添加了请求和响应拦截器,以便在请求和响应之前进行一些处理。最后,我们导出了这个Axios实例,以便在整个应用程序中使用它来发送HTTP请求。
阅读全文