中止一个或多个 Web 请求

Posted 前端精髓

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了中止一个或多个 Web 请求相关的知识,希望对你有一定的参考价值。

我们在处理前后端交互的过程中,有时需要仔细斟酌接口的请求时机(例:频繁的Tab切换、树节点切换、数据录入时,请求什么时候发?)或接口返回数据的处理时机(例:接口还没返回时就要切换路由,路由都切换走了,之前请求的数据怎么办?),避免一些无用的请求或者接口返回顺序的差异(例如:同一个按钮点了多次,如果后点的先返回,先点的后返回,怎么办?)。

常见的处理方式有:

加防抖:控制请求时机。对于频繁操作,只在最后一次动作时,发出请求。

锁状态:控制请求时机。直接禁止很频繁的操作,必须一个接一个。

取消请求:控制请求处理时机。取消之前没返回的请求,不再处理了。

AbortController

AbortController 接口表示一个控制器对象,允许你根据需要中止一个或多个 Web 请求。

我们先使用 AbortController() 构造函数创建一个控制器,然后使用 AbortController.signal 属性获取其关联 AbortSignal 对象的引用。

当 fetch 请求初始化时,我们将 AbortSignal 作为一个选项传递进入请求的选项对象中(下面的 signal)。这将 signal 和 controller 与 fetch 请求相关联,并且允许我们通过调用 AbortController.abort() 去中止它。

const controller = new AbortController();

fetch('/foo/bar', 
   signal: controller.signal
).then(function(response) 
   //...
);
// 取消请求
controller.abort()

当 abort() 被调用时,这个 fetch() promise 将 reject 一个名为 AbortError 的 DOMException。

Axios

Axios 也支持以 fetch API 方式通过 AbortController 取消请求:

const controller = new AbortController();

axios.get('/foo/bar', 
   signal: controller.signal
).then(function(response) 
   //...
);
// 取消请求
controller.abort()

使用 Axios 您还可以使用 cancel token 取消一个请求。

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

axios.get('/user/12345', 
  cancelToken: source.token
).catch(function (thrown) 
  if (axios.isCancel(thrown)) 
    console.log('Request canceled', thrown.message);
   else 
    // 处理错误
  
);

axios.post('/user/12345', 
  name: 'new name'
, 
  cancelToken: source.token
)

// 取消请求(message 参数是可选的)
source.cancel('Operation canceled by the user.');

AJAX

AJAX 正在逐渐被 javascript 框架中的函数和官方的 Fetch API 标准取代。如果该请求已被发出,XMLHttpRequest.abort() 方法将终止该请求。当一个请求被终止,它的 readyState 将被置为 XMLHttpRequest.UNSENT (0),并且请求的 status 置为 0。

var xhr = new XMLHttpRequest(),
    method = "GET",
    url = "https://developer.mozilla.org/";
xhr.open(method, url, true);

xhr.send();

if (OH_NOES_WE_NEED_TO_CANCEL_RIGHT_NOW_OR_ELSE) 
  xhr.abort();

Axios 内部也提供了对 AbortController 的兼容处理。


const controller = new AbortController();
const signal = controller.signal
signal.addEventListener('abort', () => 
  console.log('事件监听器')
)

const xhr = new XMLHttpRequest(),
    method = "GET",
    url = "https://developer.mozilla.org/";
xhr.open(method, url, true);

xhr.send();

if (signal.aborted) 
  console.log('请求被终止');
 else 
  controller.abort().
  xhr.abort();

属性 aborted一个 Boolean,表示与之通信的请求是否被终止(true)或未终止(false)。

当使用 addEventListener() 或将事件监听器分配给该接口的 onabort 属性,请求被中止时调用。

以上是关于中止一个或多个 Web 请求的主要内容,如果未能解决你的问题,请参考以下文章

中止一个或多个 Web 请求

AbortController 中止一个或多个 Web请求

AbortController 中止一个或多个 Web请求

请求被中止:无法为 HttpWebRequest 创建 SSL/TLS 安全通道

使用GCD中的dispatch_semaphore(信号量)处理一个界面多个请求(把握AFNet网络请求完成的正确时机)

中止/取消/放弃angular js中的http请求并重试