我目前正在使用Axios在React Native中开发搜索功能。
在实现搜索功能时,我使用lodash的debounce来限制发送的请求数量。
然而,由于请求响应不是以相同的顺序接收的,因此存在显示不正确的搜索结果的可能性。
例如,当用户在输入字段中输入“Home deco”时,将存在两个请求。
一个请求使用 'Home',下一个请求使用 *'Home deco'*作为搜索查询文本。
如果使用 'Home' 的请求比第二个请求需要更多的时间返回,我们最终将显示 'Home' 查询文本的结果,而不是 'Home deco'
如果响应按顺序返回,但如果 'Home' 请求在 'Home deco' 请求之后返回,则应忽略 'Home' 响应。
下面是一个示例代码
function Search (){
const [results, setResults] = useState([]);
const [searchText, setSearchText] = useState('');
useEffect(() => {
getSearchResultsDebounce(searchText);
}, [searchText]);
const getSearchResultsDebounce = useCallback(
_.debounce(searchText => {
getSearchResults(searchText)
}, 1000),
[]
);
function getSearchResults(searchText) {
const urlWithParams = getUrlWithParams(url, searchText);
axios.get(urlWithParams, { headers: config.headers })
.then(response => {
if (response.status === 200 && response.data)
{
setResults(response.data);
} else{
//Handle error
}
})
.catch(error => {
//Handle error
});
}
return (
<View>
<SearchComponent onTextChange={setSearchText}/>
<SearchResults results={results}/>
</View>
)
}
解决上述问题的最佳方法是什么?
3条答案
按热度按时间qyzbxkaa1#
如果你想避免使用外部库来减小包的大小,比如axios-hooks,我认为你最好使用axios中包含的CancelToken功能。
正确使用CancelToken功能还可以防止任何关于取消异步任务失败的警告。
Axios有一个很好的页面解释了如何使用CancelToken功能here。如果你想更好地了解它的工作原理和为什么它是有用的,我建议阅读。
下面是我如何在你给出的例子中实现CancelToken功能:
OP在回复中澄清了他们不想实现取消功能,在这种情况下,我会使用如下的时间戳系统:
正如你所看到的,我还改变了搜索本身去抖动的方式。我改变了searchText值本身去抖动的地方,当searchText值改变时,一个带有搜索请求的useEffect钩子会运行。这样我们就可以取消以前的请求,运行新的请求,并在同一个钩子中进行卸载清理。
我修改了我的响应,希望能实现OP希望发生的事情,同时还包括在组件卸载时适当的响应取消。
9rygscc12#
我认为解决这个问题最好的方法之一是使用请求的实际顺序作为状态,并根据实际顺序使每个请求都有自己的顺序。下面是伪代码概述:
ffx8fchx3#
我们可以这样做来获得最新的API响应。