результаты поиска из двух API

Question

Я хотел бы получить данные от двух API на моей странице поиска. Могу ли я использовать Promise.all ()? и как это сделать?

// npm i react-filter-search

   const SearchPage = (props) => {
            useEffect(() => {
                fetch(' https://heka4.apache.techcollege.dk/api/ingredients/')
                      .then(response => response.json())
                      .then((data) => {setData(data)
                        setSearchWord(props.match.params.searchWord)
                    setLoader('done')});
            }, []);

Answer 1

Использование Promise.all в основном ведет себя так же, как и каждое обещание, но возвращает массив результатов в порядке предоставленных обещаний. Это выглядело бы примерно так:

const source1 = fetch('https://heka4.apache.techcollege.dk/api/ingredients/');
const source2 = fetch('...');
Promise.all([source1, source2])
.then((allResponses) => allResponses.map(singleResponse => singleResponse.json()))
.then(([result1, result2]) => {
  // Do what you want with the two responses.
});

Если желаемый результат заключается в том, что используется более быстрое из двух, например, для некоторой формы балансировки нагрузки, то есть также Promise.race, который идет только с первый ответ.

Другой вариант будет использовать Promise.allSettled, особенно если вы не уверены, что все запросы были успешными. Отличие от Promise.all состоит в том, что он оборачивает результат в объект, который описывает состояние ответа следующим образом: { status: "fulfilled", value: '<result>' } или { status: "rejected", value: '<result>' }