Question

我对使用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>

Answer 1

您需要将html +=.....行移至最后的.then，如@Travnikov所说，还有一点是，不要像@Piyush所建议的那样使用var i for for循环，而应该使用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>

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

1 个答案: