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檢查修復它。