使用纯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;