vue3 + vite 完美封装axios
时间: 2023-12-10 21:05:04 浏览: 125
以下是Vue3 + Vite完美封装Axios的示例代码:
```typescript
import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
// 创建一个axios实例
const service: AxiosInstance = axios.create({
baseURL: '/api', // api的base_url
timeout: 5000 // 请求超时时间
})
// 请求拦截器
service.interceptors.request.use(
(config: AxiosRequestConfig) => {
// 在发送请求之前做些什么
return config
},
(error: any) => {
// 对请求错误做些什么
console.log(error) // for debug
Promise.reject(error)
}
)
// 响应拦截器
service.interceptors.response.use(
(response: AxiosResponse) => {
// 对响应数据做点什么
return response.data
},
(error: any) => {
// 对响应错误做点什么
console.log('err' + error) // for debug
return Promise.reject(error)
}
)
export default service
```
在上面的代码中,我们首先使用`axios.create()`方法创建了一个axios实例,并设置了baseURL和timeout。然后,我们使用`interceptors`属性添加了请求拦截器和响应拦截器,以便在请求和响应时进行一些处理。
在请求拦截器中,我们可以对请求进行一些处理,例如添加请求头、请求参数等。在响应拦截器中,我们可以对响应进行一些处理,例如对返回的数据进行格式化、错误处理等。
最后,我们导出了这个axios实例,以便在其他地方使用。
阅读全文
相关推荐


















