异步竞态问题

异步竞态问题

• 防抖：解决不了，因为防抖是在某一时间段内重复的操做只有最后一个生效，但是如果请求响应时间较长，超过了设定的时间，那么就会走正常流程，防抖设置和不设置没区别
• 节流：解决不了，节流是在某一个时间段内重复的操作不执行，但是超过这个时间段就会执行一次操作，那么设置和不设置节流就没区别了

如何解决：

• 方法1:利用axios提供的取消上一次请求方法

  import axios from "axios"
  import { useState } from 'react'
  const CancelToken = axios.CancelToken
  let cancel: any = null
  
  axios.interceptors.request.use(config => {
    if (cancel !== null) {
      cancel("取消请求")
    }
    config.cancelToken = new CancelToken((c) => {
      cancel = c
    })
    return config
  })
  
  axios.interceptors.response.use(res => {
    cancel = null
    return res
  }, err => {
    if (axios.isCancel(err)) {
      console.log('request cancel ', err.message)
      return new Promise(() => { })
    }
    // 正常错误
    cancel = null
    return Promise.reject(err)
  })
  
  const Demo = () => {
    const [state, setSate] = useState('')
    const handleClick = async (index: number) => {
      axios.get(`http://127.0.0.1:3000/mock?index=${index}`).then(res => {
        setSate(res.data.d)
      })
    }
    return (
      <div>
        <button onClick={() => { handleClick(1) }}>button1</button>
        <button onClick={() => { handleClick(2) }}>button2</button>
        <hr />
        <textarea name="result" id="result" defaultValue={state}></textarea>
      </div>
    )
  }
  export default Demo
  

• 方法2: 利用闭包

  • 当前一个请求想要覆盖时，它的curentNum 还是上一次的，但是全局num会是当前的，也就是说，全局num会比curentNum 多一，那么不处理这次想要覆盖的请求

import axios from "axios"
import { useState, useCallback, useRef } from 'react'

// 利用闭包解决

const Demo = () => {
  const [state, setSate] = useState('')
  let num = useRef(0)
  const handleClick = useCallback(
    (index) => {
      let current = ++num.current;
      axios.get(`http://127.0.0.1:3000/mock?index=${index}`).then(res => {
        if (current == num.current) {
          console.log("current=>", current)
          console.log("num=>", num.current);
          setSate(res.data.d)
        } else {
          console.log("current=>", current)
          console.log("num=>", num.current);
          console.log("不相等，不赋值")
          num.current = 0;
        }
      })
    }, [])
  return (
    <div>
      <button onClick={() => { handleClick(1) }}>button1</button>
      <button onClick={() => { handleClick(2) }}>button2</button>
      <hr />
      <textarea name="result" id="result" defaultValue={state}></textarea>
    </div>
  )
}
export default Demo