axios取消请求

在使用Axios发送请求时，有时可能需要取消请求，特别是在用户需要中断请求或离开当前页面时。Axios提供了取消请求的功能，以便有效地管理和处理请求的取消操作。

取消请求的方法

Axios使用了CancelToken和cancel方法来实现请求的取消。CancelToken是一个用于创建取消令牌的类，而cancel方法用于取消请求。以下是取消请求的方法：

创建取消令牌

要创建取消令牌，可以使用axios.CancelToken.source方法，它会返回一个包含token和cancel属性的对象。token是一个用于标识取消令牌的对象，而cancel是一个取消请求的函数。以下是一个创建取消令牌的示例：

代码语言：javascript复制

var CancelToken = axios.CancelToken;
var source = CancelToken.source();

// 取消请求
source.cancel("请求被取消");

在上面的示例中，我们使用axios.CancelToken.source()方法创建了一个取消令牌的实例，并将其保存在source变量中。然后，我们使用source.cancel()方法取消了请求，并传递了一个取消消息作为参数。

发送请求时添加取消令牌

要在发送请求时添加取消令牌，可以将cancelToken配置选项设置为之前创建的取消令牌的token属性。这样，当需要取消请求时，只需调用取消令牌的cancel方法即可。以下是一个发送请求时添加取消令牌的示例：

代码语言：javascript复制

axios.get("/data", {
  cancelToken: source.token
})
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    if (axios.isCancel(error)) {
      console.log("请求被取消：", error.message);
    } else {
      console.log("请求错误：", error);
    }
  });

在上面的示例中，我们使用source.token将取消令牌添加到了请求的配置选项中。如果请求被取消，我们可以通过axios.isCancel()方法检查错误类型，并根据需要进行处理。

取消多个请求

如果需要同时取消多个请求，可以使用axios.CancelToken.source()方法创建多个取消令牌。然后，可以将这些取消令牌分别添加到相应的请求配置中，并在需要取消请求时调用相应的取消函数。以下是一个取消多个请求的示例：

代码语言：javascript复制

var CancelToken = axios.CancelToken;
var source1 = CancelToken.source();
var source2 = CancelToken.source();

axios.get("/data1", {
  cancelToken: source1.token
})
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    if (axios.isCancel(error)) {
      console.log("请求1被取消：", error.message);
    } else {
      console.log("请求1错误：", error);
    }
  });

axios.get("/data2", {
  cancelToken: source2.token
})
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    if (axios.isCancel(error)) {
      console.log("请求2被取消：", error.message);
    } else {
      console.log("请求2错误：", error);
    }
  });

// 取消请求1
source1.cancel("请求1被取消");

// 取消请求2
source2.cancel("请求2被取消");

在上面的示例中，我们创建了两个取消令牌source1和source2，并将它们分别添加到两个不同的请求配置中。然后，我们分别调用相应的取消函数来取消请求1和请求2。

示例和使用场景

使用取消请求的方法和处理取消请求的情况：

代码语言：javascript复制

var CancelToken = axios.CancelToken;
var source = CancelToken.source();

axios.get("/data", {
  cancelToken: source.token
})
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    if (axios.isCancel(error)) {
      console.log("请求被取消：", error.message);
    } else {
      console.log("请求错误：", error);
    }
  });

// 模拟取消请求的场景
setTimeout(function () {
  source.cancel("请求被取消");
}, 2000);

在上面的示例中，我们发送了一个GET请求，并使用取消令牌将其添加到请求配置中。然后，我们使用setTimeout函数模拟了一个延迟2秒后取消请求的场景。当请求被取消时，我们通过检查错误类型来判断是否是取消错误，并相应地进行处理。

使用取消请求的场景包括但不限于：

当用户需要中断请求或离开当前页面时，可以取消请求，以避免不必要的网络流量和响应处理。
在进行连续的请求时，如果前一个请求还未完成，但用户已经进行了新的操作，可以取消前一个请求，以确保只处理最新的请求。

axios

0 人点赞