前端如何解决竞态问题

站长

2024年04月19日 10:37 · 阅读数 3

[What]什么是竞态问题

它旨在描述一个系统或者进程的输出依赖于不受控制的事件执行顺序。这个词语来源于两个信号彼此竞争、影响谁先输出

[Why]为什么会出现竞态问题

具体到前端开发中，竞态问题出现的原因是：我们无法保证异步请求的完成顺序严格等于它们的开始顺序

举个例子：用户在搜索框输入关键词进行搜索，若短时间内连续键入两次，第二次的搜索结果比第一次的先返回

在开发者没有实现并发控制的前提下，最终展示的就是第一次搜索的结果，不符合用户的预期

[How]如何解决竞态问题

加锁

竞态问题的本质是多个请求同时进行，无法保证谁先结束

那么最简单粗暴的方式就是：在一个请求完成前，不允许发起新的请求

可以通过给触发元素或者请求函数加锁，来实现上述的效果

给触发元素加锁

维护loading状态，设置按钮在loading=true时禁用

function App() {
  const [loading, setLoading] = useState(false)
  
  // 发送异步请求
  async function getData() {
    setLoading(true)
    const resp = await axios.get('/xxx')
    setLoading(false)
  }
  
  function handleClick() {
    getData()
  }
  
  return (
    <button disabled={loading} onClick={handleClick}>发送请求</div>
  )
}

给异步请求函数加锁

使用ahooks的useLockFn包裹异步请求函数，在函数正在执行时，再调用函数就会直接return

import { useLockFn } from 'ahooks'

function App() {  
  // 发送异步请求
  const getData = useLockFn(async () => {
    const resp = await axios.get('/xxx')
  })
  
  function handleClick() {
    getData()
  }
  
  return (
    <button onClick={handleClick}>发送请求</div>
  )
}

取消过期请求

在发起新的请求之前，取消正在进行的请求

使用AbortController

AbortController是浏览器内置的API，用于构造一个controller实例

常见的请求库（fetch、axios>0.22.0）都已支持通过AbortController取消请求

使用方法也很简单：将controller.signal传入请求函数中，将signal与请求关联起来，在需要的时候调用controller.abort()去取消这个请求

const controller = new AbortController();

axios.get('/foo/bar', {
   signal: controller.signal
}).then(function(response) {
   //...
});

// 取消请求
controller.abort()

import { useUnmount } from 'ahooks';
import { useRef } from 'react';

export function useAbortController() {
  const controller = useRef<AbortController>(new AbortController());

  useUnmount(() => {
    controller.current.abort();
  });

  return {
    signal: controller.current.signal,
    abort: controller.current.abort,
  };
}

使用第三方库awesome-imperative-promise

awesome-imperative-promise实现了指令式的promise，支持在promise外部手动调用resolve/reject/cancal等指令

我们可以在每次调用请求函数前，先调用一次cancel方法取消正在进行的请求

import { createImperativePromise } from 'awesome-imperative-promise';

function App() {  
  // 发送异步请求
  const getData = async () => {
    const resp = await axios.get('/xxx')
  }
  
  const { cancel } = createImperativePromise(getData)
  
  function handleClick() {
    cancel()
    getData()
  }
  
  return (
    <button onClick={handleClick}>发送请求</div>
  )
}

忽略过期请求

允许多个请求同时进行，但只处理最后发起的请求的结果

实现思路是：

利用变量latest记录最新一次请求的时间戳
在发出请求时，使用当前时间戳标记这次请求的id
在请求结束后，当且仅当id取值与latest相等时，才更新数据/视图

import dayjs from 'dayjs'

function App() {  
  const latest = useRef<string>('')
  
  // 发送异步请求
  const getData = async () => {
    // 当前时间戳（毫秒）
    const id = String(dayjs().unix() * 1000)
    latest.current = id
    const resp = await axios.get('/xxx')
    if (id === latest.current) {
      // 更新数据/视图
    }
  }
  
  function handleClick() {
    getData()
  }
  
  return (
    <button onClick={handleClick}>发送请求</div>
  )
}

总结

在前端常见的搜索、分页切换等场景中，由于我们无法保证异步请求的完成顺序严格等于它们的开始顺序，容易出现竞态问题、导致页面展示的内容不符合预期

要解决竞态问题，可以通过加锁、取消过期请求或忽略过期请求的方式

加锁：在请求完成前、不允许发出新的请求
- 优点：实现简单直接
- 缺点：阻塞用户操作，可能造成用户等待时间较长
取消过期请求：在发起新的请求前，取消正在进行的请求
- 优点：如果请求被取消时还没有到达服务端，可以减轻服务端的压力
- 缺点：依赖API或者第三方库
忽略过期请求：允许多个请求同时进行，但只处理最后发起的请求的结果
- 优点：实现更通用，不依赖API或第三方库
- 缺点：如果短时间内多次触发，可能造成服务端处理压力较大