Estoy creando una aplicación web principalmente del lado del cliente usando una API de juego para mostrar estadísticas e inventario. Esta aplicación necesita hacer algunas solicitudes de obtención tras otra y estoy tratando de pensar en una función simple que pueda manejar varias solicitudes diferentes y siempre devuelva la respuesta, mientras espera que finalice la solicitud anterior.
Mi función actual no espera a que finalice la solicitud, por lo que $temp aún no está definido.
function BClick(){ rqURL = 'https://endpoint'; temp = getRequest(rqURL); console.log(temp); } function getRequest(URL) { akey = '000'; var xr = new XMLHttpRequest(); xr.open("GET", URL); xr.setRequestHeader("X-API-Key",akey); xr.onreadystatechange = () => { if (xr.readyState === 4) { xh = JSON.parse(xr.responseText); return xh; } }; xr.send(); }¿Cómo puedo hacer todo esto asíncrono y esperar a que termine la respuesta? Intenté buscar en 'función asíncrona () {}' pero esto necesita que coloque la solicitud de obtención en la primera función. lo que eliminaría la reutilización porque necesito manejar las respuestas de manera diferente.
Actualmente estoy pensando en una función que se ejecuta cuando una variable específica obtiene datos, por lo que solo tendría cuidado con cada una de las variables de respuesta. Seguramente hay una manera 'mejor', que no conozco.
Puede usar devoluciones de llamada o promesas simples.
con promesas
function getRequest(URL, akey) { return new Promise((resolve, reject) => { const request = new XMLHttpRequest(); request.open('GET', URL); request.setRequestHeader('X-Api-Key', akey); request.onload = () => { if (request.status === 200) { resolve(request.response); } else { reject(Error(request.statusText)); } }; request.onerror = () => { reject(Error('Network Error')); }; request.send(); }); } // Use with 'then' chain getRequest('url', '000').then(function(responseData) { // parse data here if necessary console.log(responseData); }).catch(function(error) { // handle error console.log(error); });Sin embargo, la API de búsqueda del navegador ya tiene esta funcionalidad, por lo que puede usarla en su lugar.
con devoluciones de llamada
function getRequest(URL, akey, successCallback, failCallback) { const request = new XMLHttpRequest(); request.open('GET', URL); request.setRequestHeader('X-Api-Key', akey); request.onload = () => { if (request.status === 200) { successCallback(request.response); } else { failCallback(Error(request.statusText)); } }; request.onerror = () => { failCallback(Error('Network Error')); }; request.send(); } // usage getRequest( 'url', '000', function (responseData) { // use data console.log(responseData); }, function (error) { // handle error console.log(error); }, );Estos son específicos para tu caso pero puedes pasar más parámetros y mejorarlos según necesidades.