如何跨多个页面获取数据?
How to fetch data over multiple pages?
我的项目基于 React、redux、redux-saga、es6,我尝试从中获取数据 API:
如您所见,此特定 API 调用显示的数据限制为每页 100 个数据,分布在 40 页上。
根据这个答案:
http://userforum.dhsprogram.com/index.php?t=msg&th=2086&goto=9591&S=Google
它说您可以将限制扩展到每页最多 3000 个数据。
但是,在某些情况下,我会执行超过该限制的 API 调用,这意味着我不会像这样接收所有数据:
export function fetchMetaData(countryCode: string, surveyYears: string) {
return (fetch('http://api.dhsprogram.com/rest/dhs/data/' + countryCode + ',' + surveyYears + '?returnFields=CharacteristicLabel,Indicator,IndicatorId,Value&f=json')
.then(response => response.json())
.then(json => json.Data.map(survey => survey)))
}
所以我的问题是;鉴于我知道数据的总页数,从 API 获取所有数据的最佳方法是什么。论坛link中的答案建议循环遍历API。但是,我找不到正确的语法用法来执行此操作。
我的想法是进行一次 api 调用以获取总页数。然后使用 redux+redux-saga 将其存储在一个状态中。然后执行一个新请求,将总页数作为参数发送,并获取该总页数次。通过这样做,我无法弄清楚每次迭代存储数据的语法。
一个可能的解决方案 - 这个想法是先获取页数,然后进行适当数量的 API 调用,将每次调用的承诺推送到一个数组中。然后我们等待所有的承诺解决,并对返回的数据做一些事情。
async function fetchMetaData() {
const response = await fetch('apiUrlToGetPageNumber');
const responses = await Promise.all(
Array.from(
Array(resp.data.pagesRequired),
(_, i) => fetch(`apiUrlToSpecificPage?page=${i}`)
)
);
// do something with processedResponses here
}
这是使用 async/await
的另一种可能的解决方案。这样做的好处是 total_pages
计数是动态的,因此如果它在您处理请求时增加,它会确保您得到所有请求。
async function fetchMetaData() {
let allData = [];
let morePagesAvailable = true;
let currentPage = 0;
while(morePagesAvailable) {
currentPage++;
const response = await fetch(`http://api.dhsprogram.com/rest/dhs/data?page=${currentPage}`)
let { data, total_pages } = await response.json();
data.forEach(e => allData.unshift(e));
morePagesAvailable = currentPage < total_pages;
}
return allData;
}
我的项目基于 React、redux、redux-saga、es6,我尝试从中获取数据 API:
如您所见,此特定 API 调用显示的数据限制为每页 100 个数据,分布在 40 页上。
根据这个答案: http://userforum.dhsprogram.com/index.php?t=msg&th=2086&goto=9591&S=Google 它说您可以将限制扩展到每页最多 3000 个数据。
但是,在某些情况下,我会执行超过该限制的 API 调用,这意味着我不会像这样接收所有数据:
export function fetchMetaData(countryCode: string, surveyYears: string) {
return (fetch('http://api.dhsprogram.com/rest/dhs/data/' + countryCode + ',' + surveyYears + '?returnFields=CharacteristicLabel,Indicator,IndicatorId,Value&f=json')
.then(response => response.json())
.then(json => json.Data.map(survey => survey)))
}
所以我的问题是;鉴于我知道数据的总页数,从 API 获取所有数据的最佳方法是什么。论坛link中的答案建议循环遍历API。但是,我找不到正确的语法用法来执行此操作。
我的想法是进行一次 api 调用以获取总页数。然后使用 redux+redux-saga 将其存储在一个状态中。然后执行一个新请求,将总页数作为参数发送,并获取该总页数次。通过这样做,我无法弄清楚每次迭代存储数据的语法。
一个可能的解决方案 - 这个想法是先获取页数,然后进行适当数量的 API 调用,将每次调用的承诺推送到一个数组中。然后我们等待所有的承诺解决,并对返回的数据做一些事情。
async function fetchMetaData() {
const response = await fetch('apiUrlToGetPageNumber');
const responses = await Promise.all(
Array.from(
Array(resp.data.pagesRequired),
(_, i) => fetch(`apiUrlToSpecificPage?page=${i}`)
)
);
// do something with processedResponses here
}
这是使用 async/await
的另一种可能的解决方案。这样做的好处是 total_pages
计数是动态的,因此如果它在您处理请求时增加,它会确保您得到所有请求。
async function fetchMetaData() {
let allData = [];
let morePagesAvailable = true;
let currentPage = 0;
while(morePagesAvailable) {
currentPage++;
const response = await fetch(`http://api.dhsprogram.com/rest/dhs/data?page=${currentPage}`)
let { data, total_pages } = await response.json();
data.forEach(e => allData.unshift(e));
morePagesAvailable = currentPage < total_pages;
}
return allData;
}