来自两个 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的行为基本上与每个promise本身一样，但按提供的promise的顺序返回一个结果数组。这看起来像这样：

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>' }