Articolo originale: Top JavaScript Concepts to Know Before Learning React

Se vuoi imparare React, o qualsiasi altro framework JavaScript, devi prima comprendere i metodi e i concetti fondamentali di JavaScript.

Altrimenti è come se un bambino volesse imparare a correre ancora prima di imparare a camminare.

Molti sviluppatori scelgono un approccio "impara strada facendo" quando devono utilizzare React. Ma questo spesso nuoce alla produttività e peggiora le lacune nella loro conoscenza di JavaScript. Questo approccio rende l'assimilazione di ogni nuova funzionalità due volte più difficile (potresti iniziare a confondere JavaScript con React).

React è un framework JavaScript per la creazione di interfacce utente basate su componenti ad esse dedicate. Tutto il suo codice è scritto in JavaScript, incluso il markup HTML, che è scritto in JSX (questo consente agli sviluppatori di scrivere facilmente HTML e JavaScript insieme).

In questo post, adotteremo un approccio pratico ed esamineremo tutte le idee e le tecniche JS che dovrai comprendere prima di imparare React.

React è costruito utilizzando moderne funzionalità JavaScript, introdotte principalmente con ES2015. Quindi è essenzialmente ciò di cui parleremo in questo post. Per aiutarti ad approfondire il tuo apprendimento, indicherò di volta in volta, specifici collegamenti esterni per ciascun metodo e concetto.

Iniziamo…

Il JavaScript che devi conoscere prima di imparare React

Funzioni di callback in JavaScript

Una funzione di callback è una funzione che viene eseguita dopo che un'altra funzione ha completato la sua esecuzione. In genere viene fornito come input in un'altra funzione.

Le callback sono fondamentali da comprendere poiché vengono utilizzate nei metodi di array (come map(), filter() e così via), nel setTimeout(), nei listener di eventi (come clic, scorrimento e così via) e in molti altre situazioni.

Ecco un esempio di listener di eventi "click" con una funzione di callback che verrà eseguita ogni volta che si fa clic sul pulsante:

//HTML
<button class="btn">Cliccami</button>

//JavaScript
const btn = document.querySelector('.btn');

btn.addEventListener('click', () => {
  let name = 'John doe';
  console.log(name.toUpperCase())
})
NB: Una funzione di callback può essere una funzione ordinaria o una funzione freccia.

Promesse in JavaScript

Come affermato in precedenza, una funzione di callback viene eseguita dopo l'esecuzione della funzione originale. Ora potresti iniziare a considerare di impilare un certo numero di funzioni di callback una sopra l'altra perché non vuoi che una funzione specifica venga eseguita fino a quando la funzione genitore non ha terminato l'esecuzione o è trascorso un tempo specifico.

Ad esempio, proviamo a visualizzare 5 nomi nella console dopo 2 secondi ciascuno, ovvero il primo nome appare dopo 2 secondi, il secondo dopo 4 secondi e così via...

setTimeout(() => {
    console.log("Joel");
    setTimeout(() => {
        console.log("Victoria");
        setTimeout(() => {
            console.log("John");
            setTimeout(() => {
                console.log("Doe");
                setTimeout(() => {
                    console.log("Sarah");
                }, 2000);
            }, 2000);
        }, 2000);
    }, 2000);
}, 2000);

Questo esempio funzionerà, ma sarà difficile da comprendere, eseguire il debug o persino aggiungere la gestione degli errori. Questo è indicato come "Callback Hell", ovvero un inferno di callback, un grosso problema generato dall'uso in codifica di una struttura complessa di callback annidati.

Il motivo principale per utilizzare le promesse è prevenire il callback hell. Con Promise, possiamo scrivere codice asincrono in modo sincrono.

Per te: puoi imparare cosa significa sincrono e asincrono in JavaScript tramite questo articolo di TAPAS ADHIKARY .

Una promessa è un oggetto che restituisce un valore che prevedi di avere in futuro ma che ora non hai.

Un uso pratico delle promesse è nelle richieste HTTP, in cui si invia una richiesta e non si riceve una risposta immediatamente perché si tratta di un'attività asincrona. Ricevi la risposta (dati o errore) solo quando il server risponde.

