Fetch请求的取消

在实际开发中,我们常常会遇到根据输入框输入的内容,实时去请求接口并将拿到的数据渲染到页面上,但是由于接口响应时间不可控,简单来说就是请求的顺序和响应的顺序不一致,就会导致你可能输入了12,但实际返回给你的是34。
在这里插入图片描述123
这种需求用防抖和节流是解决不了的,所以就需要用到请求取消

const input = document.querySelector("input");
input.addEventListener("input", function (e) {
  const v = e.target.value;
  request(v);
});

let controller;
async function request(v) {
  // 判断如果有值就取消
  controller && controller.abort();
  // 创建一个控制器
  controller = new AbortController();
  const list = await fetch(
    "http://www.***.com?kw=" + v,
    {
      // 将控制器关联到每一次请求
      signal: controller.signal,
    }
  )
    .then((res) => res.json())
    .then((res) => res);
  // 调用abort方法来取消请求  
  controller.abort();
  render(list);
}

function render(list) {
  // 将数据渲染到页面 ... 
}
### 使用 AbortController 中止异步 Fetch 请求 AbortController 是一种现代浏览器中的 Web API,专门设计用来控制和中止一个或多个 Fetch 请求。通过创建 `AbortController` 实例并将其信号 (`signal`) 传递给 Fetch 方法,可以实现对请求的动态管理。 以下是具体实现方法: #### 创建控制器实例 首先需要创建一个新的 `AbortController` 对象实例。该对象提供了一个 `abort()` 方法,调用此方法即可触发中止行为[^1]。 ```javascript const controller = new AbortController(); ``` #### 将信号绑定到 Fetch 请求 在发起 Fetch 请求时,可以通过设置选项参数 `{ signal: controller.signal }` 来关联这个控制器的信号。一旦调用了 `controller.abort()`,Fetch 操作会立即被中止,并抛出名为 `'AbortError'` 的异常[^2]。 ```javascript try { const response = await fetch('https://example.com/api/data', { method: 'GET', signal: controller.signal }); } catch (error) { if (error.name === 'AbortError') { console.log('Request aborted'); } else { throw error; } } ``` #### 主动中止请求 当满足特定条件(如超时或其他逻辑判断),可手动调用 `controller.abort()` 函数来停止正在进行的请求。例如,在一定时间后自动取消请求[^3]: ```javascript setTimeout(() => { controller.abort(); }, 5000); // 设置 5 秒后中止请求 ``` 如果请求已经被成功中止,则会在上述 `catch` 块中捕获错误,并检测其名称是否为 `'AbortError'` 进行相应处理。 --- ### 完整示例代码 以下是一个完整的例子展示如何利用 `AbortController` 结合定时器机制来安全地中止长时间运行的 Fetch 请求: ```javascript // 初始化 AbortController 控制器 let controller = new AbortController(); // 设定延迟后执行 abort 动作 setTimeout(() => { controller.abort(); // 调用 abort 方法中断请求 console.log("The request was intentionally aborted."); }, 3000); try { let response = await fetch('https://api.example.com/long-running-task', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key: "value" }), signal: controller.signal // 绑定信号至请求配置项 }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } let result = await response.json(); console.log(result); } catch(error) { if (error.name === 'AbortError') { console.error('Fetch operation has been aborted.'); } else { console.error('An unexpected error occurred:', error.message); } } ``` --- 问题
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值