封装axios时使用cancelToken
时间: 2024-09-24 09:26:55 浏览: 22
封装 Axios 时使用 cancelToken 主要是为了实现异步请求的取消功能。`CancelToken` 是 Axios 提供的一种机制,它创建了一个可以取消的令牌,当需要取消某个请求时,你可以通过这个令牌来中断请求流程。
以下是封装 Axios 使用 `cancelToken` 的简单示例:
```javascript
import axios from 'axios';
import { CancelToken } from 'axios';
class CustomAxios {
constructor() {
this.cancelTokenSource = new CancelToken((cancel) => {
this.cancelToken = cancel;
});
}
// 发起请求并返回一个 Promise
async request(method, url, data) {
try {
const response = await axios({
method,
url,
data,
cancelToken: this.cancelTokenSource.token,
// ...其他配置选项
});
return response;
} catch (error) {
if (error instanceof axios.Cancel) {
console.log('Request cancelled');
} else {
throw error;
}
}
}
// 取消请求
cancel() {
this.cancelTokenSource.cancel();
}
}
// 使用示例
const myAxios = new CustomAxios();
myAxios.request('GET', '/api/data')
.then(response => console.log(response))
.catch(error => console.error(error));
// 需要在适当的时候取消请求,例如用户离开页面
myAxios.cancel();
```