Callback e promesse | Spiegato con esempi
In questo post, vedremo quali sono i callback e le promesse in JavaScript spiegate con l'aiuto di esempi.
Cosa sono i callback?
I callback sono funzioni che vengono passate all'interno degli argomenti di altre funzioni, questa procedura è valida in JavaScript perché le funzioni sono oggetti e gli oggetti possono essere passati come argomenti alle funzioni. La struttura di base della funzione di callback assomiglia a questa.
funzione demofunction (callback)richiamare();
Sequenza di esecuzione e necessità di callback
Le funzioni di callbacks vengono utilizzate per acquisire il controllo sulla sequenza di esecuzione. Generalmente, le funzioni vengono eseguite sulla base della sequenza che vengono invocate, non sulla sequenza in cui sono definite. Per esempio:
funzione lavoro1 ()console.log ("I AM Task 1");
funzione job3 ()
console.log ("I AM Task 3");
funzione lavoro2 ()
console.log ("I AM Task 2");
lavoro1 ();
lavoro2 ();
Giobbe3 ();
Otterresti il seguente output:
Ma cosa succede se vogliamo invocare l'attività 2 solo quando l'attività 1 termina la sua elaborazione. Per questo, abbiamo bisogno di funzioni di callback e una comprensione di base dell'esecuzione asincrona.
Un esempio di callback in azione
Considera il seguente codice:
var membri = ["John Doe", "Sam Smith", "Allie Cartel"];funzione addNewMember (newUser)
membri.push (newuser);
funzione getAllMembers ()
console.registro (membri);
AddNewMember ("Alpha");
getAllMembers ();
Stiamo lavorando con un array che contiene l'elenco dei membri di un club sociale e abbiamo due funzioni. Una funzione che stampa l'elenco di tutti i membri e l'altro viene utilizzata per aggiungere un membro all'elenco.
Modifichiamo questo codice per renderlo imitato il comportamento di database reali e ritardi di networking come il ritardo e i ping.
var membri = ["John Doe", "Sam Smith", "Allie Cartel"];funzione addNewMember (newUser)
setTimeout (function ()
membri.push (newuser);
console.log ("membro aggiunto");
, 200);
funzione getAllMembers ()
setTimeout (function ()
console.log ("I membri sono:");
console.registro (membri);
, 100);
AddNewMember ("Alpha");
getAllMembers ();
Come puoi vedere, questo codice sta usando il setTimeout () funzione per imitare ritardi dei database. L'Aduser richiede circa 2 secondi e getAllMembers () La funzione richiede 1 secondo.
Vogliamo aggiungere un nuovo utente "alpha" e stampare l'elenco dopo l'aggiunta del membro, non prima ed è per questo che utilizziamo la sequenza:
AddNewMember ("Alpha");getAllMembers ();
Esegui il codice e otterrai il seguente output:
L'elenco è stato stampato per primo, quindi è stato aggiunto il membro. Questo perché il programma non ha aspettato il Aggiungi membro() funzione per finire l'elaborazione. Ora se utilizziamo le funzioni di callback per eseguire il getAllMembers () funzione solo dopo il AddNewMember () è finito, il nostro codice diventa:
var membri = ["John Doe", "Sam Smith", "Allie Cartel"];funzione addNewMember (newUser, callback)
setTimeout (function ()
membri.push (newuser);
console.log ("membro aggiunto");
richiamare();
, 200);
funzione getAllMembers ()
setTimeout (function ()
console.log ("I membri sono:");
console.registro (membri);
, 100);
AddNewMember ("Alpha", getAllMembers);
Se guardi il codice, lo vedrai all'interno del AddNewMember () Funzione stiamo prendendo un argomento di callback, questo garantirà che la funzione di callback venga eseguita nella nostra sequenza desiderata.
L'output dello snippet di codice sopra è come:
Il nuovo membro è stato aggiunto per primo e poi l'intero elenco è stato stampato sulla console. È così che è possibile utilizzare i callback per ottenere il controllo della sequenza di esecuzione.
Cosa sono promesse?
Una promessa è un oggetto ed è qualcosa che viene fatto/completato in futuro. In JavaScript, è esattamente lo stesso della vita reale. IL sintassi Di una promessa in JavaScript è riportato di seguito:
var mypromise = new Promise (function (resolve, rifiuy)// del codice
);
Come si può vedere dalla sintassi della promessa, il costruttore promettente accetta solo la funzione di callback come argomento. I parametri di risoluzione e rifiuto vengono utilizzati nella funzione di callback, con la risoluzione che viene chiamata quando le attività condotte all'interno della funzione di callback hanno esito positivo. Se la procedura non ha successo, tuttavia, viene chiamato il rifiuto.
Ad esempio, supponiamo che tua madre ti prometta di farti una bicicletta per il tuo compleanno. Quella promessa è la sua garanzia che ti comprerà una bicicletta per il tuo compleanno, tuttavia quando arriverà il momento può cambiare idea. Quindi può comprarti una bicicletta o no. Questa è una promessa in una lingua di laico semplice. Guardando questo esempio possiamo identificare tre stati/ possibilità di una promessa in JavaScript:
- Soddisfatto: viene acquistata la bicicletta. Valore dei risultati
- In sospeso: il tuo compleanno non è arrivato e non sei sicuro che tua madre ti comprerà una bicicletta o no. Non definito
- Rifiutate: le biciclette non vengono acquistate per te per il tuo compleanno. Errore.
Per comprendere meglio le promesse facciamo passare attraverso un esempio:
Prenderemo questo esempio passo dopo passo I-E prima creeremo un oggetto Promise usando il costruttore Promise come visto nella sintassi della promessa sopra. Successivamente, useremo quell'oggetto Promise.
Nel codice seguente lo faremo creare Un oggetto promettente:
// Creazione di oggetti Promisevar mypromise = new Promise (function (resolve, rifiuy)
const numero1 = 2;
const numero2 = 2;
// confrontando due numeri
if (numero1 === numero2)
// operazione di successo
risolvere();
altro
// Errore
rifiutare();
);
Nel codice sopra, in primo luogo, abbiamo creato un oggetto Promise mia promessa, e poi ha superato una funzione di callback all'interno del costruttore di promesse. Nella funzione, stiamo controllando se due numeri sono uguali o no. Se i numeri sono uguali, la chiamata verrà risolta, altrimenti se arriva un errore, la chiamata verrà rifiutata.
Per usare l'oggetto Promise (mia promessa) avremo bisogno "Prometti i consumatori"(Consumare promesse registrando funzioni) note come Poi() Metodo per l'adempimento e presa() Metodo per il rifiuto. Il codice seguente illustra questo:
mia promessa.Quindi (function ()
console.log ("numeri uguali. Successo");
).
catch (function ()
console.log ("errore");
);
Se i numeri che vengono controllati sono uguali .Poi() il metodo verrà invocato e vedremo "Numeri uguali. Successo". Tuttavia, se i numeri non sono uguali allora il .presa() il metodo verrà invocato e vedremo il Errore Messaggio nella finestra della console.
L'intero codice è riportato di seguito:
// Creazione di oggetti Promisevar mypromise = new Promise (function (resolve, rifiuy)
const numero1 = 2;
const numero2 = 2;
// confrontando due numeri
if (numero1 === numero2)
// operazione di successo
risolvere();
altro
// Errore
rifiutare();
);
// Usa l'oggetto Promise
mia promessa.
Quindi (function ()
console.log ("numeri uguali. Successo");
).
catch (function ()
console.log ("errore");
);
Dall'output, possiamo vedere che i numeri sono uguali.
Conclusione
Per implementare il codice asincrono in JavaScript utilizziamo le funzioni di callback e le promesse. Una funzione di callback viene passata come argomento a un'altra funzione mentre la promessa è qualcosa che viene raggiunto o completato in futuro. In JavaScript, una promessa è un oggetto e usiamo il costruttore di promesse per inizializzare una promessa. Per usare gli oggetti Promise prendiamo aiuto ai consumatori promettenti che lo sono Poi() Metodo (se promesso mantenuto) e presa() Metodo (se la promessa viene rifiutata).