按特定顺序获取api请求
按特定顺序获取api请求
提问于 2021-01-18 12:14:40
我正在尝试使用JavaScript fetch获取一些信息。如下所示：
function apiReq (ids){
var api = ("https://anapioficeandfire.com/api/characters/" + ids);
fetch(api)
.then (result => result.json())
.then ((res) => {
(res)
var charInfo = document.getElementById("banner");
var label = document.querySelector(".characters__container");
var cardBody = document.querySelector(".card-body");
var ul = document.createElement("ul");
label.appendChild(ul);
charInfo.appendChild(label);
switch (ids) {
case ids: cardBody.innerHTML += "<h3 class='card-title'>" + res.name + "</h3>";
cardBody.innerHTML += "<p class='card-text'> Title: <br>" + res.titles[0] + "</p>";
if(res.titles[0] == "") {
cardBody.innerHTML += "<p class='card-text'>Unknown</p>";
}
cardBody.innerHTML += "<p class='card-text'>Alias: <br>" + res.aliases[0] + "</p>";
cardBody.innerHTML += "<p class='card-text'> Born: <br>" + res.born + "</p>";
break;
}
})
.catch (error => console.log(error))
};
apiReq(148); // Arya Stark
apiReq(583); // Jon Snow
apiReq(957); // Sansa Stark
apiReq(338); // Eddard Stark
apiReq(529); // Jamie Lannister
apiReq(1052); // Tyrion Lannister
apiReq(565); // Joffrey Baratheon
apiReq(901); // Robert Baratheon
apiReq(1022); // Theon Greyjoy
apiReq(1303); // Daenerys Targaryen我想要的是使ids出现在顺序上，这样它总是先抓取Arya，然后再取乔恩·雪诺等等.我怎么能让这一切发生呢？或者这是一种使提取始终按特定顺序进行(可能使用排序或其他方式)的方法？
重要的是以特定的顺序获取它们，这样它就能与我为这个项目获得的不同图像相匹配。
回答 2
Stack Overflow用户
发布于 2021-01-18 12:19:54
您需要使函数异步，并等待每个请求按顺序发出。
async function apiReq (ids){
// your code
}
await apiReq(148); // Arya Stark
await apiReq(583); // Jon Snow
await apiReq(957); // Sansa Stark
await apiReq(338); // Eddard Stark
.
.
.Stack Overflow用户
发布于 2021-01-18 12:49:22
如果要保证获取顺序，则需要使用async/await语法：
const charInfo = document.getElementById("banner");
const label = document.querySelector(".characters__container");
const apiReq = async (id) => {
const api = ("https://anapioficeandfire.com/api/characters/" + id);
try {
const response = fetch(api);
const res = await response.json();
var cardBody = document.querySelector(".card-body");
var ul = document.createElement("ul");
label.appendChild(ul);
charInfo.appendChild(label);
cardBody.innerHTML += .....
} catch (error) {
console.log(error)
}
};
( async() => {
await apiReq(148); // Arya Stark
await apiReq(583); // Jon Snow
await apiReq(957); // Sansa Stark
await apiReq(338); // Eddard Stark
await apiReq(529); // Jamie Lannister
})()页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65774324
复制相关文章
相似问题
腾讯云开发者
