在解决之前，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! 在控制台中解决3次后再解决。 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();
}