前端 - React - - useEffect处理网络请求

问题还原在例如搜索场景下用户输入a发起网络请求“a”紧接着输入b又发起网络请求“ab”此时因网络问题先返回了“ab”的结果再返回“a”的结果就导致输入ab展示的是a的结果。方案一 async/await错误const [list,setList] useState([...]); useEffect(async (){ const res await getList(id) setList(res) },[id])useEffect设计规则要么不返回任何东西要么返回清理函数。async隐式返回Promise所以违反useEffect规则。方案二 开关控制/防抖可行const [list,setList] useState([...]); useEffect((){ let isFlag true; getList(id).then((res){ if(ifFlag){ setList(res) } }); return (){isFlag false} },[id])当getList网络请求还未响应时依赖项id改变了则react会先执行完第一次的useEffect将第一个isFlag改为false终止setList然后第二次执行useEffect。缺点1如果不执行setList则此次网络请求就是多余的会浪费网络资源。缺点2如果组件因为非依赖项问题而切换比如在网络请求中被销毁则会导致setList依然执行。方案三 AbortController推荐const [list,useList] useState([...]); useEffect(() { const controller new AbortController(); getList(id, { signal: controller.signal }) .then((res) { setList(res); }) .catch((error) { if (error.name ! AbortError) { // 处理主动终止的错误 } }); return () { controller.abort(); // 取消正在进行的请求 }; }, [id]);AbortController对象浏览器内置api生成一个唯一值controller.signal当网络请求中执行了清除函数那么signal则会发生改变请求就会进入catch。