Angular Academy · Oppitunti

Uudelleenyritykset ja latausilmaisimet

Toteuttakaa uudelleenyritykset ja yleiset latausilmaisimet

Oppitunti 4/413 vaihetta

Uudelleenyritykset ja latausilmaisimet on ilmainen Angular Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Angular Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Angular Academy-kurssilla on yhteensä 4 oppituntia.

Kaksi poikkileikkaavaa huolenaihetta

Interceptorit sopivat erinomaisesti kahteen koko sovelluksen laajuiseen toimintaan: epäonnistuneiden pyyntöjen automaattiseen uudelleenyritykseen ja yleisen lataustilan seurantaan, kun jokin pyyntö on käynnissä.

Uudelleenyritys retry-funktiolla

Putkittakaa retry heti next(req)-kutsun jälkeen, jotta tilapäisiä virheitä voidaan yrittää uudelleen.

import { retry } from 'rxjs';

export const retryInterceptor: HttpInterceptorFn = (req, next) =>
  next(req).pipe(retry(2));

Uudelleenyritys vain turvallisille pyynnöille

Voitte yrittää idempotentteja metodeja (GET, HEAD) huoletta uudelleen, mutta olkaa varovaisia POST- ja PUT-pyyntöjen kanssa, sillä ne voivat aiheuttaa kaksoiskappaleita. Rajatkaa käsittely metodin perusteella.

export const retryInterceptor: HttpInterceptorFn = (req, next) => {
  if (req.method !== 'GET') return next(req);
  return next(req).pipe(retry(2));
};

Viivästetty uudelleenyritys ja backoff

Lisätkää viive, jotta uudelleenyritykset eivät kuormita palvelinta, ja käyttäkää eksponentiaalista backoffia häiriönsietokyvyn parantamiseksi.

import { timer } from 'rxjs';

next(req).pipe(
  retry({
    count: 3,
    delay: (_err, n) => timer(Math.pow(2, n) * 500)
  })
);

Ehdollinen uudelleenyritys

Yrittäkää uudelleen vain uudelleenyritykseen soveltuvien virheiden (5xx- ja verkkovirheiden) yhteydessä, älkää 4xx-asiakasvirheissä, jotka epäonnistuvat uudelleenkin.

retry({
  count: 2,
  delay: (err, n) =>
    err.status >= 500 ? timer(n * 500) : throwError(() => err)
})

Yleinen lataustila

Latauspalvelu seuraa aktiivisten pyyntöjen määrää, jotta käyttöliittymä voi näyttää yleisen latausanimaation.

export class LoadingService {
  private active = signal(0);
  readonly isLoading = computed(() => this.active() > 0);
  start() { this.active.update(n => n + 1); }
  stop()  { this.active.update(n => Math.max(0, n - 1)); }
}

Lataus-interceptor

Kasvattakaa laskuria pyynnön alkaessa ja pienentäkää sitä finalize-vaiheessa (onnistumisesta tai virheestä riippumatta) käyttämällä finalize-funktiota.

import { finalize } from 'rxjs';

export const loadingInterceptor: HttpInterceptorFn = (req, next) => {
  const loading = inject(LoadingService);
  loading.start();
  return next(req).pipe(finalize(() => loading.stop()));
};

Miksi finalize-funktiota käytetään

finalize suoritetaan valmistumisen, virheen TAI tilauksen peruuttamisen yhteydessä, joten latauslaskuria pienennetään aina — latausanimaatio ei jää jumiin, vaikka pyyntö epäonnistuisi tai peruutettaisiin.

Latausilmaisimen näyttäminen

Sitokaa lataussignaali juuritemplateen.

// root component template:
// @if (loading.isLoading()) {
//   <app-spinner />
// }

Taustapyyntöjen ohittaminen

Joidenkin polling- tai esilatauspyyntöjen ei pitäisi käynnistää latausilmaisinta. Käyttäkää mukautettua otsaketta tai context-tunnistetta niiden ohittamiseen.

import { HttpContextToken } from '@angular/common/http';
export const SKIP_LOADING = new HttpContextToken(() => false);
// in interceptor: if (req.context.get(SKIP_LOADING)) return next(req);

Uudelleenyrityksen ja latauksen yhdistäminen

Järjestäkää ne niin, että uudelleenyritykset tapahtuvat yhden latausjakson aikana: käynnistäkää lataus, tehkää uudelleenyritykset sisäisesti ja kutsukaa finalizea kerran. Sijoittakaa latauksen käsittely uloimmaksi, jotta se kattaa kaikki uudelleenyritykset.

Pikatesti

Testatkaa, miten hyvin ymmärrätte uudelleenyritykset ja latausilmaisimet.

Vastaa interaktiivisessa oppitunnissa

Kertaus: uudelleenyritys- ja latausilmaisimet

Interceptorit käsittelevät uudelleenyritykset ja yleisen latauksen siististi.

retry viiveen ja backoffin kanssa; rajatkaa käyttö idempotentteihin tai uudelleenyrityksen salliviin tapauksiin.
Seuratkaa aktiivisia pyyntöjä servicessä ja pienentäkää laskuria finalize-kutsulla.
Käyttäkää context-tunnisteita taustapyyntöjen ohittamiseen.

Olette suorittaneet HttpClient Interceptors -osion.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 38
Oppitunnit: 144

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Uudelleenyritykset ja latausilmaisimet” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Angular Academy-oppimispolun 3 oppituntia, myös oppitunnin “Uudelleenyritykset ja latausilmaisimet”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Angular Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Uudelleenyritykset ja latausilmaisimet”?

Toteuttakaa uudelleenyritykset ja yleiset latausilmaisimet Harjoittelet Angular Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Angular Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Angular Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”Uudelleenyritykset ja latausilmaisimet”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Angular Academy-oppitunnilla?

Kyllä. Jokainen Angular Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Angular Academy