jQuery Academy · Lektion

Forståelse af Deferred-objekter

Forstå de centrale begreber i jQuerys Deferred-objekter, hvordan de repræsenterer asynkrone operationer, og deres tilstande (pending, resolved, rejected).

Lektion 1 af 312 trin

Forståelse af Deferred-objekter er en gratis jQuery Academy-lektion på CoddyKit. Dette er lektion 1 af 3. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i jQuery Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. jQuery Academy-kurset indeholder 3 lektioner i alt.

Asynkrone operationer og callbacks

I webudvikling sker mange opgaver ikke med det samme. Tænk på at hente data fra en server eller vente på et klik fra en bruger. Det er asynkrone operationer.

Traditionelt ville vi bruge callbacks: funktioner, der kun kører, når en asynkron opgave er færdig. Men indlejrede callbacks kan føre til "callback-helvede", som gør kode svær at læse og vedligeholde.

Mød jQuery Deferred

Det er her, jQuerys Deferred-objekter kommer til undsætning! Et Deferred-objekt er en effektiv måde at håndtere asynkrone operationer mere overskueligt på.

Det fungerer som en pladsholder for et fremtidigt resultat. Du knytter funktioner til det, som køres, når operationen er færdig, uanset om den lykkes eller mislykkes, uden at blokere resten af koden.

Deferreds tre tilstande

Et Deferred-objekt kan være i én af tre tilstande, som afspejler status for den asynkrone opgave, det repræsenterer:

Afventende: Den indledende tilstand. Operationen er endnu ikke afsluttet.
Fuldført: Operationen blev afsluttet korrekt.
Afvist: Operationen mislykkedes eller stødte på en fejl.

Når et Deferred-objekt først er fuldført eller afvist, kan dets tilstand ikke ændres igen.

Oprettelse af et Deferred-objekt

Du opretter et nyt Deferred-objekt ved hjælp af $.Deferred(). Objektet starter i tilstanden afventende.

Det indeholder metoder til at ændre tilstanden og registrere callback-funktioner, som udføres, når tilstanden ændres.

Prøv at oprette et:

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

Signalér succes: .resolve()

Når din asynkrone operation afsluttes korrekt, kalder du metoden .resolve() på dit Deferred-objekt.

Det ændrer tilstanden fra afventende til fuldført. Alle argumenter, du sender til .resolve(), videregives til succes-callbacks.

Se, hvordan tilstanden ændres:

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

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

Signalér fejl: .reject()

Hvis din asynkrone operation mislykkes, kalder du metoden .reject().

Det ændrer Deferred-objektets tilstand fra afventende til afvist. Argumenter, der sendes til .reject(), videregives til fejl-callbacks, ofte som fejlbeskeder.

Se, hvordan afvisning fungerer:

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

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

Håndtering af succes med .done()

Hvis du vil reagere på en vellykket operation (når Deferred-objektet er fuldført), knytter du en callback-funktion til det ved hjælp af metoden .done().

Funktionen udføres kun, hvis .resolve() kaldes, og modtager de argumenter, der blev sendt til .resolve().

Lad os behandle nogle data:

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);
});

Håndtering af fejl med .fail()

På samme måde bruger du metoden .fail() til at håndtere fejl (når Deferred-objektet er afvist).

Callback-funktionen, der sendes til .fail(), udføres kun, hvis .reject() kaldes, og modtager funktionens argumenter.

Lad os simulere en fejl:

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);
});

Kør altid: .always()

Nogle gange har du kode, der skal køres, uanset om den asynkrone operation lykkes eller mislykkes. Det er her, .always() kommer ind i billedet.

Callback-funktionen, der er knyttet til .always(), udføres, uanset om Deferred-objektet er fuldført eller afvist.

Brug .always() til oprydning eller afsluttende opdateringer af brugergrænsefladen:

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.'); });

Beskyt med .promise()

Når du returnerer et Deferred-objekt fra en funktion, ønsker du måske ikke, at ekstern kode skal kunne ændre dets tilstand (f.eks. kalde .resolve() eller .reject() direkte).

Metoden .promise() returnerer en skrivebeskyttet version af Deferred-objektet. Den viser kun metoder til at knytte callbacks til objektet (som .done(), .fail() og .always()), men ikke metoder til at ændre dets tilstand.

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

Test din viden

Hvilken af følgende metoder vil du bruge til at registrere en callback, der KUN udføres, når et Deferred-objekt fuldfører sin asynkrone handling korrekt?

Besvar den i den interaktive lektion

Opsummering: Grundlaget for Deferred

Godt gået! I denne lektion har du fået styr på de grundlæggende begreber i jQuery Deferred-objekter:

De håndterer asynkrone handlinger og undgår callback-helvede.
De kan være i tilstandene afventende, fuldført eller afvist.
Du bruger .resolve() ved succes og .reject() ved fejl.
Callbacks tilknyttes med .done() (succes), .fail() (fejl) og .always() (begge dele).
.promise() returnerer et skrivebeskyttet objekt for at beskytte tilstandsændringer.

Dernæst lærer du, hvordan du kæder og sammensætter disse effektive objekter!

Gratis at komme i gang

Lær JavaScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 22
Lektioner: 48

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Forståelse af Deferred-objekter” gratis?

Ja — alle 3 lektioner i læringssporet jQuery Academy, inklusive “Forståelse af Deferred-objekter”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. jQuery Academy-kurset indeholder 3 lektioner i alt.

Hvad lærer jeg i “Forståelse af Deferred-objekter”?

Forstå de centrale begreber i jQuerys Deferred-objekter, hvordan de repræsenterer asynkrone operationer, og deres tilstande (pending, resolved, rejected). Du øver dig i jQuery Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på jQuery Academy?

Der kræves ingen tidligere erfaring. jQuery Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 3.

Hvor lang tid tager lektionen “Forståelse af Deferred-objekter”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne jQuery Academy-lektion?

Ja. Alle jQuery Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til jQuery Academy