Sintassi di una promessa in JavaScript:

const myPromise = new Promise((resolve, reject) => {  
    // condizione
});

Le Promise hanno due parametri, uno per il successo (resolve) e uno per il fallimento (reject). Ciascuno ha una condizione che deve essere soddisfatta affinché la Promise possa essere risolta, altrimenti verrà respinta:

const promise = new Promise((resolve, reject) => {  
    let condizione;
    
    if(condizione è soddisfatta) {    
      resolve('La Promise è stata risolta con successo');  
    } else {    
      reject('La Promise è rifiutata');  
    }
});

Ci sono 3 stati dell'oggetto Promise:

  • In attesa: per impostazione predefinita, questo è lo Stato iniziale, prima che la Promise abbia successo o meno.
  • Risolto: Promise completata
  • Rifiutato: Promise fallita

Infine, proviamo a re-implementare il callback hell come una promessa:

function aggNome (tempo, nome){
  return new Promise ((resolve, reject) => {
    if(nome){
      setTimeout(()=>{
        console.log(nome)
        resolve();
      },tempo)
    }else{
      reject('Nessun nome del genere');
    }
  })
}

aggNome(2000, 'Joel')
  .then(()=>addName(2000, 'Victoria'))
  .then(()=>addName(2000, 'John'))
  .then(()=>addName(2000, 'Doe'))
  .then(()=>addName(2000, 'Sarah'))
  .catch((err)=>console.log(err))

Puoi controllare questo articolo di Cem Eygi per capire meglio le Promise.

Map() in JavaScript

Uno dei metodi più utilizzati è Array.map(), che consente di scorrere un array e modificarne gli elementi utilizzando una funzione di callback. La funzione di callback verrà eseguita su ogni elemento dell'array.

Supponiamo di avere un array di utenti che contiene le loro informazioni.

let utenti = [
  { nome: "Susan", cognome: "Steward", eta: 14, hobby: "Canto" },
  { nome: "Daniel", cognome: "Longbottom", eta: 16, hobby: "Calcio" },
  { nome: "Jacob", cognome: "Black", eta: 15, hobby: "Canto" }
];

Possiamo scorrerlo usando map e modificarne l'output

let singoloUtente = utenti.map((utente)=>{
  //aggiungiamo il nome e il cognome insieme
  let nomeCompleto = utente.nome + ' ' + utente.cognome;
  return `
    <h3 class='nome'>${nomeCompleto}</h3>
    <p class="eta">${utente.eta}</p>
  `
});

Da notare che:

  • map() restituisce sempre un nuovo array, anche se è un array vuoto.
  • Non cambia la dimensione dell'array originale rispetto al metodo  filter
  • Utilizza sempre i valori dell'array originale quando ne crei uno nuovo.

Per te: il metodo map funziona quasi come ogni altro iteratore JavaScript, come nel caso di forEach() ma è corretto utilizzare sempre il metodo map ogni volta che si desidera restituire un valore.

immagine-83
Ecco una descrizione perfetta di Simon Høiberg

Uno dei motivi principali per cui utilizziamo map è che possiamo incapsulare i nostri dati in alcuni HTML, mentre per React questo viene fatto semplicemente usando JSX.

Puoi leggere di più su map() qui .

Filter() e Find() in JavaScript

Filter() fornisce un nuovo array in base a determinati criteri. A differenza di map(), può alterare la dimensione del nuovo array, mentre find() restituisce solo una singola istanza (questo potrebbe essere un oggetto o un elemento). Se esistono più corrispondenze, restituisce la prima corrispondenza, altrimenti restituisce undefined.

Supponiamo di avere una raccolta di array di utenti registrati con età diverse:

let utenti = [
  { nome: "Susan", eta: 14 },
  { nome: "Daniel", eta: 16 },
  { nome: "Bruno", eta: 56 },
  { nome: "Jacob", eta: 15 },
  { nome: "Sam", eta: 64 },
  { nome: "Dave", eta: 56 },
  { nome: "Neils", eta: 65 }
];

