中断已发出去的请求

这篇具有很好参考价值的文章主要介绍了中断已发出去的请求。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

项目中遇到过频繁切换标签的问题,由于不同标签请求的ajax的结果所需时间不同,以及网络环境等因素,我们点击不同标签时,响应时间最慢的数据会覆盖之前响应的数据,显示数据跟所点击标签不对应,即竞态问题

 1. 交互层面解决

在发起请求后,我们添加全局的 loading 遮罩,或者 disabled 查询按钮 ,这样我们在一个请求未完成前不能发送新的请求。

2.取消已发送的请求

2.1 AbortController

AbortController 接口表示一个控制器对象,可以根据需要终止一个或多个Web请求。

  • AbortController(): AbortController()构造函数创建一个新的 AbortController 对象实例

  • signal:signal 属性返回一个 AbortSignal 对象实例,它可以用来 with/about 一个Web(网络)请求

  • abort():终止一个尚未完成的Web(网络)请求,它能够终止 fetch 请求,任何响应Body的消费者和

let controller;
const url = "video.mp4";

const downloadBtn = document.querySelector(".download");
const abortBtn = document.querySelector(".abort");

downloadBtn.addEventListener("click", fetchVideo);

abortBtn.addEventListener("click", () => {
  if (controller) {
    controller.abort();
    console.log("中止下载");
  }
});

function fetchVideo() {
  controller = new AbortController();
  const signal = controller.signal;
  fetch(url, { signal })
    .then((response) => {
      console.log("下载完成", response);
    })
    .catch((err) => {
      console.error(`下载错误:${err.message}`);
    });
}
  • 兼容性

中断已发出去的请求,axios 

2.2 axios 中断请求

2.2.1 方式一

使用 CancelToken.souce 工厂方法创建一个 cancel token,代码如下:


// CancelToken是一个构造函数,用于创建一个cancelToken实例对象
// cancelToken实例对象包含了一个promise属性,值为可以触发取消请求的一个promise
const CancelToken = axios.CancelToken;

// 执行source()得到的是一个包含了cancelToken对象和一个取消函数cancel()的对象
// 即 source = {token: cancelToken对象, cancel: 取消函数}
const source = CancelToken.source();

// 在请求的配置中配置cancelToken,那么这个请求就有了可以取消请求的功能
axios.get('https://mdn.github.io/dom-examples/abort-api/sintel.mp4', {
  cancelToken: source.token
}).catch(function (thrown) {
  // 判断请求是否已中止
  if (axios.isCancel(thrown)) {
    // 参数 thrown 是自定义的信息
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误
  }
});

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

 2.2.2 方式二

通过传递一个 executor 函数到 CancelToken 的构造函数来创建一个 cancel token:

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函数接收一个 cancel 函数作为参数
    // 把cancel函数传递给外面,使得外面能控制执行取消请求
    cancel = c;
  })
});

// 取消请求
cancel('Operation canceled by the user.');

2.2.3 封装使用文章来源地址https://www.toymoban.com/news/detail-678977.html

import axios from 'axios'
import qs from 'qs'

// 用于存储pending的请求(处理多条相同请求)
const pendingRequest = new Map()

// 生成request的唯一key
const generateRequestKey = (config = {}) => {
  // 通过url,method,params,data生成唯一key,用于判断是否重复请求
  // params为get请求参数,data为post请求参数
  const { url, method, params, data } = config
  return [url, method, qs.stringify(params), qs.stringify(data)].join('&')
}

// 将重复请求添加到pendingRequest中
const addPendingRequest = (config) => {
  const key = generateRequestKey(config)
  if (!pendingRequest.has(key)) {
    config.cancelToken = new axios.CancelToken(cancel => {
      pendingRequest.set(key, cancel)
    })
  }
}

// 取消重复请求
const removePendingRequest = (config) => {
  const key = generateRequestKey(config)
  if (pendingRequest.has(key)) {
    const cancelToken = pendingRequest.get(key)
    cancelToken(key) // 取消之前发送的请求
    pendingRequest.delete(key)// 请求对象中删除requestKey
  }
}

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 处理重复请求
    removePendingRequest(config)
    addPendingRequest(config)

    return config
  },
  error => {
    // 处理请求错误
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 移除重复请求
    removePendingRequest(response.config)
    
    return res
  },
  error => {
    // 异常情况console,方便排查问题
    console.log('error', error)
    // 移除重复请求
    removePendingRequest(error.config || {})
    
    return Promise.reject(error)
  }
)

