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 is an event handler that is fired whenever the 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 个 "not ready" 状态和一个 "done" 状态。这说明了您看到的 reject 和 resolve 的控制台日志。

当请求为"done"时，根据状态拒绝或解决请求：

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();
}

Promise 在解决之前被过早拒绝多次

Promise is rejected prematurely multiple times before resolving

javascript

es6-promise