使用来自多个抓取 API 请求的变量

我是使用Fetch API的新手，刚刚开始理解Promises。所以我问的可能太天真了。

我正在使用令牌获取事件终结点，获取包括团队 ID 在内的事件详细信息，然后使用这些团队 ID 获取另一个终结点。最后，我将循环浏览每个事件并打印事件详细信息和团队名称。这工作正常，但在最后一步中，我的最后一个变量是未定义的。

在下面的代码中，我得到：

"引用错误：未定义主团队">

"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>

你需要按照@Travnikov所说html +=.....行移动到最后的.then，还有一点是，与其在 for 循环中使用var i，不如按照@Piyush的建议使用let i，你应该学习 javascript 中的范围和行为。

所以你的最终代码如下，

<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)
//using 'let i' instead of 'var i'
for (let 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
//Here html concatination is happenning
html += '<tr><td>' + i + '</td><td>' + 'HomeTeam: ' + homeTeam + ' AwayTeam: ' + awayTeam, + '</td><td>'  + 'Start: ' + varStart + ' End: ' + varEnd + '</td></tr>';
$("#content").append(html);
})
// no need this line
//html += '<tr><td>' + i + '</td><td>' + 'HomeTeam: ' + homeTeam + ' AwayTeam: ' + awayTeam, + '</td><td>'  + 'Start: ' + varStart + ' End: ' + varEnd + '</td></tr>';
}
})
})
</script> 
</head>
<body>
<div id='content'> </div>
</body>
</html>

相关内容

最新更新

热门标签：