js异步请求时序问题

问题引入

开发过程中会遇到类似下拉框后端搜索的功能，此时键入key，onChange会频繁触发，可能导致
①频发无用请求（仅当用户停止输入，才有可能是最终想要搜索的key），
②导致请求时序错乱(即一前一后两个请求，后请求的已返回，而前请求的未返回)

防抖与节流

防抖

从开始执行方法时计时，每再执行一次方法，重新计时。如：设定防抖时间200ms，则在搜索框应用场景内，仅当用户输入停顿达到两秒，才会发送请求，一定程度上避免过度请求带来的问题

原生实现

// 防抖
function debounce(fn, wait) {    
    var timeout = null;     // 利用闭包存住timeout
    return function() {        
        if(timeout !== null) {
            clearTimeout(timeout);
        }    
        timeout = setTimeout(fn, wait);    
    }
}

React hooks版

import { useEffect, useRef } from 'react'

const useDebounce = (fn, ms = 30, deps = []) => {
    let timeout = useRef()
    useEffect(() => {
        if (timeout.current){
           clearTimeout(timeout.current);
        }
        timeout.current = setTimeout(() => {
            fn()
        }, ms)
    }, deps)

    const cancel = () => {
        clearTimeout(timeout.current)
        timeout = null
    }

    return [cancel]
  }

export default useDebounce;

// 用法
import { useDebounce } from 'hooks'
const Home = (props) => {
  const [a, setA] = useState(0)
  const [b, setB] = useState(0)
  const [cancel] = useDebounce(() => {
    setB(a)
  }, 2000, [a])

  const changeIpt = (e) => {
    setA(e.target.value)
  }
  return 

    
    { b } { a }
  
}

节流

节流思路为，若设置的时间为200ms，则200ms间隔时间未到，不会再次执行函数。

原生实现

// 节流
function throttle(func, ms) {
    let previous = 0;
    return function() {
        let now = Date.now();
        let context = this;
        let args = arguments;
        if (now - previous > ms) {
            func.apply(context, args);
            previous = now;
        }
    }
}

偷懒版

lodash

import {  debounce, throttle } from 'lodash';
debounce(() => { 
  //DO SOMETHING
}, 200);

throttle (() => { 
  //DO SOMETHING
}, 200);

解决请求时序问题

防抖与节流并不能100%解决异步请求过于频繁带来的请求response错乱的问题，当两个相同请求，响应时间差异过大第一个请求慢于第二个请求返回，此时若不作处理，正常流程走完以后会发现第一个请求的结果覆盖了第二个请求，此时需要对结果做处理，即抛弃第一个请求的结果

实现思路

这里以dva.js为例
1.我们需要两个容器存储 最后一次请求的时间（lastResponseTime） 和 最新请求的结果(responseCache)
2.当一个请求，如 *getXXX()开始时，获取当前时间currentTime
3.当异步请求执行完毕，将currentTime与lastResponseTime作对比，当currentTime>lastResponseTime,则说明该请求的结果为最新的，将其存入responseCache并更新lastResponseTime = currentTime 并使用当前请求的结果；否侧弃用当前请求的结果，沿用responseCache。

state: {
    lastResponseTime: new Date(),
    responseCache: undefined,
},
*getXXX({ payload, callback }, { call, put, select }){
  const currentTime = new Date().getTime();
  const response= yield call(getXXX, payload);
  const { lastResponseTime} = yield select(_ => _.MODULE_NAMESPACE_XXX);
  if(currentTime > lastResponseTime){
    yield put({
            type: 'updateState',
            state: {
              responseCache: response,
              lastResponseTime: currentTime ,
            },
      });
      callback(response);
  } else {
        const { responseCache } = yield select(_ => _.MODULE_NAMESPACE_XXX);
        callback(responseCache);
  }
}

另一种思路

上面的实现思路是控制请求结果，我们还可以从请求开始出发。
即，当上一个请求未返回，则不发送下一个请求，直到上一个请求结束。
该种情况不适用于搜索，因为搜索更注重结果，所以需要取最新一次请求的结果。此种情况适用于状态轮询的应用场景，如小明正在吃早餐，当我们需要知道小明是否已经吃完了，隔两分钟就去询问一下，如果其中一次小明还未回复，则不再问他了

可以借助dva.js的loading状态来判断是否正在pending

setInterval(()=>{
  if(!getXXXLoading){
      dispatch({
        type: MODULE_NAMESPACE_XXX/getXXX,
        payload:{},
        callback: ()=>{}
    })
  }
}, 200)

注意dva.js的loading存在问题：依次发送两个相同请求，当其中一个返回，loading状态就为false。
1.定义不同的effects
2.手动维护loading状态
持续关注该问题是否已解决