En praktisk ES6-guide til, hvordan man udfører HTTP-anmodninger ved hjælp af Fetch API

I denne vejledning viser jeg dig, hvordan du bruger Fetch API (ES6 +) til at udføre HTTP-anmodninger til en REST API med nogle praktiske eksempler, du sandsynligvis støder på.

Vil du hurtigt se HTTP-eksemplerne? Gå til afsnit 5. Den første del beskriver den asynkrone del af JavaScript, når du arbejder med HTTP-anmodninger.

Bemærk : Alle eksempler er skrevet i ES6 med pilefunktioner.

Et almindeligt mønster i nutidens nuværende web- / mobilapplikationer er at anmode om eller vise en slags data fra serveren (såsom brugere, indlæg, kommentarer, abonnementer, betalinger osv.) Og derefter manipulere dem ved hjælp af CRUD (opret, læs, opdatering eller sletning).

For yderligere at manipulere en ressource bruger vi ofte disse JS-metoder (anbefales) såsom .map(), .filter()og .reduce().

Hvis du vil blive en bedre webudvikler, starte din egen virksomhed, lære andre eller forbedre dine udviklingsevner, sender jeg ugentlige tip og tricks til de nyeste sprog til webudvikling.

Her er hvad vi vil adressere

  1. Håndtering af JS's asynkrone HTTP-anmodninger
  2. Hvad er AJAX?
  3. Hvorfor hente API?
  4. En hurtig introduktion til Fetch API
  5. Hent API - CRUD eksempler ← de gode ting!

1. Håndtering af JS's asynkrone HTTP-anmodninger

En af de mest udfordrende dele med at forstå, hvordan JavaScript (JS) fungerer, er at forstå, hvordan man håndterer asynkrone anmodninger, hvilket kræver og forstå, hvordan løfter og tilbagekald fungerer.

I de fleste programmeringssprog er vi forbundet til at tro, at operationer sker i rækkefølge (sekventielt). Den første linje skal udføres, før vi kan gå videre til den næste linje. Det giver mening, fordi det er sådan, vi mennesker fungerer og udfører daglige opgaver.

Men med JS har vi flere operationer, der kører i baggrunden / forgrunden, og vi kan ikke have en webapp, der fryser, hver gang den venter på en brugerbegivenhed.

At beskrive JavaScript som asynkront er måske vildledende. Det er mere nøjagtigt at sige, at JavaScript er synkron og enkeltgevindet med forskellige tilbagekaldsmekanismer. Læs mere.

Ikke desto mindre skal nogle gange ske i orden, ellers vil det medføre kaos og uventede resultater. Af den grund kan vi bruge løfter og tilbagekald til at strukturere det. Et eksempel kan være validering af brugeroplysninger, inden du fortsætter til den næste handling.

2. Hvad er AJAX