Puoi scegliere di ordinare questi dati per gruppi di età, come giovani (1-15 anni), anziani (50-70 anni) e così via…

In questo caso, la funzione di filtro è utile in quanto produce un nuovo array in base ai criteri. Diamo un'occhiata a come funziona.

// per persone giovani
const giovani = utenti.filter((persona) => {
  return persona.eta <= 15;
});

// per persone anziane
const anziani = utenti.filter((persona) => persona.eta >= 50);

console.log(giovani);
console.log(anziani); 

Questo genera un nuovo array. Produce un array vuoto se la condizione non è soddisfatta (nessuna corrispondenza).

Puoi leggere di più su questo qui .

Find()

Il metodo find(), come il metodo filter(), scorre l'array cercando un'istanza/elemento che soddisfi la condizione specificata. Una volta trovato, restituisce quello specifico elemento dell'array e termina immediatamente il ciclo. Se non viene rilevata alcuna corrispondenza, la funzione restituisce undefined.

Per esempio:

const Bruno = utenti.find((persona) => persona.nome === "Bruno");

console.log(Bruno);

Puoi leggere di più sul metodo find() qui.

Destrutturazione di array e oggetti in JavaScript

La destrutturazione è una funzionalità JavaScript introdotta in ES6 che consente un accesso più rapido e semplice e lo spacchettamento di variabili da array e oggetti.

Prima dell'introduzione della destrutturazione, se avessimo avuto una serie di frutti e avessimo voluto ottenere il primo, il secondo e il terzo frutto separatamente, ci saremmo trovati con qualcosa del genere:

let frutti= ["Mango", "Ananas" , "Arancia", "Limone", "Mela"];

let frutto1 = frutti[0];
let frutto2 = frutti[1];
let frutto3 = frutti[2];

console.log(frutto1, frutto2, frutto3); //"Mango" "Ananas" "Arancia"

È come ripetere la stessa cosa più e più volte che potrebbe diventare poco gestibile. Vediamo come questo potrebbe essere strutturato per ottenere i primi 3 frutti.

let [frutto1, frutto2, frutto3] = frutti;

console.log(frutto1, frutto2, frutto3); //"Mango" "Ananas" "Arancia"

Potresti chiederti come puoi saltare i dati se vuoi solo stampare il primo e l'ultimo frutto o il secondo e il quarto frutto. Dovresti usare le virgole come segue:

const [frutto1 ,,,, frutto5] = frutti;
const [,frutto2 ,, frutto4,] = frutti;

Destrutturazione di oggetti

Vediamo ora come potremmo destrutturare un oggetto, perché in React farai un sacco di destrutturazioni di oggetti.

Supponiamo di avere un oggetto utente che contiene il nome, cognome e molto altro,

const Susan = {
  nome: "Susan",
  cognome: "Steward",
  eta: 14,
  hobby: {
    hobby1: "canto",
    hobby2: "danza"
  }
};

Alla vecchia maniera, ottenere questi dati potrebbe essere stressante e pieno di ripetizioni:

const nome = Susan.nome;
const eta = Susan.eta;
const hobby1 = Susan.hobby.hobby1;

console.log(nome, eta, hobby1); //"Susan" 14 "canto"

ma con la destrutturazione è molto più semplice:

const {nome, eta, hobby:{hobby1}} = Susan;

console.log(nome, eta, hobby1); //"Susan" 14 "canto"

Possiamo farlo anche all'interno di una funzione:

function datiIndividuali({nome, eta, hobby:{hobby1}}){
  console.log(nome, eta, hobby1); //"Susan" 14 "canto"
}
individualData(Susan);

Puoi leggere di più sulla destrutturazione di array e oggetti qui.

Operatori Rest e Spread in JavaScript

Gli operatori JavaScript spread e rest utilizzano tre punti .... L'operatore rest raccoglie o colleziona elementi: inserisce il "resto" di alcuni valori specifici forniti dall'utente in un array/oggetto JavaScript.

Supponiamo di avere una serie di frutti:

let frutti= ["Mango", "Ananas", "Arancia", "Limone", "Mela"];

