前端面试问题之axios 是否可以取消请求【网络、web应用场景】

132 阅读2分钟

Axios 可以取消请求。官方文档指出有两种方法可以取消请求,分别是cancelTokenAbortController,示例代码如下:

  1. 使用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(...)` 来取消尚未完成的请求,并提供一个原因字符串。这个字符串可以作为一个标志,用于记录或传达请求被取消的具体原因。
  1. 使用 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` 内部会抛出一个错误并终止请求。这通常用于在请求进行中取消它,例如当用户执行了某个操作,或者应用程序的状态改变导致该请求不再必要。

  1. 使用AbortController
const controller = new AbortController();
axios.get("/foo/bar", { signal: controller.signal }).then(function (response) {
  //...
});
controller.abort();

通过文档描述和示例代码,可以总结出以下功能点:

www.axios-http.cn 官网有说明更详细一些哦。

  1. 支持cancelToken取消请求,cancelToken可以通过工厂函数产生,也可以通过构造函数生成;
  2. 支持 Fetch API 的AbortController取消请求;
  3. 一个token/signal可以取消多个请求,一个请求也可同时使用token/signal
  4. 如果在开始axios request之前执行了取消请求,则并不会发出真实的请求。