useRequest如何避免Race condition

最近看到React 之 Race Condition这篇文章,里面提到了ahooks中useRequest 也能解决 Race Condition,因此挺好奇怎么解决的

以下是测试代码:

tsx 复制代码
import { useState } from 'react';
import { useRequest } from 'ahooks';

const fakeFetch = (person: string) => {
  return new Promise<string>((res) => {
    setTimeout(() => res(`${person}'s data`), Math.random() * 5000);
  });
};

const Test = () => {
  const [person, setPerson] = useState('Nick');

  const { data, loading } = useRequest(() => fakeFetch(person), {
    refreshDeps: [person],
  });

  const handleClick = (name: string) => () => {
    setPerson(name);
  };

  return (
    <>
      <button onClick={handleClick('Nick')}>Nick's Profile</button>
      <button onClick={handleClick('Deb')}>Deb's Profile</button>
      <button onClick={handleClick('Joe')}>Joe's Profile</button>

      {person && (
        <>
          <h1>{person}</h1>
          <p>{loading ? 'Loading...' : data}</p>
        </>
      )}
    </>
  );
};

export default Test;

找到 ahooks 的源码,位置在 /packages/hooks/src/useRequest/src/Fetch.ts,看到如下代码

ts 复制代码
async runAsync(...params: TParams): Promise<TData> {
	this.count += 1;
	const currentCount = this.count;
	// ...

	try {
		// replace service
		let { servicePromise } = this.runPluginHandler('onRequest', this.serviceRef.current, params);
		// ...

		const res = await servicePromise;

		if (currentCount !== this.count) {
			// prevent run.then when request is canceled
			return new Promise(() => {});
		}

		// ...
		return res;
	} catch (error) {
		if (currentCount !== this.count) {
			// prevent run.then when request is canceled
			return new Promise(() => {});
		}
		// ...
		throw error;
	}
}

从代码中其实可以看出来内部是通过 count 这个变量来控制当前请求函数值的,从这一点也可以看出代码并没有禁用之前的请求函数,也就是说在 useRequest 中,不推荐在异步函数中直接设置值,请看如下测试代码:

tsx 复制代码
import { useState } from 'react';
import { useRequest } from 'ahooks';

const fakeFetch = (person: string) => {
  return new Promise<string>((res) => {
    setTimeout(() => res(`${person}'s data`), Math.random() * 5000);
  });
};

const Test = () => {
  const [person, setPerson] = useState('Nick');
  const [data, setData] = useState('')

  const { loading } = useRequest(() => {
    return fakeFetch(person).then(d => {
      setData(d)
    })
  }, {
    refreshDeps: [person],
  });

  const handleClick = (name: string) => () => {
    setPerson(name);
  };

  return (
    <>
      <button onClick={handleClick('Nick')}>Nick's Profile</button>
      <button onClick={handleClick('Deb')}>Deb's Profile</button>
      <button onClick={handleClick('Joe')}>Joe's Profile</button>

      {person && (
        <>
          <h1>{person}</h1>
          <p>{loading ? 'Loading...' : data}</p>
        </>
      )}
    </>
  );
};

export default Test;

通过测试发现,上面代码还是会不可避免的出现Race Condition,所以在设置值的时候要么使用函数返回的 data,也就是最开始的测试代码那种形式,要么在 onSuccess 中去设置值,如下

tsx 复制代码
const [data, setData] = useState('')

const { loading } = useRequest(() => {
	return fakeFetch(person)
}, {
	refreshDeps: [person],
	onSuccess: (d) => {
		setData(d)
	}
});
相关推荐
夏梦春蝉4 分钟前
ES6从入门到精通:模块化
前端·ecmascript·es6
拓端研究室1 小时前
视频讲解:门槛效应模型Threshold Effect分析数字金融指数与消费结构数据
前端·算法
工一木子2 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
半点寒12W4 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端4 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~4 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程5 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏5 小时前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083166 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头6 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github