中止 Web 请求之-AbortController

49 阅读1分钟

是什么

AbortController 接口表示一个控制器对象,该对象允许您在需要时中止一个或多个 Web 请求

包含的属性和方法

  1. 属性 signal 表示的是一个AbortSignal 对象实例
  2. 方法 abort 表示的是中止一个请求

Controller 里面的AbortSignal是什么?

是一个信号对象,用来和异步操作(例如获取请求)进行通信

AbortSignal的属性

  1. 属性aborted 表示关联的请求是否中止
  2. 属性 reason 表示关联的请求中止的原因

大致流程

  1. 我们新建一个abortController对象
  2. 通过Controller属性 的 signal 对象
  3. 将属性和请求关联
  4. 设置一个定时器,在规定时间后调用controller.abort()方法中止请求
const abortcontroller = new AbortController()
fetch("http://www.baidu.com", {
    signal: abortcontroller.signal
}).then(res => {
    console.log(res)
}).catch(err => {
    console.log(err)
})

setTimeout(() => {
    abortcontroller.abort()
}, 10)