使用 async await useEffect 和 Redux 处理错误

时间:2021-07-28 16:37:23

标签: reactjs redux async-await dispatch

在使用 async/await useEffect 触发处理我的获取的调度时,我将如何处理获取错误的详细信息?我有一个自定义函数,一旦获取返回 -> 它就会调度以设置我正在获取的对象的状态。

启动流程的useEffect

  useEffect(async () => {
    await dispatch(fetchWhateverCompany({
      whateverParam
    })
  })

启动获取服务的函数

  export const fetchWhateverCompany = ({
                                             whateverParam
                                           }) => async dispatch =>
    // dispatchService is a custom function that sets the state -> from the result of the service that fetches, I think this is where my problem is
    dispatchService(dispatch)(serviceThatActuallyFetchesData, setTheStateOfWhateverIsReturnedFromTheService)(
      whateverParam
    )

获取服务

  export const serviceThatActuallyFetchesData = async whateverParam => {
      // whatever param is used for dynamic fetching different endpoints.
      await fetch(url)
  }

状态管理功能

  export const setTheStateOfWhateverIsReturnedFromTheService = whateverReturned => dispatch =>
    dispatch({
      type: WHATEVER_RETURNED_SET_STATE,
      whateverReturned
    })

调度服务工具

import { setBackendWorking, setBackendWorkingDone } from './backend-working.actions'
import toastShow, { TOAST_TYPE_ERROR } from './toast-show'
import { getRespError } from '../../services/get-resp-error.util'
import { getResponseBody } from '../../services/get-response-body.util'

export const dispatchService = dispatch =>
  (serviceMethod, resultActionThunk, processFullRespBody = false) =>
    async (...serviceCallArgs) => {
      let error = undefined
      let setStatePromise
      dispatch(setBackendWorking())
      try {
        const resp = await serviceMethod(...serviceCallArgs)
        if (!resp.ok) {
          throw await getRespError(resp)
        }
        const respBody = await getResponseBody(resp)
        setStatePromise = resultActionThunk && await dispatch(resultActionThunk(
          !processFullRespBody ? respBody.data || respBody : respBody
        ))
      } catch (err) {
        error = err
        console.error(err)
        dispatch(toastShow(TOAST_TYPE_ERROR, err.message))
      } finally {
        dispatch(setBackendWorkingDone())
      }
      return error || setStatePromise
    }

从失败的获取中返回的错误数据示例 Example of error data coming back from a failed fetch

0 个答案:

没有答案