javascript - React redux - 应用 "fetch"并在调度内部调度失败

Question

我有一个工作操作，可以通过简单的调用“saveJwt(data)”来保存 JWT token 。

这是操作:

export const requestLoginToken = (username, password) =>
  (dispatch, getState) => {
    dispatch({type: REQUEST_LOGIN_TOKEN, payload: username})

    const payload = {
      userName: username,
      password: password,
    }

    const task = fetch('/api/jwt', {
      method: 'POST',
      body: JSON.stringify(payload),
      headers: {
        'Content-Type': 'application/json;charset=UTF-8'
      },
    })
      .then(handleErrors)
      .then(response => response.json())
      .then(data => {
        dispatch({type: RECEIVE_LOGIN_TOKEN, payload: data})
        saveJwt(data)
      })
      .catch(error => {
        clearJwt()
        dispatch({type: ERROR_LOGIN_TOKEN, payload: error.message})
      })
    addTask(task)
    return task
  }

然后我在“saveJwt(data)”下面添加了这段代码:

    if (!confirmSelectDataExistance()) {
      dispatch({ type: REQUEST_SELECT_DATA })
      const token = getJwt()
      const headers = new Headers({
        'Authorization': `Bearer ${token}`
      })
      const retrieveSelectData = fetch('/api/SelectData/SelectData', {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json;charset=UTF-8'
        },
      })
        .then(handleErrors)
        .then(response => response.json())
        .then(selectData => {
          dispatch({ type: RECEIVE_SELECT_DATA, payload: selectData })
          saveSelectData(selectData)
        })
   }

它要做的就是检查项目是否在本地存储中，如果是，则这次添加 JWT 进行另一次获取。

这是已完成的操作，以便您可以看到它所在的位置:

export const requestLoginToken = (username, password) =>
  (dispatch, getState) => {
    dispatch({ type: REQUEST_LOGIN_TOKEN, payload: username })

    const payload = {
      userName: username,
      password: password,
    }

    const task = fetch('/api/jwt', {
      method: 'POST',
      body: JSON.stringify(payload),
      headers: {
        'Content-Type': 'application/json;charset=UTF-8'
      },
    })
      .then(handleErrors)
      .then(response => response.json())
      .then(data => {
        dispatch({ type: RECEIVE_LOGIN_TOKEN, payload: data })
        saveJwt(data)
        //selectData download if nothing is local storage.
        if (!confirmSelectDataExistance()) {
          dispatch({ type: REQUEST_SELECT_DATA })
          const token = getJwt()
          const headers = new Headers({
            'Authorization': `Bearer ${token}`
          })
          const retrieveSelectData = fetch('/api/SelectData/SelectData', {
            method: 'GET',
            headers: {
              'Content-Type': 'application/json;charset=UTF-8'
            },
          })
            .then(handleErrors)
            .then(response => response.json())
            .then(selectData => {
              dispatch({ type: RECEIVE_SELECT_DATA, payload: selectData })
              saveSelectData(selectData)
            })
        }
      })
      .catch(error => {
        clearJwt()
        dispatch({ type: ERROR_LOGIN_TOKEN, payload: error.message })
      })
    addTask(task)
    return task
  }

所以现在我的第一次获取以未定义的 promise 结束，它只是跳到底部，任务的值未定义，，

你是否相信昨天它工作得很好，而今天我尝试它时却失败了。

为什么该代码块会导致整个事情失败..我将其注释掉并且工作正常..

我怀疑它与两个 promise 等有关，但必须有一个正确的方法来管理这个。我本以为如果它要保存 JWT token ，那将表明它完成了第一个 promise 下载但是还有其他问题......在该代码块中或更可能是其使用方式。

Answer 1

假设confirmSelectDataExistance是异步的并返回promise，并且promiseretrieveSelectData必须在requestLoginToken之前解决，解决方案可能是:

export const requestLoginToken = (username, password) =>
(dispatch, getState) => {
   dispatch({ type: REQUEST_LOGIN_TOKEN, payload: username })

   const payload = {
     userName: username,
     password: password,
   }

const task = fetch('/api/jwt', {
  method: 'POST',
  body: JSON.stringify(payload),
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  },
})
  .then(handleErrors)
  .then(response => response.json())
  .then(data => {
    dispatch({ type: RECEIVE_LOGIN_TOKEN, payload: data })
    saveJwt(data)
    //selectData download if nothing is local storage.

    return confirmSelectDataExistance().then(isConfirmed => {
      if (!isConfirmed) {
        dispatch({ type: REQUEST_SELECT_DATA })
        const token = getJwt()
        const headers = new Headers({
          'Authorization': `Bearer ${token}`
        })
        const retrieveSelectData = fetch('/api/SelectData/SelectData', {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          },
        })
        .then(handleErrors)
        .then(response => response.json())
        .then(selectData => {
          dispatch({ type: RECEIVE_SELECT_DATA, payload: selectData })
          saveSelectData(selectData)
        });

        return retrieveSelectData;
      }
    })
  })
  .catch(error => {
    clearJwt()
    dispatch({ type: ERROR_LOGIN_TOKEN, payload: error.message })
  })
addTask(task)
return task
}

如果 saveSelectData 也是异步的，您应该调用

 return saveSelectData(selectData);