vue3axios封装与使用
时间: 2023-11-24 09:40:51 浏览: 34
Vue 3 是目前最新的 Vue 版本,相信很多人都在使用它。而 axios 则是一个非常优秀的 HTTP 库,已成为前端开发中不可或缺的一部分。在 Vue 3 中使用 axios,我们可以将其进行封装以方便调用。
以下是一个简单的 axios 封装示例:
```javascript
import axios from 'axios'
const instance = axios.create({
baseURL: 'https://api.example.com',
timeout: 10000
})
instance.interceptors.request.use(
config => {
// 在请求发送之前做些什么
return config
},
error => {
// 对请求错误做些什么
return Promise.reject(error)
}
)
instance.interceptors.response.use(
response => {
// 对响应数据做些什么
return response
},
error => {
// 对响应错误做些什么
return Promise.reject(error)
}
)
export default instance
```
在上面的代码中,我们首先使用 `axios.create()` 方法创建了一个 axios 实例,并设置了基本的配置信息,包括请求的基础 URL 和超时时间。
接下来,我们使用 `instance.interceptors.request.use()` 方法添加了一个请求拦截器,用于在请求发送之前做一些自定义的操作,比如添加请求头、修改请求参数等。同样的,我们还可以使用 `instance.interceptors.response.use()` 方法添加一个响应拦截器,在接收到响应数据之后对其进行处理。
最后,我们将封装好的 axios 实例导出,以便在项目中使用。
下面是一个使用封装后的 axios 实例的例子:
```javascript
import axios from '@/utils/axios'
export function getUserInfo(id) {
return axios({
url: '/user/info',
method: 'get',
params: { id }
})
}
```
在上面的代码中,我们使用 `import` 导入了封装后的 axios 实例,并使用 `axios()` 方法发送了一个 GET 请求,其中包含了请求的 URL、请求方法和请求参数。在这个例子中,我们请求了用户信息,并将用户 ID 作为参数传递给了后端。
这就是一个简单的 axios 封装示例,当然,实际项目中可能会有更多的配置和自定义操作。但是不管怎样,通过 axios 封装,我们可以让我们的项目更加规范、易于维护。