Potremmo destrutturare l'array per ottenere il primo e il secondo frutto e quindi posizionare il "resto" dei frutti in una array utilizzando l'operatore rest.

const [primoFrutto, secondoFrutto, ...resto] = frutti

console.log(primoFrutto, secondoFrutto, resto); //"Mango" "Ananas" ["Arancia","Limone","Mela"]

Osservando il risultato, vedrai i primi due elementi dell'array di partenza e poi come terzo elemento un array che raccoglie i frutti rimanenti che non abbiamo destrutturato. Possiamo ora condurre qualsiasi tipo di elaborazione sull'array appena generato, come ad esempio:

const fruttaScelata = rest.find((frutta) => frutta === "Mela");

console.log(`Questa è una ${fruttaScelta}`); //"Questa è una Mela"

È importante tenere a mente che questo deve arrivare sempre per ultimo (il posizionamento è molto importante).

Abbiamo appena lavorato con gli array: ora trattiamo gli oggetti, che sono assolutamente gli stessi.

Supponiamo di avere un oggetto utente che ha il nome, cognome e molto altro. Potremmo destrutturarlo e quindi estrarre il resto dei dati.

const Susan = {
  nome: "Susan",
  cognome: "Steward",
  eta: 14,
  hobby: {
    hobby1: "canto",
    hobby2: "danza"
  }
};

const {eta, ...rest} = Susan;
console.log(eta, rest);

Questo stamperà il seguente risultato:

14
{
nome: "Susan" ,
cognome: "Steward" ,
hobby: {...}
}

Ora vediamo come funziona l'operatore spread e infine riassumeremo differenziando tra entrambi gli operatori.

Operatore Spread

L'operatore spread, come suggerisce il nome, viene utilizzato per distribuire gli elementi dell'array. Ci dà la possibilità di ottenere un elenco di parametri da un array. L'operatore spread ha una sintassi simile all'operatore rest, tranne per il fatto che opera nella direzione opposta.

Nota: un operatore spread è efficace solo se utilizzato con array letterali, chiamate di funzione o oggetti con proprietà inizializzate.

Ad esempio, supponiamo di avere array di diversi tipi di animali:

let animaliDomestici= ["gatto", "cane", "coniglio"];

let carnivori = ["leone", "lupo", "leopardo", "tigre"];

Potresti voler combinare questi due array in un solo array di animali. Proviamolo:

let animali = [animaliDomestici, carnivori];

console.log(animali); //[["gatto", "cane" , "coniglio"], ["leone", "lupo", "leopardo", "tigre"]]

Questo non è ciò che vogliamo: vogliamo tutti gli elementi in un solo array. E possiamo ottenere questo utilizzando l'operatore spread:

let animali = [...animaliDomestici, ...carnivori];

console.log(animals); //["gatto", "cane" , "coniglio", "leone", "lupo", "leopardo", "tigre"]

Funziona anche con gli oggetti. È importante notare che l'operatore spread non può espandere i valori degli oggetti letterali, poiché le proprietà di un oggetto non sono iterabile. Ma possiamo usarlo per clonare le proprietà da un oggetto all'altro.

Per esempio:

let nome = {nome:"John", cognome:"Doe"};
let hobby = { hobby1: "canto", hobby2: "danza" }
let myInfo = {...nome, ...hobby};

console.log(myInfo); //{nome:"John", cognome:"Doe", hobby1: "canto", hobby2: "danza"}

Puoi leggere di più sugli operatori JavaScript Spread e Rest qui .

Valore univoco - Set() in JavaScript

Di recente, stavo cercando di creare una scheda delle categorie per un'applicazione in cui dovevo recuperare il valore delle categorie da un array.

let animali = [
  {
    nome:'Leone',
    categoria: 'carnivoro'
  },
  {
    nome:'cane',
    categoria:'animaleDomestico'
  },
  {
    nome:'gatto',
    categoria:'animaleDomestico'
  },
  {
    nome:'lupo',
    categoria:'carnivoro'
  }
]

La prima cosa era scorrere l'array, ma ho ottenuto valori ripetuti:

