vue2封装axios 取消请求
时间: 2024-09-25 17:18:21 浏览: 14
在Vue 2中封装axios进行HTTP请求时,处理取消请求通常会涉及到`axios.CancelToken`。你可以创建一个`cancelTokenSource`,然后返回这个源的`token`,当需要取消请求时,通过调用`cancelTokenSource.cancel()`来停止请求。下面是一个简单的封装示例:
```javascript
import axios from 'axios';
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // api 的基础地址
timeout: 5000, // 请求超时时间
cancelToken: new axios.CancelToken((c) => {
this.cancelRequest = c; // 将cancel函数绑定到组件实例上
}),
});
service.interceptors.request.use(
config => {
if (!config.cancelToken) {
config.cancelToken = this.cancelRequest; // 如果没有提供,则默认使用全局取消请求
}
return config;
},
error => Promise.reject(error)
);
export default service;
// 使用示例
this.$http.get('your-url').then(response => {
// 请求成功...
}).catch(error => {
if (error.response && error.response.status === 401) { // 检查是否是因为取消请求导致的状态码
// 登录过期,重新登录...
} else {
console.error('Error:', error);
}
}).finally(() => {
// 请求结束后的清理操作...
});
// 要取消请求时,只需调用cancel方法
if (this.cancelRequest && !this.cancelled) {
this.cancelRequest();
this.cancelled = true;
}
```
在这个例子中,当你需要取消请求时,可以在组件内调用`cancelRequest`。注意要保存一个标志`cancelled`来确认请求是否已经取消过,避免重复取消。