JS前端常见的竞态问题解决方法详解

目录
  • 什么是竞态问题
  • 取消过期请求
    • XMLHttpRequest 取消请求
    • fetch API 取消请求
    • axios 取消请求
    • 可取消的 promise
  • 忽略过期请求
    • 封装指令式 promise
    • 使用唯一 id 标识每次请求
  • 「取消」和「忽略」的比较
    • 「取消」更实际
    • 「忽略」更通用
  • 总结

什么是竞态问题

竞态问题,又叫竞态条件(race condition),它旨在描述一个系统或者进程的输出依赖于不受控制的事件出现顺序或者出现时机。

此词源自于两个信号试着彼此竞争,来影响谁先输出。

简单来说,竞态问题出现的原因是无法保证异步操作的完成会按照他们开始时同样的顺序。举个:

  • 有一个分页列表,快速地切换第二页,第三页;
  • 先后请求 data2 与 data3,分页器显示当前在第三页,并且进入 loading;
  • 但由于网络的不确定性,先发出的请求不一定先响应,所以有可能 data3 比 data2 先返回;
  • 在 data2 最终返回后,分页器指示当前在第三页,但展示的是第二页的数据。

这就是竞态条件,在前端开发中,常见于搜索,分页,选项卡等切换的场景。

那么如何解决竞态问题呢?在以上这些场景中,我们很容易想到:

当发出新的请求时,取消掉上次请求即可。

取消过期请求

XMLHttpRequest 取消请求

XMLHttpRequest(XHR)是一个内建的浏览器对象,它允许使用 JavaScript 发送 HTTP 请求。

如果请求已被发出,可以使用 abort() 方法立刻中止请求。

const xhr= new XMLHttpRequest();
xhr.open('GET', 'https://xxx');
xhr.send();
xhr.abort(); // 取消请求

fetch API 取消请求

fetch 号称是 AJAX 的替代品,出现于 ES6,它也可以发出类似 XMLHttpRequest 的网络请求。

主要的区别在于 fetch 使用了 promise,要中止 fetch 发出的请求,需要使用 AbortController

const controller = new AbortController();
const signal = controller.signal;
fetch('/xxx', {
  signal,
}).then(function(response) {
  //...
});
controller.abort(); // 取消请求

相比原生 API,大多项目都会选择 axios 进行请求。

axios 取消请求

axios 是一个 HTTP 请求库,本质是对原生 XMLHttpRequest 的封装后基于 promise 的实现版本,因此 axios 请求也可以被取消。

可以利用 axios 的 CancelToken API 取消请求。

const source = axios.CancelToken.source();
axios.get('/xxx', {
  cancelToken: source.token
}).then(function (response) {
  // ...
});
source.cancel() // 取消请求

在 cancel 时,axios 会在内部调用 promise.reject() 与 xhr.abort()。

所以我们在处理请求错误时,需要判断 error 是否是 cancel 导致的,避免与常规错误一起处理。

axios.get('/xxx', {
  cancelToken: source.token
}).catch(function(err) {
  if (axios.isCancel(err)) {
    console.log('Request canceled', err.message);
  } else {
    // 处理错误
  }
});

但 cancelToken 从 v0.22.0 开始已被 axios 弃用。原因是基于实现该 API 的提案 cancelable promises proposal 已被撤销。

v0.22.0 开始,axios 支持以 fetch API 方式的 AbortController 取消请求

const controller = new AbortController();
axios.get('/xxx', {
  signal: controller.signal
}).then(function(response) {
   //...
});
controller.abort() // 取消请求

同样,在处理请求错误时,也需要判断 error 是否来自 cancel。

可取消的 promise

原生 promise 并不支持 cancel,但 cancel 对于异步操作来说又是个很常见的需求。所以社区很多仓库都自己实现了 promise 的 cancel 能力。

我们以awesome-imperative-promise 为例,来看看 cancel 的实现,它的 cancel 实现基于指令式 promise, 源码一共只有 40 行。

什么是指令式 promise?

我们普遍使用的 promise,它的 resolve/reject 只能在 new Promise 内部调用,而指令式 promise 支持在 promise 外部手动调用 resolve/reject 等指令。

通过它的用法能更好地理解何为指令式 promise:

import { createImperativePromise } from 'awesome-imperative-promise';
const { resolve, reject, cancel } = createImperativePromise(promise);
resolve("some value");
// or
reject(new Error());
// or
cancel();

内部的 cancel 方法其实就是将 resolve,reject 设为 null,让 promise 永远不会 resolve/reject。

一直没有 resolve 也没有 reject 的 Promise 会造成内存泄露吗?

有兴趣的同学可以了解下 https://www.jb51.net/article/258149.htm

我个人认为,如果没有保留对 promise 的引用,就不会造成内存泄露。

