Повторный вызов функции asyn c в useEffect внутри другой функции asyn c после неудачного запроса на выборку API

Question

Это немного сложно объяснить, но вот что я делаю:

1. Попытка получить json данные из асинхронной c функции, называемой getJsonData (), пока данные не будут
2. После правильного получения данных я хочу получить еще один набор json данных из getOtherJsonData ()

Следующий код возвращает мне первый набор данных (getJsonData ) правильно даже после неудач Х. (если есть)

Однако второй набор данных (getOtherJsonData) не получает постоянно, так как может произойти ошибка. Я хочу, чтобы продолжал повторное выполнение blo c кода, отмеченного ниже, до тех пор, пока второй набор данных не будет возвращен правильно.

...
import React, {useState, useEffect} from 'react';
import {getJsonData} from './getJsonData';
imoport {getOtherJsonData} from './getOtherJsonData';

const myApp = () => {
    const [errorFetchedChecker, setErrorFetchedChecker] = useState(false);
    const [isLoading,setIsLoading] = useState(true);
    const [data,setData] = useState(null);

    const updateState = jsonData => {
      setIsloading(false);
      setData(jsonData);
    };

    useEffect(() => {
      getJsonData().then(
        data => {
          updateState(data);

          // This is the bloc I want to keep re-executing
          //
          getOtherJsonData(data.title).then(
            otherData => {
              updateOtherState(otherData);
              console.log("Updated with no error);
            },
            otherError => {
            console.log("Error, try getOtherJsonData again ?");
            console.log("Can't try to refresh, no errorFetchedChecker for me :/ ");
            }
          //
          // Until It doesn't return an error

        },
        error => {
          console.log('Error fetching, re-trying to fetch thanks to errorFetchedChecker');
          setErrorFetchedChecker(c => !c);
        },
      );
    }, [errorFetchedChecker]);

    return (
      <View>
        <Text>{state.data.title}</Text>
        <Text>{data.data.completed}</Text>
      </View>
    );
}

Вот getJsonData () и getOtherJsonData ()

export async function getJsonData() {
  try {
    let response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    let responseJson = await response.json();
    return responseJson;
  } catch (error) {
    throw error;
    // Should I just throw the error here ?
  }
}

export async function getOtherJsonData(oldData) {
  try {
    let response = await fetch(`https://someOtherApilink/${oldData}`);
    let responseJson = await response.json();
    return responseJson;
  } catch (error) {
    throw error;
    // Should I just throw the error here also ?
  }
}

Этот - мой другой вопрос, который объясняет, как повторно выполнить первый getJsonData () в случае сбоя.

Ниже я кое-что попробовал, но дал мне ошибка в отношении необработанных обещаний:

const subFunction(myTitle) => {
  getOtherJsonData(myTitle).then(
    otherData => {
      updateOtherState(otherData);
      console.log("Updated with no error);
    },
    otherError => {
      console.log("Error, try getOtherJsonData again!");
      subFunction(myTitle);  //Gives Unhandled promise warning and no result
    }
}

useEffect(() => {
  getJsonData().then(
    data => {
      updateState(data);

      // This is the bloc I want to keep re-executing
      //
      subFunction(data.title);
      //
      // Until It doesn't return an error

    },
    error => {
      console.log('Error fetching, re-trying to fetch thanks to errorFetchedChecker');
      setErrorFetchedChecker(c => !c);
    },
  );
}, [errorFetchedChecker]);

Примечание. Не стесняйтесь перефразировать заголовок в любом виде, форме или форме.

Answer 1

Вы можете попытаться разделить эти две функции, используя две useEffect, потому что теперь вам придется повторить первый запрос в случае второго сбоя. Как то так:

useEffect(() => {
      getJsonData().then(
        data => {
          updateState(data);
        },
        error => {
          console.log('Error fetching, re-trying to fetch thanks to errorFetchedChecker');
          setErrorFetchedChecker(c => !c);
        },
      );
    }, [errorFetchedChecker]);

useEffect(() => {
    // prevent request if there's no data
    if (data) {
        getOtherJsonData(data.title).then(
            otherData => {
              updateOtherState(otherData);
              console.log("Updated with no error);
            },
            otherError => {
            console.log("Error, try getOtherJsonData again ?");
            console.log("Can't try to refresh, no errorFetchedChecker for me :/ ");
            // you'll have to create one more state for that
            setOtherErrorFetchedChecker(c => !c);
            }
    }
}, [data, otherErrorFetchedChecker])