我正在尝试对数据库实施多个请求,然后在我的 gatsby 应用程序中显示结果。
我有一个可行的解决方案,只需一个(!)请求。
const ListRezept = (props) => {
const url_id = props.params.id;
const [data, setData] = useState(null);
const [isPending, setIsPending] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const abortCont = new AbortController();
setTimeout(() => {
fetch('https://abc.4.azurestaticapps.net/data-api/rest/Rezept?$filter=RezeptId eq '+ url_id)
.then(res => {
if (!res.ok) { // error coming back from server
console.log("error");
throw Error('Could not fetch the data for that resource!');
}
return res.json();
})
.then(data => {
setIsPending(false);
setData(data.value);
setError(null);
})
.catch(err => {
if (err.name === 'AbortError') {
console.log('fetch aborted')
} else {
// auto catches network / connection error
setIsPending(false);
setError(err.message);
}
});
}, []);
// abort the fetch
return () => abortCont.abort();
}, [])
...
}
现在我想集成Promise.all函数来调用多个请求。 我怎样才能做到这一点? 在许多网站中,只有一个示例如何调用多个请求并将它们记录在控制台中。 例如https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
在我的方法中,我必须将单个请求的每个结果映射到一个变量。
在这里你可以看到我是如何开始的,但是失败了......我不知道如何处理Promise.all中的多个答案
const rezeptreq = fetch('https://abc.4.azurestaticapps.net/data-api/rest/Rezept?$filter=RezeptId eq '+ url_id);
const rezeptartreq = fetch('https://abc.4.azurestaticapps.net/data-api/rest/Rezeptart');
Promise.all([rezeptreq, rezeptartreq])
.then(([res1, res2 ]) => {
if (!res1.ok) { // error coming back from server
console.log("error");
throw Error('Could not fetch the data for that resource!');
}
return res.json(), res2.json();
...
我必须创建一个数组吗? 如何访问每个请求的单个结果?
function MultipleRequest() {
const abortControllerRef = useRef(null);
useEffect(() => {
if (!abortControllerRef.current) {
const newAbortController = new AbortController();
abortControllerRef.current = newAbortController;
}
callMultipleRequest();
return () => {
if (abortControllerRef.current) {
abortControllerRef.current.abort();
}
};
}, [])
const callMultipleRequest = async () => {
const abortController = abortControllerRef.current;
const rezeptreq = fetch('https://dummyjson.com/products/1', { signal: abortController.signal });
const rezeptartreq = fetch('https://dummyjson.com/products/1', { signal: abortController.signal });
Promise.all([rezeptreq, rezeptartreq]).then((responseArray) => {
responseArray.forEach(element => {
if (!element.ok) {
console.log("error");
throw Error('Could not fetch the data for that resource!');
}
});
return Promise.all(responseArray.map(res => res.json()));
}).then((res) => {
console.log("res => ", res);
}).catch((err) => {
console.error(err);
})
}
return (
<div>MultipleRequest</div>
)
}
它使用 fetch API 向同一端点发出两个 HTTP 请求。这些请求是使用 AbortController API 发出的,该 API 允许在需要时中止请求。该组件使用 useEffect 钩子来初始化 AbortController 并在组件挂载时调用 callMultipleRequest 函数。 callMultipleRequest 函数发出 HTTP 请求并处理响应。如果任何响应不正确,则会引发错误。然后响应将记录到控制台。该组件返回一个带有文本“MultipleRequest”的元素。