Comprensione dell'API di recupero

Ti interessa imparare JavaScript? Ottieni il mio ebook gratuito su jshandbook.com

Da quando IE5 è stato rilasciato nel 1998, abbiamo avuto la possibilità di effettuare chiamate di rete asincrone nel browser utilizzando XMLHttpRequest (XHR).

Pochi anni dopo, Gmail e altre ricche app ne hanno fatto un uso intenso e hanno reso l'approccio così popolare che doveva avere un nome: AJAX.

Lavorare direttamente con XMLHttpRequest è sempre stato un problema, ed è stato quasi sempre sottratto da alcune librerie. In particolare, jQuery ha le sue funzioni helper integrate attorno ad esso:

  • jQuery.ajax ()
  • jQuery.get ()
  • jQuery.post ()

e così via.

Hanno avuto un enorme impatto nel rendere più accessibili le chiamate asincrone. In particolare, si sono concentrati su browser meno recenti per assicurarsi che tutto funzionasse ancora.

L'API Fetch è stata standardizzata come un approccio moderno alle richieste di rete asincrone e utilizza Promises come blocco predefinito.

Fetch al momento della stesura (settembre 2017) offre un buon supporto tra i principali browser, tranne IE.

Il polyfill rilasciato da GitHub ci consente di utilizzare il recupero su qualsiasi browser.

Utilizzando Fetch

Iniziare a utilizzare Fetch per richieste GET è molto semplice:

fetch ( '/ file.json')

Lo stai già utilizzando: fetch farà una richiesta HTTP per ottenere la risorsa file.json sullo stesso dominio.

Come puoi vedere, la funzione di recupero è disponibile nell'ambito della finestra globale.

Ora rendiamolo un po 'più utile, vediamo effettivamente qual è il contenuto del file:

fetch ( 'file.json ./')
.then (response => response.json ())
.then (data => console.log (data))

Chiamare fetch () restituisce una promessa. Possiamo aspettare che la promessa si risolva passando un gestore con il metodo then () della promessa.

Quel gestore riceve il valore di ritorno della promessa di recupero, un oggetto Response.

Vedremo questo oggetto in modo più dettagliato nella prossima sezione.

Errori di cattura

Poiché fetch () restituisce una promessa, possiamo utilizzare il metodo catch della promessa per intercettare qualsiasi errore che si verifica durante l'esecuzione della richiesta e l'elaborazione viene eseguita nei callback allora:

