Блог

Главная - Вопросы по программированию - Вызов нескольких асинхронных функций с помощью useEffect

Вызов нескольких асинхронных функций с помощью useEffect

#reactjs #asynchronous #use-effect

Вопрос:

У меня есть следующая функция, которая вызывает api

   useEffect(() => {
    loadMarkets();
  }, []);

  async function loadMarkets() {
    const marketInformation = await frService.getMarketInfo();
    addMarketInfo(marketInformation.response.data);
  }

Я хочу сделать аналогичный звонок loadBooks() . Если я не возражаю, какой метод будет первым, смогу ли я просто вызвать его, как показано ниже, или мне следует обернуть это в 1 асинхронную функцию/завернуть в обещание?

   useEffect(() => {
    loadMarkets();
    loadBooks();
  }, []);

  async function loadMarkets() {
    const marketInformation = await frService.getMarketInfo();
    addMarketInfo(marketInformation.response.data);
  }

  async function loadBooks() {
    ....

Ответ №1:

     loadMarkets();
    loadBooks();

поскольку эти функции имеют префикс async ключевого слова, они являются обещаниями. Загрузочные книги будут запущены до завершения загрузки.

простой ответ, да, вы можете сделать так, как вы написали, однако я бы попытался поймать ошибки с помощью чего-то вроде

loadMarkets().уловить(досомет, если это ошибка)

где doSomethingIfThereIsAnError будет функция, которая выполняет som…

Ответ №2:

На самом деле не имеет значения, что будет первым, так как они async оба . Во время первоначального рендеринга вашего компонента useEffect будут вызываться обе async функции. Если вам нужно проверить, какая конечная точка api вызывается первой и сколько времени требуется для выполнения, вы можете открыть инструменты разработки браузера и проверить вкладку сеть.

Метки: