jQuery Academy · Lezione

Comprendere gli oggetti Deferred

Comprendere i concetti fondamentali degli oggetti Deferred di jQuery, il modo in cui rappresentano le operazioni asincrone e i loro stati (pending, resolved, rejected).

Lezione 1 di 312 passaggi

Comprendere gli oggetti Deferred è una lezione jQuery Academy gratuita su CoddyKit. Questa è la lezione 1 di 3. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento jQuery Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso jQuery Academy include 3 lezioni in totale.

Operazioni asincrone e callback

Nello sviluppo web, molte attività non si svolgono istantaneamente. Pensi al recupero di dati da un server o all'attesa del clic di un utente. Si tratta di operazioni asincrone.

Tradizionalmente si usano le callback: funzioni eseguite solo dopo il completamento di un'attività asincrona. Tuttavia, le callback annidate possono portare alla cosiddetta "callback hell", rendendo il codice difficile da leggere e mantenere.

Conoscere gli oggetti Deferred di jQuery

È qui che gli oggetti Deferred di jQuery vengono in aiuto! Un oggetto Deferred è un modo efficace per gestire le operazioni asincrone in maniera più ordinata.

Funziona come un segnaposto per un risultato futuro. È possibile associargli funzioni che verranno eseguite al termine dell'operazione, sia in caso di successo sia in caso di errore, senza bloccare il codice principale.

I tre stati di Deferred

Un oggetto Deferred può trovarsi in uno di tre stati, che riflettono lo stato dell'attività asincrona rappresentata:

Pending: lo stato iniziale. L'operazione non è ancora completata.
Resolved: l'operazione è terminata correttamente.
Rejected: l'operazione non è riuscita o ha riscontrato un errore.

Una volta risolto o rifiutato, lo stato di un oggetto Deferred non può più cambiare.

Creare un oggetto Deferred

Si crea un nuovo oggetto Deferred usando $.Deferred(). Questo oggetto inizia nello stato pending.

Fornisce metodi per modificarne lo stato e registrare funzioni di callback che verranno eseguite quando lo stato cambia.

Provi a crearne uno:

var myDeferred = $.Deferred();
console.log('Deferred is pending: ' + (myDeferred.state() === 'pending'));

Segnalare il successo: .resolve()

Quando l'operazione asincrona viene completata correttamente, chiami il metodo .resolve() sull'oggetto Deferred.

In questo modo lo stato passa da pending a resolved. Eventuali argomenti passati a .resolve() verranno trasmessi alle callback di successo.

Osservi il cambiamento di stato:

var myDeferred = $.Deferred();
console.log('Initial state: ' + myDeferred.state());

setTimeout(function() {
  myDeferred.resolve('Data fetched!');
  console.log('New state: ' + myDeferred.state());
}, 1000);

Segnalare il fallimento: .reject()

Se l'operazione asincrona non riesce, chiami il metodo .reject().

In questo modo lo stato di Deferred passa da pending a rejected. Gli argomenti passati a .reject() verranno inviati alle callback di errore, spesso come messaggi di errore.

Osservi come funziona il rifiuto:

var myDeferred = $.Deferred();
console.log('Initial state: ' + myDeferred.state());

setTimeout(function() {
  myDeferred.reject('Network error!');
  console.log('New state: ' + myDeferred.state());
}, 1000);

Gestire il successo con .done()

Per reagire a un'operazione riuscita (quando Deferred è resolved), associ una funzione di callback usando il metodo .done().

Questa funzione verrà eseguita solo se viene chiamato .resolve() e riceverà gli eventuali argomenti passati a .resolve().

Elaboriamo alcuni dati:

var fetchData = function() {
  var dfd = $.Deferred();
  setTimeout(function() {
    var success = true; // Simulate success
    if (success) {
      dfd.resolve('User data loaded.');
    } else {
      dfd.reject('Failed to load user data.');
    }
  }, 1000);
  return dfd;
};

fetchData().done(function(message) {
  console.log('Success handler: ' + message);
});

Gestire il fallimento con .fail()

Analogamente, per gestire gli errori (quando Deferred è rejected), utilizzi il metodo .fail().

