【发布时间】：2020-04-15 07:35:27
【问题描述】：
我是使用 Fetch API 的新手，刚刚开始了解 Promises。所以我问的可能太天真了。
我正在使用令牌获取事件端点，获取包括团队 ID 在内的事件详细信息，然后使用这些团队 ID 获取另一个端点。最后，我遍历每个事件并打印事件详细信息和团队名称。这工作正常，但在最后一步，我的最后一个变量是未定义的。
在以下代码中，我收到“参考错误：未定义 homeTeam”，并且“varStart”和“varEnd”也不起作用。从所有的搜索中，我相信它与承诺的层次结构有关，但我可以弄清楚。 我真的很感激任何指示。 我的代码是：
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
var html = '<tr><td colspan=3 class=superBold> </td></tr>';
var params = {
grant_type: 'client_credentials',
client_id: 'xxxx',
client_secret: 'xxxx'
}
fetch('token_url', {
method: 'POST',
body: JSON.stringify(params),
headers: {
'Content-Type': 'application/json'
}
}).then(function(response){
return response.json()
}).then(function(token_data){
return fetch('event_url', {
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer' + ' ' + token_data.access_token,
}
}).then(function(event_response){
return event_response.json()
}).then(function(event_data){
var len = event_data.data.length
console.log(event_data)
for (var i = 0; i < len; i++){
var varStart = event_data.data[i].attributes.start.substr(11, 5);
var varEnd = event_data.data[i].attributes.end.substr(11, 5);
var hteam_id = event_data.data[i].attributes.hteam_id;
var vteam_id = event_data.data[i].attributes.vteam_id;
let a = fetch('team_url' + hteam_id, {
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer' + ' ' + token_data.access_token,
}
})
let b = fetch('team_url' + vteam_id, {
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer' + ' ' + token_data.access_token,
}
})
Promise.all([a,b])
.then(values => Promise.all(values.map(value => value.json())))
.then(function(team_data){
let homeTeamResp = team_data[0];
let awayTeamResp = team_data[1];
var homeTeam = homeTeamResp.data[0].attributes.name
let awayTeam = awayTeamResp.data[0].attributes.name
})
html += '<tr><td>' + i + '</td><td>' + 'HomeTeam: ' + homeTeam + ' AwayTeam: ' + awayTeam, + '</td><td>' + 'Start: ' + varStart + ' End: ' + varEnd + '</td></tr>';
}
$("#content").append(html);
})
})
</script>
</head>
<body>
<div id='content'> </div>
</body>
</html>
【问题讨论】：
-
问题在于变量的范围，因为您使用 var 关键字声明它们，请在此处阅读有关变量范围的信息：medium.com/javascript-in-plain-english/…
-
是的，他是对的。只需将您的
html +=移动到.then(function(team_data){块 -
@Piyush：感谢您的参考。这非常有用。
-
@Travnikov：这是问题的一部分，现在我按照 Ejaz47 的建议将它移到了适当的块中
标签： javascript json api promise fetch