let categoria = animali.map((animale)=>animale.categoria);
console.log(categoria); //["carnivoro" , "animaleDomestico" , "animaleDomestico" , "carnivoro"]

Ciò significava che dovevo impostare una condizione per evitare la ripetizione. È stato un po' complicato finché non mi sono imbattuto nel costruttore/oggetto set() fornito da ES6 :).

Un set è una collezione di oggetti unici, cioè nessun elemento è ripetuto. Vediamo come possiamo implementarlo facilmente.

//avvolgi la tua iterazione nel metodo set in questo modo
let categoria = [...new Set(animali.map((animale)=>animale.categoria))];

console.log(categoria); ////["carnivoro" , "animaleDomestico"]

NB: ho deciso di distribuire i valori in un array. Puoi leggere di più sui valori univoci qui .

Chiavi dinamiche degli oggetti  in JavaScript

Questo ci permette di aggiungere chiavi nell'oggetto usando la notazione con parentesi quadre. Ciò potrebbe non avere senso per te in questo momento, ma mentre continui a imparare React o inizi a lavorare con un team, potresti incontrarlo.

In JavaScript, sappiamo che gli oggetti sono spesso costituiti da proprietà/chiavi e valori e possiamo utilizzare la notazione del punto per aggiungere, modificare o accedere ad alcuni valori. Come nell'esempio:

let leone = {
  categoria: "carnivoro"
};

console.log(leone); // { categoria: "carnivoro" }
leone.baby = 'cucciolo';
console.log(leone.categoria); // carnivoro
console.log(leone); // { categoria: "carnivoro" , baby: "cucciolo" }

Abbiamo anche la possibilità di usare la notazione con parentesi quadre, che viene utilizzata quando abbiamo bisogno di chiavi dinamiche degli oggetti .

Cosa intendiamo per chiavi dinamiche degli oggetti ? Queste sono chiavi che potrebbero non seguire la convenzione di denominazione standard di proprietà/chiavi in ​​un oggetto. La convenzione di denominazione standard consente solo camelCase e snake_case, ma utilizzando la notazione tra parentesi quadre possiamo risolvere questo problema.

Ad esempio, supponiamo di nominare la nostra chiave con un trattino tra le parole, ad esempio (leone-baby):

let leone = {
  'leone-baby' : "cucciolo"
};

// notazione con punto
console.log(leone.leone-baby); // error: ReferenceError: baby is not defined
// notazione con parentesi
console.log(leone['leone-baby']); // "cucciolo"

Puoi vedere la differenza tra la notazione col punto e la notazione con la parentesi. Vediamo altri esempi:

let categoria = 'carnivoro';
let leone = {
  'leone-baby' : "cucciolo",
  [categoria] : true,
};

console.log(leone); // { leone-baby: "cucciolo" , carnivoro: true }

Puoi anche eseguire operazioni più complesse utilizzando le condizioni all'interno della parentesi quadra, come questa:

const numero = 5;
const partorito = true;

let animale = {
  nome: 'leone',
  eta: 6,
  [partorito && 'bambini']: numero
};

console.log(animale); // { nome: "leone" , eta: 6 , bambini: 5 }

Puoi leggere di più su questo qui .

reduce() in JavaScript

Questa è probabilmente la funzione di array più potente. Può sostituire i metodi filter() e find() ed è anche molto utile quando si eseguono metodi  map() e filter() su grandi quantità di dati.

Quando si concatenano insieme il metodo di map e filter, si finisce per eseguire il lavoro due volte, prima filtrando ogni singolo valore e poi mappando i valori rimanenti. Invece, reduce() permette di filtrare e mappare in un unico passaggio. Questo metodo è potente, ma è anche un po' più sofisticato e complicato.

Iteriamo sul nostro array e quindi otteniamo una funzione di callback, che è simile a map(), filter(), find(), e le altre. La distinzione principale è che riduce il nostro array a un singolo valore, che può essere un numero, un array o un oggetto.

Un'altra cosa da tenere a mente sul metodo reduce() è che gli stiamo passando due argomenti, cosa che è la prima volta che succede da quando hai iniziato a leggere questo tutorial.

