Skip to content

Latest commit

 

History

History
93 lines (62 loc) · 2.57 KB

取消已发送的网络请求.md

File metadata and controls

93 lines (62 loc) · 2.57 KB
Raw

取消已发送的网络请求

根据发送网络请求的 API 不同，取消方法不同。

常用的网络请求有如下三种：

  • XHR
  • Fetch
  • Axios

根据不同的网络请求方式，有对应不同的取消方法，下面来看看如何操作。

XHR 使用 xhr.abort()

如果使用 XMLHttpRequest 发送请求可以使用 XMLHttpRequest.abort()：

const xhr = new XMLHttpRequest()

xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true)
xhr.send()

// 取消发送请求
xhr.abort()

Fetch 使用 AbortController

使用 fetch 发送请求可以使用 AbortController。

AbortController 不仅可以取消 Fetch 请求发送，同样也可以取消事件的监听（通过 addEventListener 的第三个参数 signal 控制）。

  • 发送请求时，使用一个 signal 选项控制 fetch 请求
  • 使用 abort() 方法取消请求的发送
const controller = new AbortController()
const signal = controller.signal

// 调用 abort 时触发
signal.addEventListener('abort', () => alert('abort!'))

fetch('https://jsonplaceholder.typicode.com/todos/1', {
  signal
})
  .then((response) => response.json())
  .then((json) => console.log(json))

controller.abort()

// 事件触发，signal.aborted 变为 true
alert(signal.aborted) // true

Axios 使用 CancelToken

Axios 中通过 CancelToken 取消请求发送：

const CancelToken = axios.CancelToken
const source = CancelToken.source()

axios.get('https://jsonplaceholder.typicode.com/todos/1', {
  cancelToken: source.token
})

// 取消请求（消息参数是可选的）
source.cancel('用户已取消操作')

也可以通过调用 CancelToken 的构造函数来创建 CancelToken：

const CancelToken = axios.CancelToken
let cancel

axios.get('https://jsonplaceholder.typicode.com/todos/1', {
  cancelToken: new CancelToken((c) => {
    cancel = c
  })
})

cancel() // 取消请求

对于浏览器环境，Axios 底层使用 XMLHttpRequest 对象来发起 HTTP 请求。它使用基于 XHR 的 xhr.abort() 方法取消请求，详见源码。

对于 Node.js 环境，Axios 底层使用 HTTP/HTTPS 模块对象来发起 HTTP 请求。使用 request.abort()，详见源码。

更多资料