javascript - 为 api 调用创建包装函数时遇到问题

Question

所以基本上我有一个模式我想在我的 api 调用中使用。它本质上是一个 try catch finally block ，我在其中分派(dispatch)一系列操作。我不想在任何地方复制和粘贴此模式，而是想创建一个包装函数，我传入的只是必要的参数、api 函数和调度操作。

我的 try 调用 block 函数如下所示:

export function getTokenAPI(username, password) {
  return async function action(dispatch) {
    try {

      dispatch(loadingActions.loadingInProgress(true));


      const { data } = await API.authGetToken(username, password);
      const { success } = data;

      console.log('get token api data', data);
      if (success) {


        dispatch(setData(data));

        dispatch(setTokenSuccess());
      } else if (!success) {
        const { errorMessage } = data;
        throw Error(errorMessage || 'You broke it, not my fault');
      }
    } catch (e) {
      dispatch(errorActions.addError(e.message));
      dispatch(errorActions.removeError());
    } finally {
      dispatch(loadingActions.loadingInProgress(false));
    }
  };
}

所以我尝试创建的包装器看起来像这样:

function wrapper(apiFunction, dispatchAction) {
  return async function action(dispatch) {
    try {
      dispatch(loadingActions.loadingInProgress(true));
      const { data } = await apiFunction(arg1, arg2);
      const { success } = data;
      if (success) {
        dispatch(dispatchAction(data));
      } else if (!success) {
        const { errorMessage } = data;
        throw Error(errorMessage || 'meh');
      }
    } catch (e) {
      dispatch(errorActions.addError(e.message));
      dispatch(errorActions.removeError());
    } finally {
      dispatch(loadingActions.loadingInProgress(false));
    }
  };
}

有了它我终于可以跑了

wrapper(apiFunction(username, password), setData)

但我得到了一个 TypeError Cannot read property type of undefined。我想知道我是否以正确的方式进行此操作。

有什么建议或建议吗？

Answer 1

wrapper 是一个高阶函数，需要两个参数 apiFunction 和 dispatchAction 以及 return 一个 action creator，它需要一个 Action 并且必须包装在一个 dispatch 实例中。所以你应该像这样使用wrapper

const Component = () =>{
    const dispatch = useDispatch()

    const onSubmit = () =>{
        dispatch(wrapper(apiFunction, dispatchAction)(action))
    }
}

wrapper(apiFunction, dispatchAction) 评估另一个需要参数 action 并且需要显式执行的函数。相当于

const onSubmit = () =>{
    const actionCreator = wrapper(apiFunction, dispatchAction)
    dispatch(actionCreator(action))
}