Il primo argomento è la somma/totale di tutti i calcoli e il secondo è il valore dell'iterazione corrente (che capirai a breve).

Ad esempio, supponiamo di avere un elenco di stipendi per il nostro personale:

let personale = [
  { nome: "Susan", eta: 14, salario: 100 },
  { noame: "Daniel", eta: 16, salario: 120 },
  { nome: "Bruno", eta: 56, salario: 400 },
  { nome: "Jacob", eta: 15, salario: 110 },
  { nome: "Sam", eta: 64, salario: 500 },
  { nome: "Dave", eta: 56, salario: 380 },
  { nome: "Neils", eta: 65, salario: 540 }
];

E vogliamo calcolare il 10% per tutto il personale. Potremmo farlo facilmente con il metodo reduce, ma prima di farlo facciamo qualcosa di più semplice: calcoliamo prima lo stipendio totale.

const salarioTotale = personale.reduce((totale, staff) => {
  totale += staff.salario;
  return totale;
},0)
console.log(salarioTotale); // 2150

NB: In questo esempio abbiamo passato un secondo argomento che è il totale, ma potrebbe essere qualsiasi cosa, ad esempio un numero o un oggetto.

Calcoliamo ora il 10% per tutto il personale e fare il totale. Potremmo semplicemente ottenere il 10% dal totale o ottenerlo prima da ogni singolo stipendio e poi sommarli.

const salarioInfo = personale.reduce(
  (totale, staff) => {
    let staffPercentuale = staff.salario * 0.1;
    totale.totalePercentuale += staffPercentuale;
    totale['salarioTotale'] += staff.salario;
    return totale;
  },
  { salarioTotale: 0, totalPercentuale: 0 }
);

console.log(salarioInfo); // { SalarioTotale: 2150 , totalPercentuale: 215 }

Per te: Abbiamo usato un oggetto come secondo argomento e abbiamo anche usato le  chiavi dinamiche degli oggetti . Puoi leggere di più sul metodo Reduce qui.

Concatenamento facoltativo in JavaScript

Il concatenamento facoltativo è un modo sicuro per accedere alle proprietà degli oggetti nidificati in JavaScript anziché dover eseguire più controlli null quando si accede a una lunga catena di proprietà negli oggetti. È una nuova funzionalità introdotta in ES2020.

Per esempio:

let utenti = [
{
    nome: "Sam",
    eta: 64,
    hobby: "cucinare",
    hobbies: {
      hobb1: "cucinare",
      hobby2: "dormire"
    }
  },
  { nome: "Bruno", eta: 56 },
  { nome: "Dave", eta: 56, hobby: "Calcio" },
  {
    nome: "Jacob",
    eta: 65,
    hobbies: {
      hobb1: "guidare",
      hobby2: "dormire"
    }
  }
];

Supponiamo che tu stia cercando di ottenere gli hobbies da questo array. Proviamolo:

utenti.forEach((utente) => {
  console.log(utente.hobbies.hobby2);
});

Quando guardi nella tua console, noterai che la prima iterazione è stata completata, ma la seconda iterazione non ha restituito alcun hobby. Quindi ha dovuto generare un errore e interrompere l'iterazione, il che significa che non poteva acquisire dati da altri oggetti nell'array.

Output:

"dormire"
error: Uncaught TypeError: user.hobbies is undefined

Questo errore può essere corretto con il concatenamento opzionale, sebbene esistano diversi metodi che possono risolverlo (ad esempio, utilizzando operatori condizionali). Vediamo come lo si può fare sia con le condizioni che con il concatenamento opzionale:

Metodo di rendering condizionale:

utenti.forEach((utente) => {
  console.log(utente.hobbies && utente.hobbies.hobby2);
});

Concatenamento opzionale:

utenti.forEach((utente) => {
  console.log(utente?.hobbies?.hobby2);
});

Output:

"dormire"
undefined
undefined
"dormire"

Questo potrebbe non avere molto significato per te ora, ma quando lavorerai a qualcosa di più grande in futuro, tutto avrà un senso! Puoi leggere di più qui.

