Promise отвергаются преждевременно несколько раз, прежде чем разрешения

Question

Я делаю вызов к API, а затем пытаюсь сделать диаграмму возвращаемых данных:

function getFromAPI(url) { 
    return new Promise((resolve, reject) => { 
     let xhr = new XMLHttpRequest(); 
     xhr.onreadystatechange =() => { 
      if (xhr.readyState == 4 && xhr.status == 200) { 
       console.log("Resolving!"); 
       jsonData = JSON.parse(xhr.responseText); 
       resolve(jsonData); 
      } else { 
       console.log("Rejecting!"); 
       reject(); 
      } 
     } 
     xhr.open("GET", url, true); 
     xhr.send(); 
    }); 
} 

getFromAPI(API_URL).then((jsonData) => { drawChart(jsonData) }); 

Когда я загружаю этот сценарий я Rejecting! три раза консоль до ее разрешения. reject не нарушая также .then части (т.е. нет графика для меня!)

Я принимайте это onreadstatechange события стреляет несколько раз, прежде чем мы доберемся до readyState == 4 и status == 200. Что именно происходит, и как я могу избежать преждевременного отказа от обещания?

Answer 1

onreadystatechange - это обработчик событий, который срабатывает всякий раз, когда изменяется xhr readyState.

0 UNSENT Client has been created. open() not called yet. 
1 OPENED open() has been called. 
2 HEADERS_RECEIVED send() has been called, and headers and status are available. 
3 LOADING Downloading; responseText holds partial data. 
4 DONE The operation is complete. 

Как вы можете видеть, есть 4 состояния «не готовы», а одно «сделано». Это учитывает консольный журнал отклонения и разрешения, которые вы видите.

Когда запрос «сделано», отклонить или разрешить запрос в соответствии со статусом:

xhr.onreadystatechange =() => { 
    if (xhr.readyState !== 4) { 
    return; 
    } 

    if (xhr.status === 200) { 
    console.log("Resolving!"); 
    jsonData = JSON.parse(xhr.responseText); 
    resolve(jsonData); 
    return; 
    } 

    console.log("Rejecting!"); 
    reject(); 
}