Как обрабатывать независимые, длительные операции useEffect?

Question

Представьте, что вы создали форму React с использованием React Hooks и Context API. Когда пользователь нажимает 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.all завершит выполнение всех ваших асинхронных проверок.

Но с точки зрения эффективности, я считаю, что лучше настроить проверку в одной асинхронной функции, обрабатывая их по-разному. неэффективно и имеет много вызовов, хотя есть особые случаи, в которых вы зависите от сторонних 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 является плохой практикой.