在解決之前，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();
}