fetch ( 'file.json ./')
.then (response => {
  // ...
}
.catch (err => console.error (err))

Oggetto di risposta

L'oggetto Response restituito da una chiamata fetch () contiene tutte le informazioni sulla richiesta e la risposta della richiesta di rete.

L'accesso alla proprietà headers sull'oggetto response offre la possibilità di esaminare le intestazioni HTTP restituite dalla richiesta:

fetch ( 'file.json ./')
.then (response => {
  console.log (response.headers.get ( 'Content-Type'))
  console.log (response.headers.get ( 'Data'))
})

stato

Questa proprietà è un numero intero che rappresenta lo stato della risposta HTTP.

  • 101, 204, 205 o 304 è uno stato null body
  • Da 200 a 299, compreso, è uno stato OK (successo)
  • 301, 302, 303, 307 o 308 è un reindirizzamento
fetch ('./ file.json') .then ((response) => {
  console.log (Response.Status)
})

statusText

statusText è una proprietà che rappresenta il messaggio di stato della risposta. Se la richiesta ha esito positivo, lo stato è OK.

fetch ( 'file.json ./')
.then (response => console.log (response.statusText))

url

url rappresenta l'URL completo della proprietà che abbiamo recuperato.

fetch ( 'file.json ./')
.then (response => console.log (response.url))

Contenuto del corpo

Una risposta ha un corpo, accessibile usando i metodi text () o json (), che restituiscono una promessa.

fetch ( 'file.json ./')
.then (response => response.text ())
.then (body => console.log (body))
fetch ( 'file.json ./')
.then (response => response.json ())
.then (body => console.log (body))

Lo stesso può essere scritto usando le funzioni asincrone ES2017:

(async () => {
  const response = await fetch ('./ file.json')
  const data = await response.json ()
  console.log (dati)
}) ()

Richiedi oggetto

L'oggetto Request rappresenta una richiesta di risorse ed è generalmente creato utilizzando la nuova API Request ().

Esempio:

const req = nuova richiesta ('/ api / todos')

L'oggetto Request offre diverse proprietà di sola lettura per ispezionare i dettagli della richiesta di risorse, incluso

  • metodo: il metodo della richiesta (GET, POST, ecc.)
  • url: l'URL della richiesta.
  • headers: l'oggetto Headers associato della richiesta
  • referrer: il referrer della richiesta
  • cache: la modalità cache della richiesta (ad esempio, impostazione predefinita, ricarica, no-cache).

Ed espone diversi metodi tra cui json (), text () e formData () per elaborare il corpo della richiesta.

L'API completa è disponibile qui.

Essere in grado di impostare l'intestazione della richiesta HTTP è essenziale e il recupero ci dà la possibilità di farlo usando l'oggetto Headers:

const headers = new Headers ()
headers.append ('Content-Type', 'application / json')

o, più semplice:

const headers = new Headers ({
  "Content-Type": "application / json"
})

Per allegare le intestazioni alla richiesta, utilizziamo l'oggetto Request e lo passiamo a fetch () invece di passare semplicemente l'URL.

Invece di:

fetch ( 'file.json ./')

noi facciamo

const request = new Request ('./ file.json', {
  headers: new Headers ({'Content-Type': 'application / json'})
})
fetch (richiesta)

L'oggetto Headers non si limita all'impostazione dei valori, ma possiamo anche interrogarlo:

headers.has ( 'Content-Type')
headers.get ( 'Content-Type')

e possiamo eliminare un'intestazione precedentemente impostata:

headers.delete ( 'X-My-Custom-Header')

Richieste POST

Fetch ti consente anche di utilizzare qualsiasi altro metodo HTTP nella tua richiesta: POST, PUT, DELETE o OPTIONS.

Specificare il metodo nella proprietà method della richiesta e passare parametri aggiuntivi nell'intestazione e nel corpo della richiesta:

Esempio di una richiesta POST:

const const = {
  metodo: "post",
  intestazioni: {
    "Tipo di contenuto": "application / x-www-form-urlencoded; charset = UTF-8"},
    body: 'foo = bar & test = 1'
}
recupero (url, opzioni)
.catch ((err) => {
  console.error ('Richiesta non riuscita', err)
})

Come annullare una richiesta di recupero

Per alcuni anni dopo l'introduzione del recupero, non è stato possibile interrompere una richiesta una volta aperta.

Ora possiamo, grazie all'introduzione di AbortController e AbortSignal, un'API generica per notificare gli eventi di interruzione

È possibile integrare questa API passando un segnale come parametro di recupero:

const controller = new AbortController ()
const signal = controller.signal
fetch ("./ file.json", {signal})

È possibile impostare un timeout che genera un evento di interruzione 5 secondi dopo l'avvio della richiesta di recupero, per annullarlo:

setTimeout (() => controller.abort (), 5 * 1000)

Convenientemente, se il recupero è già tornato, chiamare abort () non causerà alcun errore.

Quando si verifica un segnale di interruzione, il recupero rifiuta la promessa con una DOMException denominata AbortError:

fetch ('./ file.json', {signal})
.then (response => response.text ())
.then (text => console.log (text))
.catch (err => {
  if (err.name === 'AbortError') {
    console.error ('Fetch aborted')
  } altro {
    console.error ('Another error', err)
  }
})
Ti interessa imparare JavaScript? Ottieni il mio ebook gratuito su jshandbook.com