Javascript Redux Thunk以不同的顺序处理网络响应

我有一个文本输入字段（通过Thunk）向服务器查询用户文本的有效性。由于这些请求可以很快连续发生，因此从服务器返回的顺序可能与发送时不同。因此，文本字段中的字符串可能显示为无效，而实际上它是有效的

为了解决这个问题，当我收到服务器的响应时，我正在执行一个检查-文本字段的当前内容是否与检查的内容相同？如果没有，请再次检查。我觉得应该有比查询DOM元素值更好的方法来处理这种情况

如何从服务器请求前到服务器请求后执行

export function updateUserCode(code) {
    return dispatch => {
        return dispatch(validateUserCode(code))
    }
}

function validateUserCode(code) {
    return dispatch => {
        dispatch(updateCode(code))
        return fetch(`/api/code/${code}`)
            .then(response => response.json())
            .then(json => dispatch(receiveValidatedCode(code, json)))
            .catch(error => {Log.error(error)})
    }
}

function receiveValidatedCode(code, data) {
    const lastval = document.getElementById('usercode').value
    if (code != lastval) {
        // Code not the same as current value
        // need to validate again
        return updateUserCode(lastval)
    }
    if(data.success) {
        return {
            type: types.CODE_VALIDATED,
            code: code,
        }
    }
    return {
        type: types.CODE_INVALID,
        reason: data.reason,
    }
}

---

在逻辑中搞乱DOM确实不太理想。我建议将最后输入的文本字段值保留在Redux存储中，并在reducer中执行检查

此外，如果当前输入的值与上次解析的请求验证的值不同，我认为重新验证用户输入没有任何意义。忽略这些响应，不要执行不必要的请求

就代码而言，您可以这样做：

// actions
const requestValidation = value => ({ type: 'request-validation', value });

const receiveValidation = (value, result) => ({ type: 'receive-validation', value, result });

export const validateUserCode = code => dispatch => {
  dispatch(requestValidation(code));
  return fetch(`/api/code/${code}`)
         .then(response => response.json())
         .then(json => dispatch(receiveValidation(code, json)))
         .catch(error => {Log.error(error)})
}

// reducer
export const validationReducer = (state = {}, action) => {
  if (action.type === 'request-validation') 
    return ({ value: action.value, isValidating: true });

  if (action.type === 'receive-validation' && state.value === action.value) 
    return ({ value: action.value, isValid: !!action.success });

  return state; 
};

这不是生产质量代码，我不确定它是否有效，但它反映了这个想法