Come promuovo XHR nativo?

Voglio usare le promesse (native) nella mia app frontend per eseguire la richiesta XHR, ma senza tutta la confusione di un framework enorme.

Voglio che il mio XHR per restituire una promessa, ma questo non funziona (dandomi: Uncaught TypeError: Promise resolver undefined is not a function)

function makeXHRRequest (method, url, done) {
  var xhr = new XMLHttpRequest();
  xhr.open(method, url);
  xhr.onload = function() { return new Promise().resolve(); };
  xhr.onerror = function() { return new Promise().reject(); };
  xhr.send();
}

makeXHRRequest('GET', 'http://example.com')
.then(function (datums) {
  console.log(datums);
});

Suppongo che tu sappia come effettuare una richiesta XHR nativa (puoi ripassare qui e qui )

Dal momento che qualsiasi browser che supporta le promesse native supporterà anche xhr.onload, possiamo saltare tutti i onReadyStateChangebuffonati. Facciamo un passo indietro e iniziamo con una funzione di richiesta XHR di base utilizzando i callback:

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();
}

// And we'd call it as such:

makeRequest('GET', 'http://example.com', function (err, datums) {
  if (err) { throw err; }
  console.log(datums);
});

Evviva! Ciò non comporta nulla di terribilmente complicato (come intestazioni personalizzate o dati POST) ma è sufficiente per farci avanzare.

Il costruttore della promessa

Possiamo costruire una promessa in questo modo:

new Promise(function (resolve, reject) {
  // Do some Async stuff
  // call resolve if it succeeded
  // reject if it failed
});

Il costruttore promessa assume una funzione a cui verranno passati due argomenti (chiamiamoli resolvee reject). Puoi pensarli come callback, uno per il successo e uno per il fallimento. Gli esempi sono fantastici, aggiorniamo makeRequestcon questo costruttore:

function makeRequest (method, url) {
  return new Promise(function (resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.onload = function () {
      if (this.status >= 200 && this.status < 300) {
        resolve(xhr.response);
      } else {
        reject({
          status: this.status,
          statusText: xhr.statusText
        });
      }
    };
    xhr.onerror = function () {
      reject({
        status: this.status,
        statusText: xhr.statusText
      });
    };
    xhr.send();
  });
}

// Example:

makeRequest('GET', 'http://example.com')
.then(function (datums) {
  console.log(datums);
})
.catch(function (err) {
  console.error('Augh, there was an error!', err.statusText);
});

Ora possiamo attingere al potere delle promesse, concatenando più chiamate XHR (e .catchsi innescherà un errore su entrambe le chiamate):

makeRequest('GET', 'http://example.com')
.then(function (datums) {
  return makeRequest('GET', datums.url);
})
.then(function (moreDatums) {
  console.log(moreDatums);
})
.catch(function (err) {
  console.error('Augh, there was an error!', err.statusText);
});

Possiamo migliorarlo ulteriormente, aggiungendo sia parametri POST / PUT sia intestazioni personalizzate. Usiamo un oggetto opzioni invece di più argomenti, con la firma:

{
  method: String,
  url: String,
  params: String | Object,
  headers: Object
}

makeRequest ora sembra qualcosa del genere:

function makeRequest (opts) {
  return new Promise(function (resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open(opts.method, opts.url);
    xhr.onload = function () {
      if (this.status >= 200 && this.status < 300) {
        resolve(xhr.response);
      } else {
        reject({
          status: this.status,
          statusText: xhr.statusText
        });
      }
    };
    xhr.onerror = function () {
      reject({
        status: this.status,
        statusText: xhr.statusText
      });
    };
    if (opts.headers) {
      Object.keys(opts.headers).forEach(function (key) {
        xhr.setRequestHeader(key, opts.headers[key]);
      });
    }
    var params = opts.params;
    // We'll need to stringify if we've been given an object
    // If we have a string, this is skipped.
    if (params && typeof params === 'object') {
      params = Object.keys(params).map(function (key) {
        return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]);
      }).join('&');
    }
    xhr.send(params);
  });
}

// Headers and params are optional
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);
});

Un approccio più completo è disponibile presso MDN .

In alternativa, è possibile utilizzare l' API di recupero ( polyfill ).

Questo potrebbe essere semplice come il seguente codice.

Tieni presente che questo codice genererà il rejectcallback solo quando onerrorviene chiamato ( solo errori di rete ) e non quando il codice di stato HTTP indica un errore. Ciò escluderà anche tutte le altre eccezioni. Gestirli dovrebbe essere compito tuo, IMO.

Inoltre, si consiglia di chiamare il rejectcallback con un'istanza Errore non l'evento stesso, ma per semplicità, ho lasciato così com'è.

function request(method, url) {
    return new Promise(function (resolve, reject) {
        var xhr = new XMLHttpRequest();
        xhr.open(method, url);
        xhr.onload = resolve;
        xhr.onerror = reject;
        xhr.send();
    });
}

E invocare potrebbe essere questo:

request('GET', 'http://google.com')
    .then(function (e) {
        console.log(e.target.response);
    }, function (e) {
        // handle errors
    });

Per chiunque lo cerchi ora, è possibile utilizzare la funzione di recupero . Ha un buon supporto .

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));

In primo luogo ho usato la risposta di @ SomeKittens, ma poi ho scoperto fetchche lo fa per me fuori dalla scatola :)

