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)
	}
});
相关推荐
真的想不出名儿6 分钟前
vue项目引入字体
前端·javascript·vue.js
胡楚昊23 分钟前
Polar WEB(1-20)
前端
吃饺子不吃馅1 小时前
AntV X6图编辑器如何实现切换主题
前端·svg·图形学
余防2 小时前
XXE - 实体注入(xml外部实体注入)
xml·前端·安全·web安全·html
jump_jump2 小时前
前端部署工具 PinMe
运维·前端·开源
Baklib梅梅2 小时前
优秀文档案例解析:打造高效用户体验的最佳实践
前端·ruby on rails·前端框架·ruby
慧一居士2 小时前
VUE、jquery、React、Ant Design、element ui、bootstrap 前端框架的 功能总结,示例演示、使用场景介绍、完整对比总结
前端
GISer_Jing2 小时前
0926第一个口头OC——快手主站前端
开发语言·前端·javascript
duansamve3 小时前
React 18项目中使用环境变量(适用于不同环境下的配置常量)
react.js
MediaTea4 小时前
Jupyter Notebook:基于 Web 的交互式编程环境
前端·ide·人工智能·python·jupyter