Question

我有一个程序显示某些Twitch拖缆的信息，它们的名字位于一个数组中（是的，来自FreeCodeCamp）并且遇到了一个小问题：

我有$ .ajax which could catch a failure thanks to the ajax timeout。

有趣的是，在这个例子中，ajax不仅不会触发错误功能，而且似乎成功，导致错误，我在控制台中得到这个：

获取https://api.twitch.tv/kraken/channels/brunofin 422（不可处理的实体）

获取https://api.twitch.tv/kraken/channels/comster404 404（未找到）

以下是项目使用的jquery：

var channels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas", "brunofin", "comster404"];

$(document).ready(function() {
    appendStreams(0);
});

function appendStreams(arg) {
    //arg == 0 - all streams
    //arg == 1 - only online
    //arg == 2 - only offline
    var sLogo, sName, sLink, sGame; //base table values, used later to append everything
    var toAppend = false; //a greenlight variable telling when is it ok to append a div
    var success; //a greenlight variable informing about 404 for jsonp
    $("#channels *").remove(); //Each call should empty all the slots

    channels.forEach(function(value) {
        success = false;
        $.ajax({
            url: 'https://api.twitch.tv/kraken/streams/' + value + '?callback=?',
            type: "GET",
            dataType: 'jsonp',
            timeout: 5000,
            success: function(data) {
                console.log("success for " + value);
                if (data.stream != null && (arg == 0 || arg == 1)) {
                    //capture data only of players who are now streaming
                    sLogo = data.stream.channel.logo;
                    sName = data.stream.channel.display_name;
                    sGame = data.stream.game;
                    sLink = data.stream.channel.url;
                    toAppend = true;
                } else if (data.stream == null && (arg == 0 || arg == 2)) {

                    //due to the lack of data comming from offline streams, a second json call has to be made, to the channel parts of the api
                    //A non async should be used to retain the data
                    $.ajax({
                        async: false,
                        url: "https://api.twitch.tv/kraken/channels/" + value,
                        dataType: 'json',
                        success: function(data2) {
                            sGame = "Offline";
                            sLogo = data2.logo;
                            sName = data2.display_name;
                            sLink = data2.url;
                        }
                    });
                    toAppend = true;
                }
                if (toAppend) {
                    $("#channels").append('<tr><td><img src="' + sLogo + '" alt="channel logo" height="100px"/></td><td><a href="' + sLink + '">' + sName + '</a></td><td>' + sGame + '</td></tr>');
                }
                toAppend = 0; //reset toAppend
            },
            error: function() {
                console.log(value + "has failed");
            }
        });

    }); //forEach end     
}

AND HERE您可以找到自己的代码。我希望所有内容都得到充分评论，以便理解

导致问题的原因是什么？我该如何解决？任何帮助都会很棒。

Answer 1

这可以帮助您解决您所面临的挑战，以实现您的预期目标：

<script>
    var host = 'https://api.twitch.tv/kraken/channels/',
        channels = [
            "ESL_SC2",
            "OgamingSC2",
            "cretetion",
            "freecodecamp",
            "storbeck",
            "habathcx",
            "RobotCaleb",
            "noobs2ninjas",
            "brunofin",
            "comster404"
        ];

    channels.forEach(function(channel) {

        console.log(channel);

        $.ajax({
            type: 'GET',
            url: host + channel,
            contentType: 'application/json',
            xhrFields: {
                withCredentials: false
            },
            headers: {
            },
            success: function(data) {
                console.log(data);
                console.log('Logo: ' + data.logo);
                console.log('Display name: ' + data.display_name);
                console.log('Game: ' + data.game);
                console.log('URL: ' + data.url);
            },
            error: function(data) {
                // Not Found (404)
                if (data.readyState == 4 && data.status == 404) {
                    console.log(data);
                    console.log('Error: ' + data.responseJSON['error']);
                    console.log('Status: ' + data.responseJSON['status']);
                    console.log('Message: ' + data.responseJSON['message']);
                }
                // Unprocessable Entity (422)
                if (data.readyState == 4 && data.status == 422) {
                    console.log(data);
                    console.log('Error: ' + data.responseJSON['error']);
                    console.log('Status: ' + data.responseJSON['status']);
                    console.log('Message: ' + data.responseJSON['message']);
                }
            }
        });
    });
</script>

尽管Ajax JSONP返回404＆amp; 422

1 个答案: