E6 Ajax请求不工作

Question

我有一个剧本，我想从一个端点获取一些JSON数据，但我得到一个错误，这是我的脚本：

function httpGet(url) { 
    return new Promise(
     function (resolve, reject) { 
      var request = new XMLHttpRequest(); 
      request.onreadystatechange = function() { 
       if (this.status === 200) { 
        // Success 
        resolve(this.response); 
       } else { 
        // Something went wrong (404 etc.) 
        reject(new Error(this.statusText)); 
       } 
      } 
      request.onerror = function() { 
       reject(new Error(
        'XMLHttpRequest Error: '+this.statusText)); 
      }; 
      request.open('GET', url); 
      request.send(); 
     }); 
} 

var url = 'https://api.jsonPlaceholder.com'; 

httpGet(url) 
    .then(JSON.parse) 
    .then((r) => { 
    console.log(r); 
    }).catch(function(error) { 
    console.log(error); 
    }); 

然后，在控制台它抛出一个错误：

Error at XMLHttpRequest.request.onreadystatechange (app.js:11) at app.js:18 at Promise() at httpGet (app.js:2) at app.js:25

Answer 1

你不能只检查status，你必须检查readyState == 4，然后才能决定什么发生了：

function httpGet(url) { 
    return new Promise(
     function (resolve, reject) { 
      var request = new XMLHttpRequest(); 
      request.onreadystatechange = function() { 
       if (this.readyState === 4) {       // *** 
        if (this.status === 200) { 
         // Success 
         resolve(this.response); 
        } else { 
         // Something went wrong (404 etc.) 
         reject(new Error(this.statusText)); 
        } 
       }              // *** 
      } 
      request.onerror = function() { 
       reject(new Error(
        'XMLHttpRequest Error: '+this.statusText)); 
      }; 
      request.open('GET', url); 
      request.send(); 
     }); 
} 

The spec表示在请求完成之前访问this.response应该返回一个空字符串，但对于我使用Chrome v57的用户，这样做会导致您引用的错误。添加readyState检查修复它。