在vue3中使用alova封装请求拦截和响应拦截
时间: 2023-09-10 18:11:30 浏览: 79
可以使用axios库来进行请求拦截和响应拦截,然后在Vue3中使用alova来封装这些拦截器。
首先安装axios和alova库:
```
npm install axios --save
npm install aloba --save
```
然后在项目中创建一个api.js文件,用来封装axios请求和响应拦截:
```javascript
import axios from 'axios';
import { createApi } from 'aloba';
// 创建axios实例
const instance = axios.create({
baseURL: 'http://localhost:3000',
});
// 请求拦截器
instance.interceptors.request.use((config) => {
// 在请求头中添加token等信息
config.headers.Authorization = 'Bearer ' + localStorage.getItem('token');
return config;
});
// 响应拦截器
instance.interceptors.response.use((response) => {
// 如果响应状态码为401,则跳转到登录页
if (response.status === 401) {
location.href = '/login';
}
return response.data;
});
// 将axios实例传入createApi中,创建一个api实例
const api = createApi(instance);
export default api;
```
在上面的代码中,我们首先创建了一个axios实例,并对其进行了请求拦截和响应拦截。然后将该实例传入到alova的createApi方法中,创建一个api实例,并使用export default导出。
然后在Vue3组件中使用该api实例来发送请求:
```javascript
import api from './api.js';
export default {
async mounted() {
try {
const res = await api.get('/user');
console.log(res);
} catch (error) {
console.log(error);
}
},
};
```
在上面的代码中,我们首先引入了刚才封装好的api.js文件,并使用该实例发送了一个get请求。由于我们在响应拦截器中对响应进行了处理,所以我们可以直接拿到响应数据,而不是整个响应对象。
这样,我们就可以在Vue3中使用alova封装请求拦截和响应拦截了。