回到 promise cancel,可以看到,虽然 API 命名为 cancel,但实际上没有任何 cancel 的动作,promise 的状态还是会正常流转,只是回调不再执行,被“忽略”了,所以看起来像被 cancel 了。

因此解决竞态问题的方法,除了「取消请求」,还可以「忽略请求」。

当请求响应时,只要判断返回的数据是否需要,如果不是则忽略即可。

忽略过期请求

我们又有哪些方式来忽略过期的请求呢?

封装指令式 promise

利用指令式 promise,我们可以手动调用 cancel API 来忽略上次请求。

但是如果每次都需要手动调用,会导致项目中相同的模板代码过多,偶尔也可能忘记 cancel。

我们可以基于指令式 promise 封装一个自动忽略过期请求的高阶函数 onlyResolvesLast

在每次发送新请求前,cancel 掉上一次的请求,忽略它的回调。

function onlyResolvesLast(fn) {
  // 保存上一个请求的 cancel 方法
  let cancelPrevious = null;
  const wrappedFn = (...args) => {
    // 当前请求执行前,先 cancel 上一个请求
    cancelPrevious && cancelPrevious();
    // 执行当前请求
    const result = fn.apply(this, args);
    // 创建指令式的 promise,暴露 cancel 方法并保存
    const { promise, cancel } = createImperativePromise(result);
    cancelPrevious = cancel;
    return promise;
  };
  return wrappedFn;
}

以上就是 github.com/slorber/awe… 的实现。

只需要将 onlyResolvesLast 包装一下请求方法,就能实现自动忽略,减少很多模板代码。

const fn = (duration) =>
  new Promise(r => {
    setTimeout(r, duration);
  });
const wrappedFn = onlyResolvesLast(fn);
wrappedFn(500).then(() => console.log(1));
wrappedFn(1000).then(() => console.log(2));
wrappedFn(100).then(() => console.log(3));
// 输出 3

使用唯一 id 标识每次请求

除了指令式 promise,我们还可以给「请求标记 id」的方式来忽略上次请求。

具体思路是:

  • 利用全局变量记录最新一次的请求 id
  • 在发请求前,生成唯一 id 标识该次请求
  • 在请求回调中,判断 id 是否是最新的 id,如果不是,则忽略该请求的回调

伪代码如下:

let fetchId = 0; // 保存最新的请求 id
const getUsers = () => {
  // 发起请求前,生成新的 id 并保存
  const id = fetchId + 1;
  fetchId = id;
  await 请求
  // 判断是最新的请求 id 再处理回调
  if (id === fetchId) {
    // 请求处理
  }
}

上面的使用方法也会在项目中产生很多模板代码,稍做封装后也能实现一套同样用法的 onlyResolvesLast

function onlyResolvesLast(fn) {
  // 利用闭包保存最新的请求 id
  let id = 0;
  const wrappedFn = (...args) => {
    // 发起请求前,生成新的 id 并保存
    const fetchId = id + 1;
    id = fetchId;
    // 执行请求
    const result = fn.apply(this, args);
    return new Promise((resolve, reject) => {
      // result 可能不是 promise,需要包装成 promise
      Promise.resolve(result).then((value) => {
        // 只处理最新一次请求
        if (fetchId === id) {
          resolve(value);
        }
      }, (error) => {
        // 只处理最新一次请求
        if (fetchId === id) {
          reject(error);
        }
      });
    })
  };
  return wrappedFn;
}

用法也一样,使用 onlyResolvesLast 包装一下请求方法,实现过期请求自动忽略。

而且,这样的实现不依赖指令式 promise,也更轻量。

「取消」和「忽略」的比较

「取消」更实际

如果请求被「取消」了没有到达服务端,那么可以一定程度减轻服务的压力。

但是取消请求也依赖底层的请求 API,比如 XMLHttpRequest 需要用 abort,而 fetch API 和 axios 需要用 AbortController。

「忽略」更通用

而「忽略」的方式,不依赖请求的 API,更加通用,更容易抽象和封装。本质上所有的异步方法都可以使用 onlyResolvesLast 来忽略过期的调用。

一个更实际,一个更通用,两者的使用需要根据具体场景来权衡。

总结

在前端常见的搜索,分页,选项卡等切换的场景中。由于网络的不确定性,先发出的请求不一定先响应,这会造成竞态问题。

解决竞态问题,我们可以选择「取消」或「忽略」过期请求。

  • 「取消请求」,XMLHttpRequest 可以使用 abort 方法,fetch API 以及 axios 可以使用 AbortController
  • 「忽略请求」,可以基于指令式 promise 或请求 id 的方式封装高阶函数来减少模板代码

两种方式各有各的好,需要根据实际场景权衡利弊。

