如何取消 http/https 请求

最近在开发中需要取消一个http请求，经过一番谷歌搜索后，找到了解决方案！不过这些方法的场景并不完全一致，所以我需要将他们结合在一起，符合我的业务场景。

为什么要取消请求？什么时候需要这个？

有很多情况是需要取消请求的，例如当我尝试将用户的输入发送到后台是，我就需要考虑取消请求！详细的场景：当前的平台是需要用户注册，注册需要用户输入用户名，而这些用户名是唯一的，所以我们就需要在特定的间隔内，采用debounce，像后端发送请求，判断截至目前用户输入的用户名是否可用，通过下面的截图你可以看到：当用户尝试为其 Gmail 帐户选择用户名时，Google 甚至使用了这种技术。

注意，如果我们的后端程序可以闪电般的对发送的请求做出响应，我们可能永远不需要这样做。

现场实施

就像我之前说的，我写这篇文章是为了在一个实例中展示这个特性。但是，我不想在与该功能无关的事情上浪费太多时间。

所以现在怎么办？我开发了一个简单的 UI，带有一些基本的 html 和 CDN 来获取 css。我会留下完整的 github 存储库的链接，这样就可以参考整个代码。

现在，如果你愿意，你可以从头开始实现取消功能。但是，axios 库已经为此内置了功能，因此我们无需重新发明轮子，而是继续使用 axios。

由于本文关注前端，我们将只使用我从这篇文章Debounce in React.js 中获得的公共 API 。

API 端点 — ( api.punkapi.com/v2/beers )

查询参数——beer_name(String)

API 文档 — ( punkapi.com/documentation/v2 )

我会设置去抖动功能并点击这个端点，然后回到本文的重点。

现在我们的去抖动功能已经到位，并且当前达到了我们想要的效果，我们的文件应该看起来像这样。

（注意：我将 javascript 移动到一个单独的文件中，以使代码更整洁）

取消功能

现在，要实现这一点，我们只需要 4 个简单的步骤：

1. 在我们的请求范围之外创建一个变量，它将保存对当前请求的引用并将其初始化为 null。
2. 当一个请求被触发时，将该请求分配给我们创建的变量。
3. 创建一个检查以查看我们的变量是否具有有效的赋值。如果它确实访问该值并取消请求，如果它不继续进行。
4. 将请求添加到 axios 取消令牌。

有了这四个步骤，我们就可以取消http/https请求了。只需遵循上面提到的此功能的四个核心概念，就可以在您选择的任何框架中轻松实现这一点。