Javascript 在解决问题之前，承诺被提前拒绝多次

我正在调用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) });

当我加载该脚本时，我得到

拒绝三次。
拒绝
也破坏了
。然后
部分（即我没有图表！）

我认为
onreadstatechange
事件在我们到达
readyState==4
和
status==200
之前触发了几次。到底发生了什么？如何避免过早拒绝承诺？
是一个事件处理程序，每当xhr更改时都会触发

如您所见，有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();
}

是一个事件处理程序，每当xhr发生更改时都会触发

如您所见，有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();
}

因为有readyState的1,2和3因为有readyState的1,2和3我知道，显然，我不应该在
else
块中
拒绝
——但是
拒绝
的最佳实践位置在哪里？如果响应代码不是您期望的。我已经修复并更新了代码，以便在请求完成后检查状态代码，并相应地拒绝/解决。我明白了，显然，我不应该在
else
块中
拒绝
——但是
拒绝
的最佳实践位置在哪里？如果响应代码不是您期望的。我已经修复并更新了代码，以便在请求完成后检查状态代码，并相应地拒绝/解决。