javascript - 无法为api调用创建包装函数

所以从本质上讲，我有一个模式，我想在我的所有api调用中使用。实际上，这是一个try catch finally块，在该块中我调度了一系列动作。与其在所有地方复制和粘贴此模式，不如创建一个包装函数，在其中传递的所有内容都是必需的参数，api函数和调度动作。

我的try调用块函数如下所示：

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。我想知道我是否正在以正确的方式进行操作。

有什么建议或建议吗？

最佳答案

wrapper是一个high order function，它需要两个参数apiFunction和dispatchAction，而return一个action creator，它需要一个动作，并且必须包装在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))
}

关于javascript - 无法为api调用创建包装函数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58508013/