到了这里,关于中断已发出去的请求的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 如何在 Javascript 中发出 HTTP 请求?

    您可以使用 XMLHttpRequest 或 fetch API 在 JavaScript 中发出 HTTP 请求。 使用 XMLHttpRequest: 使用 fetch: 请注意,这些示例代码都是 GET 请求,您可以根据需要更改为 POST、PUT 等请求方法。

    2024年02月07日
    浏览(37)
  • 在 Node.js 中发出 HTTP 请求的 5 种方法

    学习如何在 Node.js 中发出 HTTP 请求可能会让人感到不知所措,因为有数十个可用的库,每个解决方案都声称比上一个更高效。一些库提供跨平台支持,而另一些库则关注捆绑包大小或开发人员体验。 在这篇文章中,我们将探讨在 Node.js 中发出 HTTP 请求的五种最流行的方法,并

    2024年02月04日
    浏览(46)
  • 【微软技术栈】C#.NET 使用 HttpClient 类发出 HTTP 请求

    创建 HttpClient 发出 HTTP 请求 处理 HTTP 响应 HTTP 错误处理 HTTP 代理 本文介绍如何使用  HttpClient  类发出 HTTP 请求和处理响应。  重要 所有示例 HTTP 请求都以下面 URL 之一为目标: https://jsonplaceholder.typicode.com:用于测试和原型设计的免费虚设 API。 https://www.example.com:此域用于

    2024年02月04日
    浏览(37)
  • Selenium Wire - 扩展 Selenium 能够检查浏览器发出的请求和响应

    使用 Selenium 进行自动化操作时,会存在很多的特殊场景,比如会修改请求参数、响应参数等。 本篇将介绍一款 Selenium 的扩展,即能够检查浏览器发出的请求和响应 - Selenium Wire。 Selenium Wire 扩展了 Selenium 的 Python 绑定,可以访问浏览器发出的底层请求。除了与 Selenium 相同的

    2024年02月04日
    浏览(55)
  • Python |Selenium Wire 扩展Selenium的Python绑定,使您能够检查浏览器发出的请求。

       前面介绍了Seleniums的入门应用,现在为大家介绍它的一个插件Selenium Wire。现如今部分网站都设置了反爬机制,常见的就是在接口请求头中有js代码生成的请求参数,那么一般通过js破解参数难度较大,于是就可以借助Selenium Wire来获取解析后的参数,可以实现这样一个功能

    2024年02月11日
    浏览(46)
  • 【axios网络请求库】认识Axios库;axios发送请求、创建实例、创建拦截器、封装请求

    功能特点: 在浏览器中发送 XMLHttpRequests 请求 在 node.js 中发送 http请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 支持多种请求方式: axios(config) axios.request(config) axios.get(url[, config]) axios.delete(url[, config]) axios.head(url[, config]) axios.post(url[, data[, config]]) axios.put(url[, data[, c

    2024年02月10日
    浏览(41)
  • 提示“无法向会话状态服务器发出会话状态请求。请确保 ASP.NET State Service (ASP.NET 状态服务)已启动”,如何解决?

        在aspx网站部署过程中,出现“无法向会话状态服务器发出会话状态请求。请确保 ASP.NET State Service (ASP.NET 状态服务)已启动”的提示,如下图,如何解决? 解决方案1: Web.Config里面 把sessionState 的mode改为\\\"InProc\\\" ;  mode 设置将决定Session信息存储位置,可设置为下面几种类型

    2024年02月15日
    浏览(47)
  • axios使用axiosSource.cancel取消请求后怎么恢复请求,axios取消请求和恢复请求实现

    在前端做大文件分片上传,或者其它中断请求时,需要暂停或重新请求,比如这里大文件上传时,可能会需要暂停、继续上传,如下GIF演示: 这里不详细说文件上传的处理和切片细节,后续有时间在出一篇,大文件上传,切片上传、断点续传、秒传等😀。 不扯远了,紧接本

    2024年02月12日
    浏览(40)
  • 【axios】vue中axios的请求配置

    注意:本文实例化为TS版 axios 是一个基于 promise 封装的网络请求库,它是基于 原生XHR 进行二次封装,可以说是 XHR 的一个子集,而 XHR 又是 Ajax 的一个子集 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 转换请求数据和响应数据 取消请求

    2024年02月10日
    浏览(37)
  • Vue3 网络请求——axios 高级用法之 axios 拦截器实战与并发请求

    Axios 是一个流行的基于 Promise 的 HTTP 客户端库,用于在浏览器和 Node.js 中发出 HTTP 请求。 Axios 还支持请求和响应的拦截器。接下来通过这篇文章,我们一起来学习和了解一下 Axios 拦截器和并发请求,通过实际代码来介绍如何使用 Axios 拦截器。 拦截器会在发生响应请求之前和

    2024年02月10日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包