La funzione di callback passata a .fail() verrà eseguita solo se viene chiamato .reject() e riceverà i relativi argomenti.

Simuliamo un errore:

var fetchData = function() {
  var dfd = $.Deferred();
  setTimeout(function() {
    var success = false; // Simulate failure
    if (success) {
      dfd.resolve('User data loaded.');
    } else {
      dfd.reject('Failed to load user data.');
    }
  }, 1000);
  return dfd;
};

fetchData().fail(function(errorMessage) {
  console.log('Error handler: ' + errorMessage);
});

Eseguire sempre: .always()

A volte è necessario eseguire del codice indipendentemente dal successo o dal fallimento dell'operazione asincrona. È qui che entra in gioco .always().

La funzione di callback associata con .always() verrà eseguita sia quando Deferred è resolved sia quando è rejected.

Usi .always() per le operazioni di pulizia o per gli aggiornamenti finali dell'interfaccia:

var fetchData = function(shouldSucceed) {
  var dfd = $.Deferred();
  setTimeout(function() {
    if (shouldSucceed) {
      dfd.resolve('Data received!');
    } else {
      dfd.reject('Request failed!');
    }
  }, 1000);
  return dfd;
};

fetchData(false)
  .done(function(msg) { console.log('Success: ' + msg); })
  .fail(function(err) { console.log('Failure: ' + err); })
  .always(function() { console.log('Operation finished.'); });

Proteggere con .promise()

Quando restituisce un oggetto Deferred da una funzione, potrebbe non voler consentire al codice esterno di modificarne lo stato (ad esempio, chiamando direttamente .resolve() o .reject()).

Il metodo .promise() restituisce una versione "sola lettura" dell'oggetto Deferred. Espone solo i metodi per associare callback (come .done(), .fail() e .always()), ma non quelli per modificarne lo stato.

var createAsyncTask = function() {
  var dfd = $.Deferred();
  setTimeout(function() {
    dfd.resolve('Task done!');
  }, 500);
  // Return only the promise, not the full Deferred object
  return dfd.promise();
};

var taskPromise = createAsyncTask();
taskPromise.done(function(msg) {
  console.log(msg);
});

// The following would throw an error or do nothing if trying to resolve/reject a promise
// taskPromise.resolve('Attempted to resolve externally'); // This is not possible on a promise object

Verifichi le Sue conoscenze

Quale dei seguenti metodi userebbe per registrare un callback che viene eseguito SOLO quando un oggetto Deferred completa correttamente la propria operazione asincrona?

Rispondi nella lezione interattiva

Riepilogo: fondamenti di Deferred

Ottimo lavoro! In questa lezione ha acquisito i concetti fondamentali degli oggetti Deferred di jQuery:

Gestiscono le operazioni asincrone, evitando il callback hell.
Possono trovarsi negli stati pending, resolved o rejected.
Si usa .resolve() per il successo e .reject() per l'errore.
I callback vengono associati con .done() (successo), .fail() (errore) e .always() (entrambi).
.promise() restituisce un oggetto di sola lettura per proteggere la modifica dello stato.

Ora impareremo a concatenare e comporre questi potenti oggetti!

Gratis per iniziare

Impara JavaScript con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi: 22
Lezioni: 48

Inizia a imparare gratis Visualizza il corso completo

Domande Frequenti

La lezione «Comprendere gli oggetti Deferred» è gratuita?

Sì — il testo completo di «Comprendere gli oggetti Deferred» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso jQuery Academy, passa a CoddyKit PRO. Il corso jQuery Academy include 3 lezioni in totale.

Cosa imparerò in «Comprendere gli oggetti Deferred»?

Comprendere i concetti fondamentali degli oggetti Deferred di jQuery, il modo in cui rappresentano le operazioni asincrone e i loro stati (pending, resolved, rejected). Eserciti jQuery Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare jQuery Academy?

Non è richiesta alcuna esperienza precedente. jQuery Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 3.

Quanto tempo richiede la lezione «Comprendere gli oggetti Deferred»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione jQuery Academy?

Sì. Ogni lezione jQuery Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Comprendere gli oggetti Deferred
Concatenamento e composizione delle Promise
Gestione di più attività asincrone

← Torna a jQuery Academy