JavaScriptのHTTPリクエストが失敗しました

Question

誰かが下のコードを見て、私が間違っていることを理解するのに役立つでしょうか？私はこのエラーに

エラーXMLHttpRequestを取得しています{のreadyState：1、タイムアウト：0、withCredentials： 偽、アップロード：XMLHttpRequestUpload、responseURL： "" ...}

私が作るしようとしています画像をフェッチするNASAの画像galaryへの要求..

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

あなたelse文は、Ajaxリクエストがこれらの異なる状態

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 

を通して行く

これらの状態が変化するようreadyStateイベントは、私たちが見て確認してください理由である、発火する間違った場所にあります要求が完了し、返されたデータがあるとき、第4の状態がコールバックをトリガーする状態であることを示します。

あなたは本当に4以外1に発火するelseステートメント、またはいずれかの状態を使用しているが、1は最初のreadyStateのある、要求が最初に設定されている場合、あなたはそれが第四のreadyState

に到達するまで待たなければなりません

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