使用純XHR創建一個類似angular的API工廠

Question

嗨我正在嘗試構建一個處理所有API請求的JavaScript文件。然後使用這個文件來製作所有的XHR請求。由於XHR是異步函數，因此在執行onreadystatechange之前將返回該XHR。我嘗試了以下顯示，但它不工作可以告訴我如何實現這一目標？

var apiFactory={}; 
 
var Req = new XMLHttpRequest(); 
 
apiFactory.sendRequest=function(URL,type,params) { 
 
    Req.open("GET", "<get url>", true); 
 
    
 
    Req.send(); 
 
    return Req.onreadystatechange = function() { 
 
     if (Req.readyState == 4 && Req.status == 200) { 
 

 
      console.log(JSON.parse(Req.responseText)); 
 
      return JSON.parse(Req.responseText); 
 
     } 
 
    }; 
 

 
}; 
 

 
module.exports=apiFactory;

Answer 1

您可以使用ES6承諾：

var apiFactory={}; 
 

 
apiFactory.sendRequest=function(URL,type,params) { 
 
    return new Promise(function(resolve, reject) { 
 
    var Req = new XMLHttpRequest(); 
 
    Req.open("GET", URL, true); 
 
    
 
    Req.send(); 
 
    return Req.onreadystatechange = function() { 
 
     if (Req.readyState == 4 && Req.status == 200) { 
 

 
      console.log(JSON.parse(Req.responseText)); 
 
      resolve(JSON.parse(Req.responseText)); 
 
     } 
 
    }; 
 

 
    }); 
 
    
 

 
}; 
 

 
apiFactory.sendRequest('https://ghibliapi.herokuapp.com/films/58611129-2dbc-4a81-a72f-77ddfc1b1b49').then((res)=>{ 
 
    console.log('result:',res) 
 
}) 
 

 

 
//module.exports=apiFactory;