Javascript 从RESTAPI调用解析JSON响应

我对使用API很陌生

我试图把回复文本和排序信息从它到一张卡片的不同区域。我不是要一个快速的答案，而是要一些文档，我可以通过这些文档来获得完整的理解

var stat=document.getElementById（'infoboxName'）；
var promise1=新承诺（功能（解决、拒绝）{
setTimeout（函数（）{
var xhr=new XMLHttpRequest（），
method=“GET”，
url=”https://www.anapioficeandfire.com/api/characters/124";
open（方法、url、true）；
xhr.onreadystatechange=函数（）{
如果（xhr.readyState==4&&xhr.status==200）{
console.log（xhr.responseText）；
stat.innerHTML=xhr.responseText；
决议（“决议”）；
}
};
xhr.send（）；
}, 300);
});
承诺1.然后（功能（价值）{
console.log（值）；
});
您真正想要做的是解析该响应，为此您可以使用
JSON.parse
将JSON字符串转换为JS对象

解析该JSON字符串后，您可以使用特定属性访问数据，如
name
和
gender

另一方面，我认为您根本不需要设置超时

本例解析JSON字符串并获取
名称
和
性别
，同样通过函数
resolve
我将解析后的JSON字符串作为JS对象传递


var namelement=document.getElementById（'name'）；
var genderElement=document.getElementById（'gender'）；
var promise1=新承诺（功能（解决、拒绝）{
var xhr=new XMLHttpRequest（），
method=“GET”，
url=”https://www.anapioficeandfire.com/api/characters/124";
open（方法、url、true）；
xhr.onreadystatechange=函数（）{
如果（xhr.readyState==4&&xhr.status==200）{
解析（JSON.parse（xhr.responseText））；
}
};
xhr.send（）；
});
承诺1.然后（功能（价值）{
namelement.textContent=value.name；
genderElement.textContent=value.gender；
});


熟悉
XMLHttpRequest
是件好事，但为了简单起见，最好从更简单的语法开始：

var stat = document.getElementById('infoboxName');
var apiResponse = await fetch("https://www.anapioficeandfire.com/api/characters/124");
var jsonParsedContents = await apiResponse.json(); // This is also a promise so must also wait for it

console.log(jsonParsedContents); // Do whatever you need with the object

如果由于某种原因，您无法使用
fetch
，并且必须坚持使用
XMLHttpRequest
，那么您要更改的是调用
resolve
时传递的值：

var stat = document.getElementById('infoboxName');
var promise1 = new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest(),
        method = "GET",
        url = "https://www.anapioficeandfire.com/api/characters/124";

    xhr.open(method, url, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            resolve(JSON.parse(xhr.responseText));
        }
    };
    xhr.send();
});

promise1.then(function(result) {
    console.log(result);
    // In here you'll probably want to stat.innerHTML = <some part of result>
});

var stat=document.getElementById（'infoboxName'）；
var promise1=新承诺（功能（解决、拒绝）{
var xhr=new XMLHttpRequest（），
method=“GET”，
url=”https://www.anapioficeandfire.com/api/characters/124";
open（方法、url、true）；
xhr.onreadystatechange=函数（）{
如果（xhr.readyState==4&&xhr.status==200）{
解析（JSON.parse（xhr.responseText））；
}
};
xhr.send（）；
});
承诺1.然后（功能（结果）{
控制台日志（结果）；
//在这里，您可能需要stat.innerHTML=
});

在上面的代码中，我还假设您希望在发送API请求的不同代码段中处理承诺，但如果不是，那么你也不需要它，只需对
if
中的响应执行你需要的操作，你到底想排序什么？请粘贴响应输出，这样我们就知道我们正在处理什么。嘿，Darren，听起来你真正想做的是解析数据…而不是排序。你事先知道信息的结构吗？它是否知道“部分”？是否有任何特殊原因需要在超时时间内触发该请求？如果没有，它只是无缘无故地暂停300毫秒，因此只需在
setTimeout
中取出函数内部的内容并将其移出（并删除对
setTimeout
的调用）。您不太清楚要对结果做什么，但回调函数中的
值
参数（
then
）底部是作为参数发送到上面的
resolve
调用的内容。它将在正确的时间调用，但到那时，您将只记录“resolve”。如果要使用实际结果，请使用上面的
resolve（xhr.responseText）
；这正是我需要的。非常感谢你的帮助。