Question

想象一下，您已经使用React Hooks和Context API构建了一个React表单。当用户按下Submit时，您需要运行验证，其中包括检查是否已经存在各种电子邮件地址，各种公司名称，并且也许还需要进行其他一些异步检查。

其中的每一个都将独立执行，并且您不能保证其中的任何一个是最后一个完成。

开始验证时，将isProcessing标志设置为true。完成上述所有检查后，将isProcessing设置为false。

鉴于一个异步调用对其他异步调用一无所知，如何管理这种情况？简而言之，您如何知道何时完成所有异步调用，以便将isProcessing设置为false并发出POST请求？

Answer 1

您在正确的轨道上，但是通常，如果所有这些都是异步的，则应该使用

Promise.all()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

然后，您可以对所有异步过程使用一次等待。启用isProcessing，然后在Promise之后将其设为false。所有操作都将完成所有异步验证。

但是有效的明智的做法是，我认为最好在一个异步函数中设置验证，以不同方式处理它们效率低下并且调用很多，尽管在某些特殊情况下，您依赖第三方api。

您的代码可能应该符合这些要求

useEffect(()=>{
   async function validateFields(){
     // setState isProcessing true
     const asyncValidation1 = promiseFunction();
     const asyncValidation2 = promiseFunction();
     const result = await Promise.all(asyncValidation1 , asyncValidation2);
     // Handle the result
     // setState isProcessing false

   }
    validateFields();

},[])

请注意，我已将验证功能包装到异步功能中。这是因为声明异步useEffect是不正确的做法。

如何处理独立的，长期运行的useEffect操作？

1 个答案: