JavaScript HTTP-Anfrage fehlgeschlagen

Question

Könnte jemand einen Blick auf den unten stehenden Code werfen, um mir zu helfen herauszufinden, was ich falsch mache? Ich erhalte diese Störung

Fehler XMLHttpRequest {Readystate: 1, timeout: 0, withCredentials: falsch, Upload: XMLHttpRequestUpload, responseURL: "" ...}

wenn ich versuche, eine zu machen Anfrage an die NASA-Bild galary ein Bild zu holen ..

HTML:

<img id="map" src="" alt="image from NASA"> 

JS:

var get = function(url){ 
    return new Promise(function(resolve,reject){ 
     var xhr = new XMLHttpRequest(); 
     xhr.onreadystatechange = function(){ 
      if(xhr.readyState === 4 && xhr.status == 200){ 
       var result = xhr.responseText; 
       result = JSON.parse(result); 
       resolve(result); 
      }else { 
       reject(xhr); 
      } 
     } 
     xhr.open("GET",url,true); 
     xhr.send(null); 
    }) 
} 

get('https://api.nasa.gov/planetary/apod?api_key=NNKOjkoul8n1CH18TWA9gwngW1s1SmjESPjNoUFo' 
) 
.then(function(response){ 
    console.log("success",response); 
    document.getElementById('map').src = response.url; 
}) 
.catch(function(err){ 
    console.log('error',err) 
}) 

Answer 1

Ihre else-Anweisung an der falschen Stelle ist

Der Ajax-Request geht durch diese verschiedenen Zustände

State Description 
0  The request is not initialized 
1  The request has been set up 
2  The request has been sent 
3  The request is in process 
4  The request is complete 

Das readyState Ereignis ausgelöst wird, wie diese Zustände zu ändern, weshalb wir überprüfen, um zu sehen, dass der vierte Zustand derjenige ist, der den Rückruf auslöst, wenn die Anfrage abgeschlossen ist und wir die zurückgegebenen Daten haben.

Sie eine else-Anweisung verwenden, die wirklich auf 1 oder über Zustand außer 4 Feuer, aber 1 ist das erste Readystate, wenn die Anforderung zuerst eingerichtet wird, müssen Sie warten, bis es die vierte Readystate erreicht

var get = function(url){ 
    return new Promise(function(resolve,reject){ 
     var xhr = new XMLHttpRequest(); 
     xhr.onreadystatechange = function(){ 
      if(xhr.readyState === 4) { 
       if (xhr.status == 200) { 
        var result = xhr.responseText; 
        result = JSON.parse(result); 
        resolve(result); 
       }else { 
        reject(xhr); 
       } 
      } 
     } 
     xhr.open("GET",url,true); 
     xhr.send(null); 
    }) 
} 

FIDDLE