Maison >interface Web >js tutoriel >Comment promettre des requêtes XHR natives à l'aide de JavaScript ?
Dans le développement frontend moderne, les promesses sont devenues un outil essentiel pour gérer les opérations asynchrones. Bien que de nombreux frameworks fournissent des mécanismes intégrés de promesse, il est également possible d'obtenir cette fonctionnalité avec du code natif. Ce guide montre comment transformer les requêtes XHR natives (XMLHttpRequest) en promesses.
Commencez par créer une fonction de requête XHR de base qui utilise des rappels :
function makeRequest(method, url, done) { var xhr = new XMLHttpRequest(); xhr.open(method, url); xhr.onload = function () { done(null, xhr.response); }; xhr.onerror = function () { done(xhr.response); }; xhr.send(); }
Pour transformer cette fonction dans une version promise, exploitez le constructeur de promesse :
function makeRequest(method, url) { return new Promise(function (resolve, reject) { var xhr = new XMLHttpRequest(); xhr.open(method, url); xhr.onload = function () { if (xhr.status >= 200 && xhr.status < 300) { resolve(xhr.response); } else { reject({ status: xhr.status, statusText: xhr.statusText }); } }; xhr.onerror = function () { reject({ status: xhr.status, statusText: xhr.statusText }); }; xhr.send(); }); }
Pour améliorer la flexibilité de la fonction de requête, introduisez des paramètres pour la méthode, l'URL , et un objet options optionnel :
function makeRequest(opts) { return new Promise(function (resolve, reject) { var xhr = new XMLHttpRequest(); xhr.open(opts.method, opts.url); xhr.onload = function () { if (xhr.status >= 200 && xhr.status < 300) { resolve(xhr.response); } else { reject({ status: xhr.status, statusText: xhr.statusText }); } }; xhr.onerror = function () { reject({ status: xhr.status, statusText: xhr.statusText }); }; if (opts.headers) { Object.keys(opts.headers).forEach(function (key) { xhr.setRequestHeader(key, opts.headers[key]); }); } var params = opts.params; if (params && typeof params === 'object') { params = Object.keys(params).map(function (key) { return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]); }).join('&'); } xhr.send(params); }); }
Avec la fonction makeRequest promise, Les XHR peuvent être exécutés de manière transparente en tant qu'opérations asynchrones :
makeRequest({ method: 'GET', url: 'http://example.com' }) .then(function (datums) { return makeRequest({ method: 'POST', url: datums.url, params: { score: 9001 }, headers: { 'X-Subliminal-Message': 'Upvote-this-answer' } }); }) .catch(function (err) { console.error('Augh, there was an error!', err.statusText); });
Une alternative à la promesse consiste à utiliser l'API fetch, qui fournit une prise en charge intégrée des promesses. Cependant, gardez à l'esprit que la récupération peut ne pas être prise en charge dans tous les navigateurs et peut nécessiter un polyfill.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!