承诺是解决

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