Ajax JSONP feuert Erfolg Funktion trotz der Rückgabe 404 & 422

Question

Ich habe ein Programm Informationen über bestimmte Twitch Streamer Anzeige mit ihrem Namen in einem Array befindet (Ja, es ist von FreeCodeCamp) und habe mit einem kleinen Problem stecken geblieben:

Ich habe und $ .ajax which could catch a failure thanks to the ajax timeout.

Lustig ist in diesem Beispiel Ajax nicht nur nicht den Fehler-Funktion nicht ausgelöst, aber es scheint ein Erfolg zu geben, was zu Fehlern und mir dies in der Konsole bekommen:

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

)

GET https://api.twitch.tv/kraken/channels/comster404 404 (nicht gefunden)

Hier die jquery für das Projekt verwendet wird:

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 Sie können den Code-Code selbst finden. Ich hoffe, dass alles gut genug kommentiert wird, um verstanden zu werden

Was verursacht das Problem und wie könnte ich es beheben? Jede Hilfe wäre großartig.

Answer 1

Dies sollten Sie die Herausforderung helfen Adresse, die Sie konfrontiert sind, um Ihre beabsichtigte Ziel zu erreichen:

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