如何取消 http/https 请求

举报
搞前端的半夏 发表于 2022/06/30 21:55:11 2022/06/30
【摘要】 最近在开发中需要取消一个http请求,经过一番谷歌搜索后,找到了解决方案!不过这些方法的场景并不完全一致,所以我需要将他们结合在一起,符合我的业务场景。 为什么要取消请求?什么时候需要这个?有很多情况是需要取消请求的,例如当我尝试将用户的输入发送到后台是,我就需要考虑取消请求!详细的场景:当前的平台是需要用户注册,注册需要用户输入用户名,而这些用户名是唯一的,所以我们就需要在特定的间隔内,采...

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

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

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

截图 2022-06-12 下午 2.34.32.png

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

现场实施

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

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

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

截图 2022-06-12 下午 3.26.30.png

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

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

查询参数——beer_name(String)

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

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

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

(注意:我将 javascript 移动到一个单独的文件中,以使代码更整洁)

屏幕截图 2022-06-16 上午 11.07.58.png

取消功能

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

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

屏幕截图 2022-06-16 在 12.22.37 PM.png

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

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200