如何检索从提取请求中检索到的数据并循环使用这些数据

Question

当人们按城市名称搜索时，我使用一个开源api来检索啤酒厂。我可以安慰你。log返回的promise，但当我尝试循环并console.log数据时，它告诉我undefined。

const searchBtn = document.getElementById('beer-search-button');
const getBeerData = (cityName) => {
const beerApi = `https://api.openbrewerydb.org/breweries?by_city=${cityName}`;
encodeURI(beerApi);
fetch(beerApi)
.then(res => {
if(res.ok) {
console.log(res.json());
for(let b in res) {
console.log(b.name);
}
} else {
console.log('Error!');
}
});
}
searchBtn.addEventListener('click', function(e) {
e.preventDefault;
let searchQuery = document.getElementById('city-input').value;

getBeerData(searchQuery);
});

Answer 1

您需要循环res.json()的结果。您可以使用另一个.then()执行此操作。

并且在不使用结果的情况下调用encodeURI()没有任何效果。您应该对城市名称调用encodeURIComponent()，并在URI中使用它。

const getBeerData = (cityName) => {
const beerApi = `https://api.openbrewerydb.org/breweries?by_city=${encodeURIComponent(cityName)}`;
fetch(beerApi)
.then(res => {
if (res.ok) {
return res.json()
} else {
throw "Error";
}
}).then(res => res.forEach(b => console.log(b.name)));
}

Answer 2

您已经记录了promise，但尚未解析该JSON。如果一个数组不存在，就不能对其进行循环。而且，因为它是一个数组，所以应该使用for/of循环for (const b of data)...。

这是一个缩短的版本。

// Get the data
fetch(beerApi)
// Parse the data
.then(res => res.json())
// Loop over the data
.then(data => {
for (const b of data) {
console.log(b.name);
}
});
});

Answer 3

res.json()还返回一个Promise，您需要使用then()或使用await等待它，这当然是我的首选选项。

请注意，没有必要对整个字符串进行URL编码，因为API的URL已经正确编码，所以您只需要对城市名称进行URI编码。您可能应该做的另一件事是，在分配事件侦听器之前，等待使用DOMContentLoaded事件加载DOM，否则可能会出现问题，因为DOM元素可能还不存在。

const getBeerData = async (cityName) => {
const beerApi = `https://api.openbrewerydb.org/breweries?by_city=${encodeURIComponent(cityName)}`;
const res = await fetch(beerApi);
if (res.ok) {
const breweries = await res.json();
breweries.forEach(brewery => console.log(brewery));
} else {
console.log("Error!");
}
};
window.addEventListener("DOMContentLoaded", event => {
const searchBtn = document.getElementById("beer-search-button");
searchBtn.addEventListener("click", async function (e) {
e.preventDefault;
let searchQuery = document.getElementById("city-input").value;

await getBeerData(searchQuery);
});
})

<input type="text" id="city-input" name="city-input">
<button id="beer-search-button">Search for breweries!</button>