我正在尝试通过https://dog.ceo/dog--api/documentation/
引用其文档来从本网站获取一些数据我正在尝试检索狗品种清单并创建一个清单。我正在使用JavaScript的" Fetch"
let dog_list = [];
fetch('https://dog.ceo/api/breeds/list/all')
.then(response => {
if (response.ok) {
return response.json();
} else {
throw new Error(response.statusText);
}
})
.then(data => dog_list = data.message)
const container = document.getElementById("container");
for (dog in dog_list) {
let li = document.createElement("li");
let node = document.createTextNode(dog);
li.appendChild(node);
container.appendChild(li);
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Dog Breed List</title>
</head>
<body>
<ul id="container"></ul>
<script src="dog_breed.js"></script>
</body>
</html>我在第二个"然后"中遇到问题，我不知道如何将JSON对象转换为阵列并显示为
- dog1
- dog2
- dog3
只需在您创建dog_list的回调中构造 li ...
这样的东西...
let dog_list = [];
const container = document.getElementById("container");
fetch('https://dog.ceo/api/breeds/list/all')
.then(response => {
if (response.ok) {
return response.json();
} else {
throw new Error(response.statusText);
}
})
.then(data => {
dog_list = data.message;
for (dog in dog_list) {
let li = document.createElement("li");
let node = document.createTextNode(dog);
li.appendChild(node);
container.appendChild(li);
}
});
为什么您需要在Promise处理程序内构建结果的DOM结构？
因为完整 fetch(/*...*/).then(/*...*/).then(/*...*)块将被执行异步
不等待该代码完成，Mainline（'Global'）代码将在此之后继续执行，在您的情况下，该代码正在获取容器并开始添加li元素。问题是，在这一点上，从获取呼叫的响应处理甚至无法启动（即使执行并返回了结果），因此dog_list将是空的。
由于.then中的回调是异步的，因此您可以在.then回调中填充列表，否则dog_list仍将是一个空数组，即循环运行的时间：
fetch('https://dog.ceo/api/breeds/list/all')
.then(response => {
if (response.ok) {
return response.json();
} else {
throw new Error(response.statusText);
}
})
.then(data => populate(data.message));
function populate(dog_list){
const container = document.getElementById("container");
for (dog in dog_list) {
let li = document.createElement("li");
let node = document.createTextNode(dog);
li.appendChild(node);
container.appendChild(li);
}
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Dog Breed List</title>
</head>
<body>
<ul id="container"></ul>
</body>
</html>您也可以使用async和await尝试相同。请在下面看看。
const url = 'https://dog.ceo/api/breeds/list/all';
async function Main() {
const dog_data = await getDogData(url).catch(catchError);
const dog_list = dog_data.message;
const container = document.getElementById("container");
for (dog in dog_list) {
const node = createHTMLElement('li', dog);
container.appendChild(node);
}
}
function catchError(err) {
console.log('Error ', err);
}
function createHTMLElement(_node, data) {
let li = document.createElement("li");
li.textContent = dog;
return li;
}
async function getDogData(_url) {
const response = await fetch(_url);
return await response.json();
}
Main();<!DOCTYPE html>
<html lang="en">
<head>
<title>Dog Breed List</title>
</head>
<body>
<ul id="container"></ul>
</body>
</html>