Pyyntöjen keskeyttäminen AbortControllerilla
Perukaa käynnissä olevat pyynnöt hallitusti.
Pyyntöjen keskeyttäminen AbortControllerilla on ilmainen JavaScript 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 JavaScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.
Miksi pyyntö perutaan
Joskus aloitatte pyynnön, jota ette enää tarvitse: käyttäjä siirtyy muualle, kirjoittaa uuden haun tai aikakatkaisu tulee vastaan. AbortController mahdollistaa käynnissä olevan fetch-pyynnön peruuttamisen.
Ohjaimen luominen
Luokaa AbortController. Se tarjoaa signal-signaalin, jonka välitätte fetchille, sekä peruuttamiseen tarkoitetun abort()-metodin.
const controller = new AbortController();
console.log(controller.signal); // an AbortSignalSignaalin välittäminen
Välittäkää ohjaimen signal fetchille asetukset sisältävän objektin kautta. Nyt pyynnön voi perua.
fetch(url, { signal: controller.signal });abort-kutsun tekeminen
Perukaa pyyntö kutsumalla controller.abort(). Odottava fetch-Promise hylätään tällöin AbortError-virheellä.
const controller = new AbortController();
fetch(url, { signal: controller.signal });
controller.abort(); // cancels the requestAbortError-virheen käsittely
Erottakaa tarkoituksellinen peruutus oikeasta virheestä tarkistamalla catch-haarassa err.name === "AbortError".
try {
await fetch(url, { signal: controller.signal });
} catch (err) {
if (err.name === "AbortError") console.log("Cancelled");
else throw err;
}Aikakatkaisumalli
Yhdistäkää tähän setTimeout, jotta hitaat pyynnöt perutaan automaattisesti. Tyhjentäkää ajastin, jos pyyntö valmistuu ensin.
const c = new AbortController();
const t = setTimeout(() => c.abort(), 5000);
await fetch(url, { signal: c.signal });
clearTimeout(t);Sisäänrakennettu aikakatkaisuapufunktio
Nykyaikaiset ympäristöt tarjoavat AbortSignal.timeout(ms)-toiminnon, joka palauttaa automaattisesti peruvan signaalin. Se on selkeämpi ratkaisu kuin setTimeoutin kytkeminen itse.
fetch(url, { signal: AbortSignal.timeout(5000) });Edellisen haun peruuttaminen
Kirjoittamisen aikana tehtävässä haussa perukaa edellinen pyyntö ennen uuden aloittamista. Näin vanhentuneet vastaukset eivät korvaa uusia tuloksia.
let current = null;
function search(q) {
if (current) current.abort();
current = new AbortController();
return fetch("/search?q=" + q, { signal: current.signal });
}Yksi signaali, monta fetch-kutsua
Yksi signaali voi perua useita pyyntöjä samanaikaisesti. Välittäkää sama signaali useille fetch-kutsuille, jolloin yksi abort()-kutsu peruu ne kaikki.
const c = new AbortController();
fetch(a, { signal: c.signal });
fetch(b, { signal: c.signal });
c.abort(); // cancels bothJo perutut signaalit
Jos signal on jo peruttu, kun välitätte sen fetchille, pyyntö hylätään välittömästi. Tarkistakaa signal.aborted, jos tarvitsette tiedon sen tilasta.
if (controller.signal.aborted) console.log("already cancelled");Siivoaminen komponentin poistuessa
Komponenttipohjaisissa käyttöliittymissä perukaa avoimet pyynnöt, kun komponentti tuhotaan, jotta ette yritä asettaa tilaa kohteelle, jota ei enää ole.
const controller = new AbortController();
// on teardown:
controller.abort();Pikatarkistus
Fetch-pyyntöjen peruuttaminen.
Kertaus
Luokaa AbortController, välittäkää sen signal fetchille ja perukaa pyyntö kutsumalla abort(). Promise hylätään tällöin AbortError-virheellä, jonka voitte tunnistaa nimen perusteella. Käyttäkää tätä aikakatkaisuihin (AbortSignal.timeout), edellisen haun peruuttamiseen, useiden pyyntöjen peruuttamiseen ja siivoamiseen komponentin poistuessa.
Opi JavaScript 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
- 59
- Oppitunnit
- 200
Usein kysytyt kysymykset
Onko oppitunti ”Pyyntöjen keskeyttäminen AbortControllerilla” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Pyyntöjen keskeyttäminen AbortControllerilla”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Pyyntöjen keskeyttäminen AbortControllerilla”?
Perukaa käynnissä olevat pyynnöt hallitusti. Harjoittelet JavaScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni JavaScript Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin JavaScript 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 ”Pyyntöjen keskeyttäminen AbortControllerilla”-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ä JavaScript Academy-oppitunnilla?
Kyllä. Jokainen JavaScript 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
- GET-pyyntöjen tekeminen
- POST ja datan lähettäminen
- Virheiden ja tilakoodien käsittely
- Pyyntöjen keskeyttäminen AbortControllerilla