时间戳

首页 > 解决方案 > 如何用函数包装导出工厂的组件？

javascript - 如何用函数包装导出工厂的组件？

问题描述

在我的 reactjs 应用程序中，我成功地使用了一个返回工厂的组件（我认为这是正确的名称）。
简单来说：

import { Auth } from "authenticator";


export default function SignIn() {
  ...
  const signIn = (e) => {
    Auth.signIn({username, password}).then((user) => {
       ...
    });
  }
}

如您所见，工厂函数返回承诺。
现在，我想用一个函数来包装 Auth 工厂，比如说一个油门。
因此，为了避免包装每个 Auth 函数调用（Auth.signIn、Auth.signUp、Auth.forgotPassword 等），我想将 Auth 组件包装在我的另一个组件中。
像这样的一些想法：

import { Auth } from "authenticator";
import { throttle } from "throttle";   

export default function ThrottledAuth() {
  return throttle(Auth);
}

当然，这个解决方案的问题是我不能做 - 正如我希望的那样 - 像：

import ThrottledAuth from "./ThrottledAuth";

ThrottledAuth.signIn({username, password)}).then((user) => {
    ...
});

因为我得到：“未捕获的 TypeError：promise.then 不是函数”，因为 Auth.signIn 返回一个承诺。

您能否建议包装工厂返回函数（返回承诺）的正确方法？

标签： javascriptreactjsreact-functional-component

解决方案

我自己终于找到了这个解决方案，我完全不喜欢它，因为它很沉闷......

export async function throttledSignIn(props, {success, error, final}) {
  throttle(
    Auth.signIn({...props})
      .then((result) => success(result))
      .catch((data) => error(data))
      .finally((data) => final(data))
   );
}

以这种方式使用它：

import { throttledSignIn, throttledSignUp, ... } from "./ThrottledAuth";

throttledSignIn({
  username,
  password,
}, {
  success: (user) => {
    ...
  },
  error: (err) => {
    ...
  },
  final: (data) => {
    ...
  }
});

我不会接受这个答案，如果有更时尚的解决方案，我会很高兴阅读并采用它......

推荐阅读