JavaScript HTTP 请求失败

Question

任何人都可以看看下面的代码帮助我弄清楚我做错了什么吗？我收到这个错误

error XMLHttpRequest {readyState: 1, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, responseURL: ""…}

当我试图向 NASA image 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 事件将在这些状态发生变化时触发，这就是为什么我们检查第四个状态是触发回调的状态，当请求完成时，我们有返回的数据.

你正在使用一个 else 语句，它将在 1 或除 4 之外的任何状态上触发，但 1 是第一个 readyState，第一次建立request时，要等到第四个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