Ajax JSONP尽管返回404和422，但仍触发成功函数

Question

我有一个程序显示有关某些Twitch流与他们的名字位于数组的信息(是的，它来自FreeCodeCamp)，并一直坚持一个小问题:

我有和$。Ajax，由于Ajax超时，可以捕获失败。

有趣的是，在这个例子中，ajax不仅没有触发错误函数，但似乎给它一个成功，导致错误和我得到这个在控制台上:

GET https://api.twitch.tv/kraken/channels/brunofin (Unprocessable Entity)

GET https://api.twitch.tv/kraken/channels/comster404 404 (Not Found)

下面是项目使用的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在这里你可以找到代码本身。我希望所有的注释都足够好，以便理解

是什么导致了这个问题，我该如何解决它?

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>