Axios 可以取消请求。官方文档指出有两种方法可以取消请求,分别是cancelToken和AbortController,示例代码如下:
- 使用
cancelToken的方法一:
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.post("/user/12345", { name: "new name" }, { cancelToken: source.token });
source.cancel("Operation canceled by the user.");
- `const CancelToken = axios.CancelToken;`:从 `axios` 库导入 `CancelToken` 构造函数。
- `const source = CancelToken.source();`:创建一个 `CancelToken` 的实例,同时获取其 `token` 和 `cancel` 方法。`source.token` 可以作为 `cancelToken` 参数传递给 `axios` 请求。`source.cancel(...)` 可以在需要时调用以取消请求。
- `axios.post(...)`:发送一个 `POST` 请求到指定的URL,请求体中包含一个 `name` 字段。在配置对象中,`cancelToken: source.token` 设置了请求的 `CancelToken`,以便后续可以使用 `source` 来取消这个请求。
- `source.cancel("Operation canceled by the user.");`:最后,调用 `source.cancel(...)` 来取消尚未完成的请求,并提供一个原因字符串。这个字符串可以作为一个标志,用于记录或传达请求被取消的具体原因。
- 使用
cancelToken的方法二:
const CancelToken = axios.CancelToken;
let cancel;
axios.get("/user/1212", {
cancelToken: new CancelToken(function executor(v) {
cancel = v;
}),
});
cancel();
- `const CancelToken = axios.CancelToken;`:引入 `axios` 库中的 `CancelToken` 构造函数。`CancelToken` 可以创建一个令牌(token)和一个取消函数(cancel function)。这个令牌可以与请求关联,而取消函数可以用来取消请求。
- `axios.get(...)`:使用 `axios` 库发送一个 `GET` 请求到指定的 URL。在配置对象中,通过 `cancelToken` 属性关联了一个新的 `CancelToken` 实例。
- `new CancelToken(function executor(c) {...})`:创建了一个新的 `CancelToken` 实例。它接受一个回调函数 `executor`,这个回调函数接收一个参数 `c`,即取消函数。在回调函数内部,将这个取消函数赋值给外部作用域的变量 `cancel`,以便后续使用。
- `cancel();`:这行代码直接调用了 `cancel` 函数,这将导致关联的 `GET` 请求被取消。`axios` 内部会抛出一个错误并终止请求。这通常用于在请求进行中取消它,例如当用户执行了某个操作,或者应用程序的状态改变导致该请求不再必要。
- 使用
AbortController:
const controller = new AbortController();
axios.get("/foo/bar", { signal: controller.signal }).then(function (response) {
//...
});
controller.abort();
通过文档描述和示例代码,可以总结出以下功能点:
www.axios-http.cn 官网有说明更详细一些哦。
- 支持
cancelToken取消请求,cancelToken可以通过工厂函数产生,也可以通过构造函数生成; - 支持 Fetch API 的
AbortController取消请求; - 一个
token/signal可以取消多个请求,一个请求也可同时使用token/signal; - 如果在开始
axios request之前执行了取消请求,则并不会发出真实的请求。