AJAX står for Asynchronous JavaScript og XML, og det gør det muligt for websider at blive opdateret asynkront ved at udveksle data med en webserver, mens appen kører. Kort sagt betyder det i det væsentlige, at du kan opdatere dele af en webside uden at genindlæse hele siden (URL'en forbliver den samme).

AJAX er et vildledende navn. AJAX-applikationer bruger muligvis XML til at transportere data, men det er lige så almindeligt at transportere data som almindelig tekst eller JSON-tekst.

- w3shools.com

AJAX hele vejen?

Jeg har set, at mange udviklere har en tendens til at blive rigtig begejstrede for at have alt i en enkelt sideapplikation (SPA), og dette fører til masser af asynkron smerte! Men heldigvis har vi biblioteker som Angular, VueJS og React, der gør denne proces meget lettere og praktisk.

Samlet set er det vigtigt at have en balance mellem hvad der skal genindlæse hele siden eller dele af siden.

Og i de fleste tilfælde fungerer en sideindlæsning fint med hensyn til, hvor magtfulde browsere er blevet. Tilbage i dagene ville en sideindlæsning tage sekunder (afhængigt af serverens placering og browserfunktioner). Men nutidens browsere er ekstremt hurtige, så det er ikke en stor forskel at beslutte, om der skal udføres AJAX eller sideindlæsning.

Min personlige erfaring er, at det er meget nemmere og hurtigere at oprette en søgemaskine med en simpel søgeknap end at gøre det uden en knap. Og i de fleste tilfælde er kunden ligeglad med, om det er et SPA eller en ekstra sideindlæsning. Naturligvis, misforstå mig ikke, jeg elsker SPA'er, men vi er nødt til at overveje et par afvejninger. Hvis vi beskæftiger os med et begrænset budget og manglende ressourcer, er måske en hurtig løsning en bedre tilgang.

I sidste ende afhænger det virkelig af brugen, men personligt føler jeg, at SPA'er kræver mere udviklingstid og lidt hovedpine end en simpel sideindlæsning.

3. Hvorfor hente API?

Dette giver os mulighed for at udføre deklarative HTTP-anmodninger til en server. For hver anmodning opretter den en, Promiseder skal løses for at definere indholdstypen og få adgang til dataene.

Nu er fordelen ved Fetch API, at den understøttes fuldt ud af JS-økosystemet og også er en del af MDN Mozilla-dokumenterne. Og sidst men ikke mindst fungerer det ud af kassen på de fleste browsere (undtagen IE). På lang sigt gætter jeg på, at det bliver standardmetoden til at ringe til web-API'er.

Bemærk! Jeg er godt klar over andre HTTP-tilgange, såsom brug af Observable med RXJS, og hvordan det fokuserer på hukommelsesadministration / lækage med hensyn til abonnement / afmelding og så videre. Og måske bliver det den nye standard måde at gøre HTTP-anmodninger på, hvem ved det?

Under alle omstændigheder fokuserer jeg kun på Fetch API i denne artikel, men kan i fremtiden skrive en artikel om Observable og RXJS.

4. En hurtig introduktion til Fetch API

Den fetch()metode returnerer en Promise, der løser den Responsefra Requestat vise status (succes eller ej). Hvis du nogensinde får denne besked promise {}på din konsollogskærm, skal du ikke gå i panik - det betyder grundlæggende, at det Promisefungerer, men venter på at blive løst. Så for at løse det har vi brug for .then()handler (callback) for at få adgang til indholdet.

Så kort sagt definerer vi først stien ( Fetch ), for det andet beder vi om data fra serveren ( Request ), for det tredje definerer vi indholdstypen ( Body ) og sidst men ikke mindst får vi adgang til dataene ( Response ).

Hvis du kæmper for at forstå dette koncept, skal du ikke bekymre dig. Du får et bedre overblik gennem eksemplerne vist nedenfor.

The path we'll be using for our examples //jsonplaceholder.typicode.com/users // returns JSON

5. Hent API - HTTP-eksempler

Hvis vi vil have adgang til dataene, har vi brug for to .then()håndterere (tilbagekald). Men hvis vi vil manipulere ressourcen, har vi kun brug for en .then()handler. Vi kan dog bruge den anden til at sikre, at værdien er sendt.

Basic Fetch API-skabelon:

Bemærk! Eksemplet ovenfor er kun til illustrative formål. Koden fungerer ikke, hvis du udfører den.

Hent eksempler på API

  1. Viser en bruger
  2. Viser en liste over brugere
  3. Oprettelse af en ny bruger
  4. Sletning af en bruger
  5. Opdatering af en bruger
Bemærk! Ressourcen oprettes ikke rigtigt på serveren, men returnerer et falsk resultat for at efterligne en rigtig server.

1. Viser en bruger

Som tidligere nævnt består processen med at vise en enkelt bruger af to .then()håndtere (tilbagekald), den første til at definere objektet og den anden til at få adgang til dataene.

Bemærk bare ved at læse forespørgselsstrengen, er /users/2vi i stand til at forstå / forudsige, hvad API'en gør. For mere information om, hvordan du skriver REST API af høj kvalitet, se disse retningslinjer tip skrevet af Mahesh Haldar.

Eksempel

2. Viser en liste over brugere

Eksemplet er næsten identisk med det foregående eksempel bortset fra at forespørgselsstrengen er /usersog ikke /users/2.

Eksempel

3. Oprettelse af en ny bruger

Denne ser lidt anderledes ud end det foregående eksempel. Hvis du ikke er bekendt med HTTP-protokollen, er det simpelthen giver os et par søde metoder såsom POST, GET, DELETE, UPDATE, PATCHog PUT. Disse metoder er verb, der simpelthen beskriver typen af ​​handling, der skal udføres, og bruges mest til at manipulere ressourcen / dataene på serveren.

Under alle omstændigheder skal vi bruge HTTP-verbet for at oprette en ny bruger med Fetch API POST. Men først skal vi definere det et eller andet sted. Heldigvis er der et valgfrit argument, som Initvi kan videregive med URL'en til at definere brugerdefinerede indstillinger såsom metodetype, brødtekst, legitimationsoplysninger, overskrifter osv.

Bemærk: fetch()Metodens parametre er identiske med Request()konstruktørens.

Eksempel

4. Sletning af en bruger

For at slette brugeren skal vi først målrette brugeren mod /users/1, og derefter definerer vi den metodetype, der er DELETE.

Eksempel

5. Opdatering af en bruger

HTTP-verbet PUTbruges til at manipulere målressourcen, og hvis du vil foretage delvise ændringer, skal du bruge PATCH. For mere information om, hvad disse HTTP-verb gør, skal du tjekke dette.

Eksempel

Konklusion

Nu har du en grundlæggende forståelse af, hvordan man henter eller manipulerer en ressource fra serveren ved hjælp af JavaScript's Fetch API, samt hvordan man håndterer løfter. Du kan bruge denne artikel som en guide til, hvordan du strukturerer dine API-anmodninger om CRUD-operationer.

Personligt føler jeg, at Fetch API er deklarativ, og du kan let forstå, hvad der sker uden nogen teknisk kodningserfaring.

Alle eksempler er vist i anmodning om løftet base, hvor vi kæder anmodningen ved hjælp af .thentilbagekald. Dette er en standard tilgang, som mange udviklere er fortrolige med, men hvis du vil bruge, skal du async/awaittjekke denne artikel. Konceptet er det samme, undtagen async/awaiter lettere at læse og skrive.

Her er et par artikler, jeg har skrevet om web-økosystemet sammen med personlige tip og tricks til programmering.

  • En sammenligning mellem Angular og React
  • Et kaotisk sind fører til kaotisk kode
  • Udviklere, der konstant vil lære nye ting
  • En praktisk guide til ES6-moduler
  • Lær disse centrale webkoncepter
  • Forøg dine færdigheder med disse vigtige JavaScript-metoder
  • Programmer hurtigere ved at oprette brugerdefinerede bash-kommandoer

Du kan finde mig på Medium, hvor jeg udgiver ugentligt. Eller du kan følge mig på Twitter, hvor jeg sender relevante tips og tricks til webudvikling sammen med personlige historier.

PS Hvis du nød denne artikel og ønsker mere som disse, bedes du klappe ❤ og dele med venner, der muligvis har brug for det, det er god karma.