其实解决方式不止这些,像 React Query,GraphQL,rxjs 等都有竞态处理,感兴趣的同学可以再继续深入了解。

以上就是JS前端常见的竞态问题解决方法详解的详细内容,更多关于JS前端竞态的资料请关注我们其它相关文章!

(0)

相关推荐

  • js前端实现word excel pdf ppt mp4图片文本等文件预览

    目录 前言 实现方案 docx文件实现前端预览 代码实现 实现效果 pdf实现前端预览 代码实现 实现效果 excel实现前端预览 代码实现 实现效果 pptx的前端预览 实现效果 总结 前言 因为业务需要,很多文件需要在前端实现预览,今天就来了解一下吧. 可以点击下面地址体验喔 git仓库地址以及在线demo地址 实现方案 找了网上的实现方案,效果看起来不错,放在下面的表格里,里面有一些是可以直接通过npm在vue中引入使用. 文档格式 老的开源组件 替代开源组件 word(docx) mam

  • js前端面试常见浏览器缓存强缓存及协商缓存实例

    目录 前言 搭建环境 强缓存 协商缓存 Etag和If-None-Match Last-Modify和if-modified-since 前言 最近在背面试题时,时常会看见浏览器缓存,虽然没有用过但是从它的描写中大致是知道它的作用和重要性.但是还是没有代码实操过,也是一知半解的,这口气咽不下啊,开始找资料,但是大部分都是理论半行代码没有,终于东拼西凑顿悟了.开始搭环境,干活. 浏览器缓存 浏览器缓存是浏览器在本地磁盘对用户最近请求过的文档进行存储,当访问者再次访问同一页面时,浏览器就可以直接从本

  • javascript 实现纯前端将数据导出excel两种方式

    目录 前言 方法一 方法二 前言 修改之前项目代码的时候,发现前人导出excel是用纯javascript实现的.并没有调用后台接口. 之前从来没这么用过,记录一下.以备不时之需. 方法一 将table标签,包括tr.td等对json数据进行拼接,将table输出到表格上实现,这种方法的弊端在于输出的是伪excel,虽说生成xls为后缀的文件,但文件形式上还是html, 代码如下: <html> <head>     <p style="font-size: 20p

  • js前端获取用户位置及ip属地信息

    目录 写在前面 尝试一:navigator.geolocation 尝试二:sohu 的接口 尝试三:百度地图的接口 写在后面 写在前面 想要像一些平台那样显示用户的位置信息,例如某省市那样.那么这是如何做到的, 据说这个位置信息的准确性在通信网络运营商那里?先不管,先实践尝试下能不能获取. 尝试一:navigator.geolocation 尝试了使用 navigator.geolocation,但未能成功拿到信息. getGeolocation(){ if ('geolocation' in

  • JS前端监控采集用户行为的N种姿势

    目录 引言 通用数据 获取用户信息 获取页面信息 设置时间 特定数据 手动埋点上报 全局自动上报 组件上报 总结 引言 上一篇我们详细介绍了前端如何采集异常数据.采集异常数据是为了随时监测线上项目的运行情况,发现问题及时修复.在很多场景下,除了异常监控有用,收集用户的行为数据同样有意义. 怎么定义行为数据?顾名思义,就是用户在使用产品过程中产生的行为轨迹.比如去过哪几个页面,点过哪几个按钮,甚至在某个页面停留了多长时间,某个按钮点击了多少次,如果有需求都可以记录下来. 但是记录行为数据是一个和业

  • JavaScript架构搭建前端监控如何采集异常数据

    目录 前言 什么是异常数据? 接口异常 拦截器中捕获异常 前端异常 为啥不用 window.onerror ? 异常处理函数 处理接口异常 处理前端异常 获取环境数据 在 Vue 中 在 React 中 总结 前言 前两篇,我们介绍了为什么前端应该有监控系统,以及搭建前端监控的总体步骤,前端监控的 Why 和 What 想必你已经明白了.接下来我们解决 How 如何实现的问题. 如果不了解前端监控,建议先看前两篇: 为什么前端不能没有监控系统? 前端监控的总体搭建步骤 本篇我们介绍,前端如何采集

  • JS前端常见的竞态问题解决方法详解

    目录 什么是竞态问题 取消过期请求 XMLHttpRequest 取消请求 fetch API 取消请求 axios 取消请求 可取消的 promise 忽略过期请求 封装指令式 promise 使用唯一 id 标识每次请求 「取消」和「忽略」的比较 「取消」更实际 「忽略」更通用 总结 什么是竞态问题 竞态问题,又叫竞态条件(race condition),它旨在描述一个系统或者进程的输出依赖于不受控制的事件出现顺序或者出现时机. 此词源自于两个信号试着彼此竞争,来影响谁先输出. 简单来说,竞

  • js前端上传文件缩略图技巧示例详解

    目录 引言 文件对象简介 Blob File FileReader FormData 文件对象之间的关系 缩略图的实现 总结 引言 通常情况下,前端提交给服务器的数据格式为JSON格式,但很多时候用户想上传自己的头像.视频等,这些非文本数据的时候,就不能直接以JSON格式上传到后端了. 当我们要获取用户上传的文件,可以使用input表单项,将type属性值设置为“file”. <form action=""> <input type="file"

  • JSP出现中文乱码问题解决方法详解

    在介绍方法之前我们首先应该清楚具体的问题有哪些,笔者在本博客当中论述的JSP中文乱码问题有如下几个方面:页面乱码.参数乱码.表单乱码.源文件乱码.下面来逐一解决其中的乱码问题. 一.JSP页面中文乱码 在JSP页面中,中文显示乱码有两种情况:一种是HTML中的中文乱码,另一种是在JSP中动态输出的中文乱码. 先看一个JSP程序: <%@ page language="java" import="java.util.*" %> <html> &

  • JS疑惑的数据类型及类型判断方法详解

    目录 前言 数据类型 类型判断 一.typeof方法 二.Object.prototype.toString.call()方法 小插曲 三.Array.isArray() 四.obj instanceof Object 结语 前言 关于javascript这门语言的数据类型你了解多少呢?你有什么方法能够快速的判断数据类型呢?如果可以那如何实现类型转换呢?带着这三个问题开始我们今天的学习吧 数据类型 在javascript中数据类型我们一般分为基本数据类型(值类型) 和 引用数据类型(对象类型):

  • JS查找数组中重复元素的方法详解

    本文实例讲述了JS查找数组中重复元素的方法.分享给大家供大家参考,具体如下: JS的数据类型有一个数组.今天我们就来谈谈对数组的一种处理.相信很多人都遇到过从数组中查找出不重复的元素,但是我遇到的却是从数组中查找出重复的元素. 从js数组中查找出不重复的元素的方法有很多,下面就给大家列举一个: <!DOCTYPE html> <html> <body> <script> Array.prototype.deleteEle=function(){ var ne

  • js 实现一些跨浏览器的事件方法详解及实例

    js实现一些跨浏览器的事件方法 用JavaScript实现事件的绑定,移除,以及一些常用的事件属性的获取,时常要考虑到在不同浏览器下的兼容性,下面给出了一个跨浏览器的事件对象: var EventUtil = { on: function(element, type, handler) {/* 添加事件 */ if (element.addEventListener) { element.addEventListener(type, handler, false); } else if (ele

  • JS实现导出Excel的五种方法详解【附源码下载】

    本文实例讲述了JS实现导出Excel的五种方法.分享给大家供大家参考,具体如下: 这五种方法前四种方法只支持IE浏览器,最后一个方法支持当前主流的浏览器(火狐,IE,Chrome,Opera,Safari) <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>html 表格导出道</title> <sc

  • 原生JS检测CSS3动画是否结束的方法详解

    本文实例讲述了原生JS检测CSS3动画是否结束的方法.分享给大家供大家参考,具体如下: 不知道大家在做网页的时候有没有碰到这种情况:当你使用CSS3的动画属性时,想要在动画结束后添加一系列操作,但往往这些操作可能会发生在与动画同时出现或者是在动画还没结束时就发生了. 针对这种情况我们会使用js来监听动画是否结束即它的style的transition属性是否为transitionend;下面我们通过一个简单的例子来理解一下我这句话的含义: 代码如下: <!DOCTYPE html> <ht

  • mysql/Java服务端对emoji的支持与问题解决方法详解

    本文实例讲述了mysql Java服务端对emoji的支持与问题解决方法.分享给大家供大家参考,具体如下: 问题描述 将底层抓取的微博数据存入mysql,有些数据存入失败,查看Tomcat后,核心错误信息如下: // 抛出字符集不支持的异常 sql.SQLException: Incorrect string value: '\xF0\x9F\x98\x97\xF0\x9F...' for column 'CONTENT' at row 1 原因分析 MYSQL 5.5 之前, utf8 编码只

  • node.JS二进制操作模块buffer对象使用方法详解

    在ES6引入TypedArray之前,JavaScript语言没有读取或操作二进制数据流的机制.Buffer类被引入作为Nodejs的API的一部分,使其可以在TCP流和文件系统操作等场景中处理二进制数据流.现在TypedArray已经被添加进ES6中,Buffer类以一种更优与更适合Node.js用例的方式实现了Uint8Array. Buffer对象概述 由于应用场景不同,在Node中,应用需要处理网络协议.操作数据库.处理图片.接收上传文件等,在网络流和文件的操作中,还要处理大量二进制数据

随机推荐