Penso che possiamo rendere la risposta migliore molto più flessibile e riutilizzabile non facendola creare l' XMLHttpRequestoggetto. L'unico vantaggio di farlo è che non dobbiamo scrivere noi stessi 2 o 3 righe di codice per farlo, e ha l'enorme svantaggio di togliere il nostro accesso a molte funzionalità dell'API, come l'impostazione delle intestazioni. Nasconde anche le proprietà dell'oggetto originale dal codice che dovrebbe gestire la risposta (sia per successi che per errori). Quindi possiamo rendere una funzione più flessibile e maggiormente applicabile semplicemente accettando l' XMLHttpRequestoggetto come input e passandolo come risultato .

Questa funzione converte un XMLHttpRequestoggetto arbitrario in una promessa, trattando i codici di stato non 200 come un errore per impostazione predefinita:

function promiseResponse(xhr, failNon2xx = true) {
    return new Promise(function (resolve, reject) {
        // Note that when we call reject, we pass an object
        // with the request as a property. This makes it easy for
        // catch blocks to distinguish errors arising here
        // from errors arising elsewhere. Suggestions on a 
        // cleaner way to allow that are welcome.
        xhr.onload = function () {
            if (failNon2xx && (xhr.status < 200 || xhr.status >= 300)) {
                reject({request: xhr});
            } else {
                resolve(xhr);
            }
        };
        xhr.onerror = function () {
            reject({request: xhr});
        };
        xhr.send();
    });
}

Questa funzione si adatta in modo molto naturale a una catena di Promises, senza sacrificare la flessibilità XMLHttpRequestdell'API:

Promise.resolve()
.then(function() {
    // We make this a separate function to avoid
    // polluting the calling scope.
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://stackoverflow.com/');
    return xhr;
})
.then(promiseResponse)
.then(function(request) {
    console.log('Success');
    console.log(request.status + ' ' + request.statusText);
});

catchè stato omesso sopra per semplificare il codice di esempio. Dovresti sempre averne uno e ovviamente possiamo:

Promise.resolve()
.then(function() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://stackoverflow.com/doesnotexist');
    return xhr;
})
.then(promiseResponse)
.catch(function(err) {
    console.log('Error');
    if (err.hasOwnProperty('request')) {
        console.error(err.request.status + ' ' + err.request.statusText);
    }
    else {
        console.error(err);
    }
});

E disabilitare la gestione del codice di stato HTTP non richiede molte modifiche nel codice:

Promise.resolve()
.then(function() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://stackoverflow.com/doesnotexist');
    return xhr;
})
.then(function(xhr) { return promiseResponse(xhr, false); })
.then(function(request) {
    console.log('Done');
    console.log(request.status + ' ' + request.statusText);
});

Il nostro codice chiamante è più lungo, ma concettualmente è ancora semplice capire cosa sta succedendo. E non dobbiamo ricostruire l'intera API di richiesta Web solo per supportare le sue funzionalità.

Possiamo aggiungere alcune funzioni utili per riordinare anche il nostro codice:

function makeSimpleGet(url) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    return xhr;
}

function promiseResponseAnyCode(xhr) {
    return promiseResponse(xhr, false);
}

Quindi il nostro codice diventa:

Promise.resolve(makeSimpleGet('https://stackoverflow.com/doesnotexist'))
.then(promiseResponseAnyCode)
.then(function(request) {
    console.log('Done');
    console.log(request.status + ' ' + request.statusText);
});

La risposta di jpmc26 è abbastanza vicina alla perfezione secondo me. Ha alcuni inconvenienti, tuttavia:

1. Espone la richiesta xhr solo fino all'ultimo momento. Ciò non consente a POST-quests di impostare il corpo della richiesta.
2. È più difficile da leggere poiché la sendchiamata cruciale è nascosta all'interno di una funzione.
3. Introduce un bel po 'di boilerplate quando si effettua effettivamente la richiesta.

La scimmia che rattoppa l'oggetto xhr affronta questi problemi:

function promisify(xhr, failNon2xx=true) {
    const oldSend = xhr.send;
    xhr.send = function() {
        const xhrArguments = arguments;
        return new Promise(function (resolve, reject) {
            // Note that when we call reject, we pass an object
            // with the request as a property. This makes it easy for
            // catch blocks to distinguish errors arising here
            // from errors arising elsewhere. Suggestions on a 
            // cleaner way to allow that are welcome.
            xhr.onload = function () {
                if (failNon2xx && (xhr.status < 200 || xhr.status >= 300)) {
                    reject({request: xhr});
                } else {
                    resolve(xhr);
                }
            };
            xhr.onerror = function () {
                reject({request: xhr});
            };
            oldSend.apply(xhr, xhrArguments);
        });
    }
}

Ora l'utilizzo è semplice come:

let xhr = new XMLHttpRequest()
promisify(xhr);
xhr.open('POST', 'url')
xhr.setRequestHeader('Some-Header', 'Some-Value')

xhr.send(resource).
    then(() => alert('All done.'),
         () => alert('An error occured.'));

Naturalmente, questo introduce un diverso svantaggio: l'applicazione di patch sulle scimmie compromette le prestazioni. Tuttavia, ciò non dovrebbe costituire un problema presupponendo che l'utente stia aspettando principalmente il risultato di xhr, che la richiesta stessa richieda ordini di grandezza più lunghi rispetto all'impostazione della chiamata e che le richieste xhr non vengano inviate frequentemente.

PS: E ovviamente se scegli come target i browser moderni, usa fetch!

PPS: nei commenti è stato sottolineato che questo metodo modifica l'API standard che può creare confusione. Per maggiore chiarezza si potrebbe applicare un metodo diverso all'oggetto xhr sendAndGetPromise().