Il secondo parametro in fetch()

Quando proviamo a utilizzare fetch()la funzione in classe, tendiamo a utilizzarla per ottenere dati dall'API sul sito web.

https://reqres.in/è un sito Web che fornisce API agli sviluppatori per testare il loro codice. Gli sviluppatori possono testare diversi metodi HTTP e ottenere una risposta reale ma dati falsi (REQRES, 2023). Useremo questo sito Web per testare il nostro codice più volte.

Ad esempio, possiamo ottenere i dati falsi per conoscere il nome dell'utente da cuihttps://reqres.in/con fetch().

Se fai clic sul pulsante Test fetch() per ottenere i dati , fetch tenterà di ottenere i dati da 'https://reqres.in/api/users/2'con il metodo GET. Puoi vedere "Janet" è aggiunto di seguito.

Tuttavia, fetch non può essere utilizzato solo per recuperare i dati. Ha un secondo parametro che può permetterti di personalizzare ciò che vuoi fare con la funzione fetch.

È facoltativo , quindi puoi ignorarlo totalmente e funziona ancora per ottenere i dati, proprio come abbiamo fatto prima.

Il secondo parametro dovrebbe essere un oggetto . E all'interno di questo oggetto, puoi includere più sottoparametri, inclusi corpo, intestazione, metodo... (MDN, 2023).

C'è un esempio:

const secondParameter = {
  method : 'POST',
  body : JSON.stringify({
    "name": "morpheus",
    "job": "leader"
   }),
  };

Quindi, come lo usiamo?

In questo esempio, una volta che gli utenti fanno clic sul pulsante Test Post, la nostra app pubblicherà il nome e il lavoro dell'utente sul server. E ci sarà un timestamp sotto per dire agli utenti l'ora di creazione.

.catch((errore) =>{})

Come tutti sappiamo, la funzione fetch() restituirà a Promise Object. Tuttavia, cosa succede se il server non ha risposto e la promessa non è stata mantenuta?

Ci sarà un errore!

Quindi dobbiamo usare catch((error) => {})per rilevare l'errore per evitare arresti anomali.

Vediamo il codice di esempio.

In questo esempio, ho ricevuto "accidentalmente" il collegamento sbagliato. Quindi la promessa non sarà mantenuta e ci sarà un errore. Quindi, se gli utenti fanno clic sul pulsante Test Post, la console stamperà 'Errore!!!'.

Maggiore utilizzo dell'oggetto Response

Abbiamo discusso la situazione in cui si verifica un errore e l'oggetto promessa non viene soddisfatto. Ma se l'oggetto promessa restituito da fetch()è soddisfatto, restituirà un oggetto Response .

Esistono alcune proprietà dell'istanza (MDN, 2023):

• Risposta.ok
• Risposta.stato
• Risposta.statusTesto
• Risposta.url
• …

Ho usato Response.status, che restituisce il codice di stato HTTP, e Response.ok, che restituisce un valore booleano , possiamo vedere se il recupero ha esito positivo.

Per questo esempio, se gli utenti fanno clic sul pulsante Test Post, ci sarà il codice di stato HTTP e un valore booleano per vedere se ha esito positivo.

Interruzione di un recupero

Gli utenti possono anche interrompere un recupero utilizzando il file AbortController Object.

Dobbiamo creare un file AbortController Objectseparatamente.

let controller = new AbortController();

Quindi il nostro nuovo secondo parametro è:

const secondParameter = {
  method : 'POST',
  body : JSON.stringify({
    "name": "morpheus",
    "job": "leader"
   }),
  signal: controller.signal
  };

Ho impostato un intervallo per eseguire abort(). Quindi, quando faccio clic prima su abort e Test Post genererà un errore di errore nella console. E lo stato e il codice HTTP non verranno mostrati sotto il pulsante Test Post come abbiamo fatto prima.

Riferimento

MDN. (2023). Fetch() — API web: MDN. API web | MDN. Estratto il 31 marzo 2023 dahttps://developer.mozilla.org/en-US/docs/Web/API/fetch

REQUISITI. (2023). Un'API di riposo ospitata pronta a rispondere alle tue richieste Ajax. Richiesti. Estratto il 31 marzo 2023 dahttps://reqres.in/

MDN. (2023). Risposta — API web: MDN. API web | MDN. Estratto il 31 marzo 2023 dahttps://developer.mozilla.org/en-US/docs/Web/API/Response

MDN. (2023). Abortcontroller — API web: MDN. API web | MDN. Estratto il 31 marzo 2023 dahttps://developer.mozilla.org/en-US/docs/Web/API/AbortController