axios 请求拦截器 取消请求不提示

在前端开发过程中，我们经常使用 axios 来发送网络请求。axios 是一个基于 Promise 的 HTTP 客户端，它可以在浏览器和 Node.js 中使用。它具有许多强大的功能，其中之一就是请求拦截器。通过请求拦截器，我们可以在发送请求之前对请求进行一些操作，例如添加请求头、修改请求参数等。

然而，在某些情况下，我们可能需要取消正在进行的请求，并且不希望给用户显示任何关于取消请求的提示。本文将介绍如何使用 axios 请求拦截器来实现这一功能，并提供具体的代码示例。

使用 axios 发送请求

首先，我们需要安装 axios。可以使用 npm 或者 yarn 进行安装：

npm install axios
# 或者
yarn add axios

然后，在我们的代码中导入 axios：

import axios from 'axios';

接下来，我们可以使用 axios 发送一个简单的 GET 请求：

axios.get('
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

这是一个简单的示例，我们发送了一个 GET 请求到`

请求拦截器

现在，让我们来了解如何使用请求拦截器来取消请求，并且不显示任何提示。

首先，我们需要创建一个 axios 实例，并配置请求拦截器。我们可以通过axios.create()方法来创建一个实例，并使用interceptors属性来配置拦截器。

const instance = axios.create();

instance.interceptors.request.use(config => {
  // 在这里进行请求拦截操作
  return config;
}, error => {
  return Promise.reject(error);
});

在上面的代码中，我们使用instance.interceptors.request.use()方法来配置请求拦截器。该方法接受两个参数：一个用于处理成功的回调函数，一个用于处理失败的回调函数。在成功的回调函数中，我们可以对请求进行一些操作，并返回修改后的配置。在失败的回调函数中，我们可以对错误进行处理，并返回一个 rejected 的 Promise。

下面，让我们来添加取消请求的功能。

const CancelToken = axios.CancelToken;
let cancel;

instance.interceptors.request.use(config => {
  // 在这里进行请求拦截操作
  config.cancelToken = new CancelToken(function executor(c) {
    // 将 cancel 函数赋值给外部变量
    cancel = c;
  });
  return config;
}, error => {
  return Promise.reject(error);
});

在上面的代码中，我们引入了CancelToken对象，并在请求拦截器中创建了一个cancelToken。我们将cancel函数赋值给外部变量cancel，以便在需要的时候取消请求。

取消请求

现在，我们已经配置了请求拦截器，并且可以取消请求。让我们来看看如何取消一个请求。

cancel(); // 取消请求

如上所述，我们可以通过调用cancel函数来取消请求。这将终止请求，并且不会触发任何提示。

下面是一个完整的示例，演示了如何使用 axios 请求拦截器来取消请求，并且不显示任何提示：

import axios from 'axios';

const CancelToken = axios.CancelToken;
let cancel;

const instance = axios.create();
instance.interceptors.request.use(config => {
  config.cancelToken = new CancelToken(function executor(c) {
    cancel = c;
  });
  return config;
}, error => {
  return Promise.reject(error);
});

instance.get('
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

cancel(); // 取消请求

当我们运行上述代码时，将发出一个 GET 请求到`

总结

在本文中，我们学习了如何使用 axios 请求拦截器来取消请求，并且不显示任何提示。我们创建了一个 axios 实例，并使用`interceptors.request