Fetch API & Errori in JavaScript

L'API fetch, come suggerisce il nome, viene utilizzata per ottenere dati dalle API. È un'API del browser che consente di utilizzare JavaScript per effettuare richieste AJAX di base (JavaScript asincrono e XML).

Poiché è fornito dal browser, puoi usarlo senza dover installare o importare pacchetti o dipendenze (come axios). La sua configurazione è abbastanza semplice da capire. L'API fetch fornisce una promessa per impostazione predefinita (ho coperto le promesse in precedenza in questo articolo).

Vediamo come recuperare i dati tramite l'API fetch. Utilizzeremo un'API gratuita che contiene migliaia di citazioni casuali:

fetch("https://type.fit/api/quotes")
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((err) => console.log(err));

Quello che abbiamo fatto qui è stato:

  • Riga 1: abbiamo ottenuto i dati dall'API, che ha restituito una promessa
  • Riga 2: Abbiamo quindi ottenuto il formato .json() dei dati che è anche una promessa
  • Riga 3: abbiamo i nostri dati che ora restituiscono JSON
  • Riga 4: Abbiamo ricevuto gli errori nel caso ce ne fossero

Vedremo come questo può essere fatto con async/await nella prossima sezione. Puoi leggere di più sull'API fetch qui.

Come gestire gli errori nell'API Fetch

Diamo ora un'occhiata a come possiamo gestire gli errori dall'API Fetch senza dover dipendere dalla parola chiave catch. La funzione fetch() genererà automaticamente un errore per gli errori di rete ma non per gli errori HTTP come le risposte da 400 a 5xx.

La buona notizia è che fetch fornisce un semplice flag response.ok che indica se la richiesta non è riuscita o se il codice di stato di una risposta HTTP è nell'intervallo di successo.

Questo è molto semplice da implementare:

fetch("https://type.fit/api/quotes")
  .then((response) => {
    if (!response.ok) {
      throw Error(response.statusText);
    }
    return response.json();
  })
  .then((data) => console.log(data))
  .catch((err) => console.log(err));

Puoi leggere ulteriori informazioni sugli errori dell'API fetch qui .

Async/Await in JavaScript

Async/Await ci consente di scrivere codice asincrono in modo sincrono. Ciò significa che non è necessario continuare a annidare i callback.

Una funzione asincrona restituisce sempre una promessa.

Potresti scervellarti chiedendoti in cosa consiste la differenza tra sincrono e asincrono. In poche parole, sincrono significa che i lavori vengono completati uno dopo l'altro. Asincrono significa che le attività vengono completate in modo indipendente.

Nota che abbiamo sempre async davanti alla funzione e possiamo usare await solo quando abbiamo async. Capirai presto!

Ora modifichiamo il codice dell'API fetch su cui abbiamo lavorato in precedenza utilizzando async/await:

const fetchData = async () =>{
  const quotes = await fetch("https://type.fit/api/quotes");
  const response = await quotes.json();
  console.log(response);
}

fetchData();

Questo è molto più facile da leggere, giusto?

Ti starai chiedendo come possiamo gestire gli errori con async/await. Sì! Usi le parole chiave try and catch:

const fetchData = async () => {
  try {
    const quotes = await fetch("https://type.fit/api/quotes");
    const response = await quotes.json();
    console.log(response);
  } catch (error) {
    console.log(error);
  }
};

fetchData();

Puoi leggere di più su async/await qui .

Conclusione

In questo articolo, abbiamo appreso oltre 10 metodi e concetti JavaScript che tutti dovrebbero comprendere a fondo prima di imparare React.

Ci sono così tanti altri metodi e concetti che dovresti conoscere, ma questi sono quelli a cui potresti non prestare attenzione mentre impari JavaScript. Questi sono importanti da capire prima di imparare React.

Supponiamo che tu abbia appena iniziato con JavaScript: ho curato un fantastico elenco di risorse che ti aiuteranno a imparare concetti e argomenti JavaScript qui . Non dimenticare di mettere una stella e condividere! :).