我需要使用实时搜索 axios 请求取消上一个请求-我正在使用 throttle 去抖动来发出请求,但是在删除现有单词并更新新值时遇到问题-在某些情况下会显示前一个单词的结果,我想我需要取消所有以前对同一个 requestID 的请求,通读文章,但它们都不适用于我的用例。任何帮助都是我的代码。
reducer :
switch (action.type) {
case GETTING_DATA:
return {
...state,
results: action.payload,
};
case SEARCH_DATA:
return {
...state,
Results: action.payload,
};
export function getSearch(value) {
return (dispatch) => {
dispatch({
type: GETTING_DATA,
});
const arg = {
search: value,
};
apiGet('abc', arg).then(response =>
getResults(dispatch, response));
};
}
const getResults = (dispatch, response) => {
dispatch({
type: SEARCH_DATA,
payload: response.data,
});
};
服务:
export const apiGet = async (path = '', args = {}) => {
const endpoint = "/aaa/aaa/aaa";
try {
return axios.get(endpoint, getConfig());
} catch (e) {
}
};
最佳答案
请尝试以下操作:
通行证value
作为 GETTING_DATA
的有效载荷行动。这将在状态中存储最新请求的值。
然后,在 getResults
将相同的值与响应数据一起发送给 reducer。在reducer内部,检查是否从getResults
传递过来的值与通过 GETTING_DATA
存储在状态中的相同.
如果是这样,则此数据将响应最新请求,因此您希望将其存储在状态中。否则,您可以忽略它。
换句话说:
操作:
switch (action.type) {
case GETTING_DATA:
return {
...state,
lastRequestTime: action.payload,
};
case SEARCH_DATA:
if (action.payload.lastRequestTime === state.lastRequestTime) {
return {
...state,
Results: action.payload.response,
};
} else {
return state
}
操作:
export function getSearch(value) {
return (dispatch) => {
const lastRequestTime = Date.now()
dispatch({
type: GETTING_DATA,
payload: lastRequestTime
});
const arg = {
search: value,
};
apiGet('abc', arg).then(response =>
getResults(dispatch, { response, lastRequestTime }));
};
}
const getResults = (dispatch, response) => {
dispatch({
type: SEARCH_DATA,
payload: response.data,
});
};
关于react-redux - 取消之前的请求实时搜索 reactjs,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48122554/