vue3 axios封装
时间: 2023-06-21 07:14:31 浏览: 49
Vue3 与 Vue2 在使用 axios 进行网络请求的方式上是类似的,都可以通过封装 axios 实现更方便的网络请求操作。下面是一个简单的 Vue3 axios 封装示例:
```javascript
// src/utils/request.js
import axios from 'axios'
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 5000
})
service.interceptors.request.use(
config => {
// 在发送请求之前可以进行一些操作,例如添加 token
// config.headers['Authorization'] = getToken()
return config
},
error => {
// 错误处理
console.log(error)
return Promise.reject(error)
}
)
service.interceptors.response.use(
response => {
// 对响应数据进行处理,例如统一处理错误码
const res = response.data
if (res.code !== 200) {
console.log('Error:' + res.message)
return Promise.reject(new Error(res.message || 'Error'))
} else {
return res
}
},
error => {
// 错误处理
console.log(error)
return Promise.reject(error)
}
)
export default service
```
在这个示例中,我们首先创建了一个 axios 实例,设置了基础 URL 和超时时间。然后使用 `interceptors` 对请求和响应进行拦截,可以在拦截器中添加一些通用的操作,例如添加 token、处理错误码等。最后通过 `export default` 导出这个 axios 实例,方便其他地方进行网络请求。
在组件中可以这样使用:
```javascript
import request from '@/utils/request'
export default {
methods: {
fetchData() {
request.get('/api/data').then(response => {
// 处理数据
}).catch(error => {
// 处理错误
})
}
}
}
```
这样就可以通过封装的 axios 实例进行网络请求了。注意,这个示例中的 `process.env.VUE_APP_BASE_API` 是在 `.env` 文件中定义的基础 URL,可以根据实际情况进行配置。
阅读全文