我正在尝试为Pathfinder创建一个搜索页面。下面是我编写的代码,尝试从API中提取数据。当我尝试让获取工作时,我注意到当我使用console.log记录从获取返回的数据时,它不止一次列出。
async function getData(){
const apiKey = "API KEY WITHHELD";
const actionsURL = "https://api.pathfinder2.fr/v1/pf2/action";
const ancestriesURL = "https://api.pathfinder2.fr/v1/pf2/ancestry";
const ancestryFeaturesURL = "https://api.pathfinder2.fr/v1/pf2/ancestryFeature";
const archetypesURL = "https://api.pathfinder2.fr/v1/pf2/archetype";
const backgroundsURL = "https://api.pathfinder2.fr/v1/pf2/background";
const classesURL = "https://api.pathfinder2.fr/v1/pf2/class";
const classFeaturesURL = "https://api.pathfinder2.fr/v1/pf2/classFeature";
const deitiesURL = "https://api.pathfinder2.fr/v1/pf2/deity";
const equipmentURL = "https://api.pathfinder2.fr/v1/pf2/equipment";
const featsURL = "https://api.pathfinder2.fr/v1/pf2/feat";
const spellsURL = "https://api.pathfinder2.fr/v1/pf2/spell";
// Actions
const actionsResponse = await fetch(actionsURL, {
'method': 'GET',
'headers': new Headers({
"Authorization": apiKey,
"Content-Type": 'application/json',
"Accept": "application/json",
"X-Requested-With": "XMLHttpRequest",
}),
});
const actionsData = await actionsResponse.json();
// Ancestries
const ancestriesResponse = await fetch(ancestriesURL, {
'method': 'GET',
'headers': new Headers({
"Authorization": apiKey,
"Content-Type": 'application/json',
"Accept": "application/json",
"X-Requested-With": "XMLHttpRequest",
}),
});
const ancestriesData = await ancestriesResponse.json();
// Ancestry Features
const ancestryFeaturesResponse = await fetch(ancestryFeaturesURL, {
'method': 'GET',
'headers': new Headers({
"Authorization": apiKey,
"Content-Type": 'application/json',
"Accept": "application/json",
"X-Requested-With": "XMLHttpRequest",
}),
});
const ancestryFeaturesData = await ancestryFeaturesResponse.json();
// Archetypes
const archetypesResponse = await fetch(archetypesURL, {
'method': 'GET',
'headers': new Headers({
"Authorization": apiKey,
"Content-Type": 'application/json',
"Accept": "application/json",
"X-Requested-With": "XMLHttpRequest",
}),
});
const archetypesData = await archetypesResponse.json();
// Backgrounds
const backgroundsResponse = await fetch(backgroundsURL, {
'method': 'GET',
'headers': new Headers({
"Authorization": apiKey,
"Content-Type": 'application/json',
"Accept": "application/json",
"X-Requested-With": "XMLHttpRequest",
}),
});
const backgroundsData = await backgroundsResponse.json();
// Classes
const classesResponse = await fetch(classesURL, {
'method': 'GET',
'headers': new Headers({
"Authorization": apiKey,
"Content-Type": 'application/json',
"Accept": "application/json",
"X-Requested-With": "XMLHttpRequest",
}),
});
const classesData = await classesResponse.json();
// Class Features
const classFeaturesResponse = await fetch(classFeaturesURL, {
'method': 'GET',
'headers': new Headers({
"Authorization": apiKey,
"Content-Type": 'application/json',
"Accept": "application/json",
"X-Requested-With": "XMLHttpRequest",
}),
});
const classFeaturesData = await classFeaturesResponse.json();
// Deities
const deitiesResponse = await fetch(deitiesURL, {
'method': 'GET',
'headers': new Headers({
"Authorization": apiKey,
"Content-Type": 'application/json',
"Accept": "application/json",
"X-Requested-With": "XMLHttpRequest",
}),
});
const deitiesData = await deitiesResponse.json();
// Equipment
const equipmentResponse = await fetch(equipmentURL, {
'method': 'GET',
'headers': new Headers({
"Authorization": apiKey,
"Content-Type": 'application/json',
"Accept": "application/json",
"X-Requested-With": "XMLHttpRequest",
}),
});
const equipmentData = await equipmentResponse.json();
// Feats
const featsResponse = await fetch(featsURL, {
'method': 'GET',
'headers': new Headers({
"Authorization": apiKey,
"Content-Type": 'application/json',
"Accept": "application/json",
"X-Requested-With": "XMLHttpRequest",
}),
});
const featsData = await featsResponse.json();
// Spells
const spellsResponse = await fetch(spellsURL, {
'method': 'GET',
'headers': new Headers({
"Authorization": apiKey,
"Access-Control-Allow-Headers": "*",
"Content-Type": 'application/json',
"Accept": "application/json",
"X-Requested-With": "XMLHttpRequest",
}),
});
const spellsData = await spellsResponse.json();
// do what you want with actionsData and ancestriesData, etc here
console.log(actionsData);
console.log(ancestriesData);
console.log(ancestryFeaturesData);
console.log(archetypesData);
console.log(backgroundsData);
console.log(classesData);
console.log(classFeaturesData);
console.log(deitiesData);
console.log(equipmentData);
console.log(featsData);
//console.log(spellsData);
}
getData();
最初,我使用提取来获取主端点中列出的所有端点(请参见第页:https://api.pathfinder2.fr/doc),然后运行一个循环从每个端点获取数据-- DRY原则等等。
const apiKey = "API KEY WITHHELD";
let pathfinderLibraries = [];
let pathfinder = fetch("https://api.pathfinder2.fr/v1/pf2", {
'method': 'GET',
'headers': new Headers({
"Authorization": apiKey,
"Content-Type": "application/json",
"Accept": "application/json",
"X-Requested-With": "XMLHttpRequest",
}),
}).then((response) => {
return response.json()
})
.then(data => {
let pflibraries = data;
//console.log(pflibraries);
pflibraries.forEach(pflibrary => {
pathfinderLibraries.push(pflibrary);
pathfinderLibraries.forEach( library => {
fetch(library, {
'method': 'GET',
'headers': new Headers({
"Authorization": apiKey,
"Content-Type": "application/json",
"Accept": "application/json",
"X-Requested-With": "XMLHttpRequest",
}),
}).then((response) => {
return response.json()
}).then(data => {
console.log(data);
});
});
console.log(pflibrary);
});
});
但是这样做会多次记录每个端点数据,所以我决定尝试不使用循环,这减少了记录每个端点数据的次数,但是数据仍然会被多次记录。
我尝试更改console.logs的位置,结果是2个结果中的1个,要么根本不记录,要么继续记录多次。
如前所述,我只想创建一个带有循环的函数,循环将遍历列出子端点的主端点并获取数据,以便为Pathfinder创建搜索页面。
1条答案
按热度按时间xwbd5t1u1#
在这段代码中
你遍历
pflibraries
,然后把它们加到pathfinderLibraries
中,紧接着你遍历pathfinderLibraries
.这意味着每次循环
pflibraries
之后,pathfinderLibraries
中的库列表将包含当前迭代中的pflibrary
以及pflibraries
之前所有迭代中的pflibrary
。要解决此问题,您需要从代码中删除此
forEach
并且在当前迭代中仅调用
library
的fetch
。