XHR Return Response Example

XHR Return Response Example

Loading...

export function xhrRequest(url, options = {}) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); const method = options.method || 'GET'; xhr.open(method, url, true); if (options.headers) { Object.entries(options.headers).forEach(([k, v]) => { xhr.setRequestHeader(k, v); }); } xhr.onreadystatechange = function() { if (xhr.readyState === 4) { const body = xhr.responseText; const contentType = xhr.getResponseHeader('Content-Type') || ''; if (xhr.status >= 200 && xhr.status < 300) { if (contentType.includes('application/json')) { try { resolve(JSON.parse(body)); } catch (err) { // if JSON parsing fails, return raw text resolve(body); } } else { resolve(body); } } else { const err = new Error('Request failed with status ' + xhr.status); err.status = xhr.status; err.body = body; reject(err); } } }; xhr.onerror = function() { reject(new Error('Network error')); }; xhr.ontimeout = function() { reject(new Error('Request timeout')); }; xhr.timeout = options.timeout || 0; if (options.body) { xhr.send(options.body); } else { xhr.send(); } }); } import { xhrRequest } from './xhrService.js'; // firstFunction calls the second function (xhrRequest) which // performs the XHR and resolves the response inside onreadystatechange. // firstFunction returns the response as a Promise. export function firstFunctionThatNeedsData(url) { return xhrRequest(url); } // Example usage: show response in the page const output = document.getElementById('output'); firstFunctionThatNeedsData('https://jsonplaceholder.typicode.com/todos/1') .then(data => { output.textContent = typeof data === 'object' ? JSON.stringify(data, null, 2) : String(data); }) .catch(err => { output.textContent = 'Error: ' + err.message; }); Call firstFunctionThatNeedsData(url).then(...) to receive the response.