Estoy haciendo mi propia función ajax como jQuery y esto es lo que tengo hasta ahora
const ajax = function(options){ const defaults = { type: 'GET', url: window.location, data: {}, success: function(){}, error: function(){} }, opts = {...defaults, ...options}; const xhr = new XMLHttpRequest(); xhr.addEventListener("load", function(){ opts.success.call(this, xhr.response, xhr); }); xhr.addEventListener("error", function(){ opts.error.call(this, xhr); }); xhr.open(opts.type, opts.url); xhr.send(); }y puedo llamarlo así
ajax({ success: (data) => { console.log(data); } });Funciona. Pero quiero agregarle una promesa opcional . Así que quiero poder llamar a esta función exactamente así pero también como
ajax().then(data => { console.log(data); }).catch(error => { console.log(error); });Soy nuevo en las promesas, así que no estoy seguro de cómo modificar la función para que pueda detectar si resolver/rechazar o llamar a las devoluciones de llamada. ¿También estoy haciendo algo que se considera una mala práctica?
const ajax = function(options){ const defaults = { type: 'GET', url: window.location, data: {}, success: function(){}, error: function(){} }, opts = {...defaults, ...options}; return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.addEventListener("load", function(){ resolve(xhr.response); }); xhr.addEventListener("error", function(){ reject(xhr); }); xhr.open(opts.type, opts.url); xhr.send(); }); }