如何正确处理异步操作？

Question

我有一个异步操作

function fetch(url) { 
    dispatch => { 
    request(url).then(
     resp => dispatch({type: FETCH_SUCCESS, resp}), 
     error => dispatch({type: FETCH_FALUIRE, error}) 
); 

}}

UI有一个页面，列出所有的项目，当点击其中一个，这将分派与该项目的URL一个动作。

当我先点击item1时，如果item2的响应早于item1返回，我会快速点击item2。商店中item2的数据将被item1覆盖。

fetch('http://remote/items/item1'); //first 
fetch('http://remote/items/item2'); // then 

如何忽略item1的结果？或者我怎样才能使项目的发送总是在项目后触发1

我能想到的是，在发送请求之前调度网址。

function fetch(url) { 
    dispatch => { 
    dispatch({type: FETCH_START, url}); 
    request(url).then(
     resp => dispatch({type: FETCH_SUCCESS, resp, url}), 
     error => dispatch({type: FETCH_FALUIRE, error, url}) 
    ); 
    } 
} 

在reducer中，我检查网址以决定是否应该忽略响应。

function reduceFetch(state = initialState, action) { 
    switch(action.type) { 
    case FETCH_START: 
     return {initialState, action.url}; 
    case FETCH_SUCCESS: 
     if (state.uri === action.url) { 
     return {state, resp: action.resp}; 
     } else { 
     return state; 
     } 
    ... 
    } 

}

感谢您的帮助！

Answer 1

您的解决方案应该可以工作。 ATLEAST如果你忽略了像

1. 请求物品1
2. 请求ITEM2
3. 请求一些疯狂ITEM1一次。
4. 第三个请求正在回来。
5. 第一次请求失败。或者第一个请求正在回来，并且在请求之间更改了item1。

或者，您可以使您的fetch函数仅在最近一次调用时调度事件。

const fetchLatest = (called => url => { 
    const snapshot = ++called 

    return dispatch => request(url).then(
    resp => snapshot === called && dispatch(...), 
    error => snapshot === called && dispatch(...) 
) 
})(0)