비동기 작업을 올바르게 처리하는 방법은 무엇입니까?

Question

은 내가 비동기 작업을

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

} }

UI 그들 중 하나, 그것은 해당 항목의 URL과 액션을 dispatch됩니다 클릭하면, 모든 항목을 나열하는 페이지가 있습니다.

item1을 먼저 클릭 한 다음 item2의 응답이 item1보다 빨리 반환되면 item2를 빠르게 클릭합니다. 저장중인 item2의 데이터는 item1에 의해 덮어 쓰기됩니다.

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

어떻게하면 항목 1의 결과를 무시할 수 있습니까? 또는 항목의 발송을 항목 1 이후에 항상 방아쇠로 만들 수있는 방법

내가 생각할 수있는 것은, 요청을 보내기 전에 URL을 발송하는 것입니다.

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}) 
    ); 
    } 
} 

감속기에서 URL을 확인하여 응답을 무시해야하는지 결정합니다.

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

해결책이 효과적입니다. 당신이

1. 요청 항목 1
2. 요청
3. 항목 2 요청 미친 듯이 무언가를 무시하면이어야 다시 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)