JavaScript Fetch API Tutorial med JS Fetch Post og headereksempler

Hvis du skriver en webapplikation, er chancerne for, at du bliver nødt til at arbejde med eksterne data. Dette kan være din egen database, tredjeparts API'er og så videre.

Da AJAX første gang dukkede op i 1999, viste det os en bedre måde at opbygge webapplikationer på. AJAX var en milepæl i webudvikling og er kernekonceptet bag mange moderne teknologier som React.

Før AJAX var du nødt til at gengive en hel webside, selv for mindre opdateringer. Men AJAX gav os en måde at hente indhold fra backend og opdatere valgte brugergrænsefladeelementer. Dette hjalp udviklere med at forbedre brugeroplevelsen og opbygge større, komplicerede webplatforme.

Crash Course på REST API'er

Vi er nu i en alder af RESTful API'er. Kort sagt, en REST API giver dig mulighed for at skubbe og trække data fra en datalager. Dette kan enten være din database eller en tredjeparts server som Twitter API.

Der er et par forskellige typer REST API'er. Lad os se på dem, du vil bruge i de fleste tilfælde.

  • GET  - Få data fra API'en. Få for eksempel en twitter-bruger baseret på deres brugernavn.
  • POST  - Skub data til API'en. Opret f.eks. En ny brugerpost med navn, alder og e-mail-adresse.
  • PUT  - Opdater en eksisterende post med nye data. Opdater f.eks. En brugers e-mail-adresse.
  • SLET  - Fjern en post. Slet f.eks. En bruger fra databasen.

Der er tre elementer i hver REST API. Anmodningen, svaret og overskrifterne.

Anmodning  - Dette er de data, du sender til API'et, som et ordre-id for at hente ordredetaljerne.

Svar  - Alle data, du får tilbage fra serveren efter en vellykket / mislykket anmodning.

Overskrifter  - Yderligere metadata videregivet til API'en for at hjælpe serveren med at forstå, hvilken type anmodning den har at gøre med, for eksempel "indholdstype".

Den reelle fordel ved at bruge en REST API er, at du kan opbygge et enkelt API-lag til flere applikationer at arbejde med.

Hvis du har en database, som du vil administrere ved hjælp af en web-, mobil- og desktopapplikation, er alt hvad du behøver, et enkelt REST API-lag.

Nu hvor du ved, hvordan REST API'er fungerer, lad os se på, hvordan vi kan forbruge dem.

XMLHttpRequest

Før JSON overtog verden, var det primære format for dataudveksling XML. XMLHttpRequest () er en JavaScript-funktion, der gjorde det muligt at hente data fra API'er, der returnerede XML-data.

XMLHttpRequest gav os mulighed for at hente XML-data fra backend uden at genindlæse hele siden.

Denne funktion er vokset fra de første dage, hvor den kun var XML. Nu understøtter det andre dataformater som JSON og almindelig tekst.

Lad os skrive et simpelt XMLHttpRequest-opkald til GitHub API for at hente min profil.

// function to handle success function success() { var data = JSON.parse(this.responseText); //parse the string to JSON console.log(data); } // function to handle error function error(err) { console.log('Request Failed', err); //error details will be in the "err" object } var xhr = new XMLHttpRequest(); //invoke a new instance of the XMLHttpRequest xhr.onload = success; // call success function if request is successful xhr.onerror = error; // call error function if request failed xhr.open('GET', '//api.github.com/users/manishmshiva'); // open a GET request xhr.send(); // send the request to the server.

Ovenstående kode sender en GET-anmodning til //api.github.com/users/manishmshiva for at hente mine GitHub-oplysninger i JSON. Hvis svaret lykkedes, udskriver det følgende JSON til konsollen:

Hvis anmodningen mislykkedes, udskriver den denne fejlmeddelelse til konsollen:

Hent API

Fetch API er en enklere, brugervenlig version af XMLHttpRequest til at forbruge ressourcer asynkront. Fetch giver dig mulighed for at arbejde med REST API'er med yderligere muligheder som caching af data, læsning af streamingrespons og mere.

Den største forskel er, at Fetch fungerer med løfter, ikke tilbagekald. JavaScript-udviklere har bevæget sig væk fra tilbagekald efter introduktionen af ​​løfter.

For en kompleks applikation kan du let få en vane med at skrive tilbagekald, der fører til tilbagekald helvede.

Med løfter er det let at skrive og håndtere asynkrone anmodninger. Hvis du er ny på løfterne, kan du lære, hvordan de fungerer her.

Sådan ser den funktion, vi skrev tidligere, ud, hvis du brugte fetch () i stedet for XMLHttpRequest:

// GET Request. fetch('//api.github.com/users/manishmshiva') // Handle success .then(response => response.json()) // convert to json .then(json => console.log(json)) //print data to console .catch(err => console.log('Request Failed', err)); // Catch errors

Den første parameter i funktionen Hent skal altid være URL'en. Hentning tager derefter et andet JSON-objekt med indstillinger som metode, overskrifter, anmodningsdel og så videre.

Der er en vigtig forskel mellem responsobjektet i XMLHttpRequest og Fetch.

XMLHttpRequest returnerer dataene som et svar, mens responsobjektet fra Fetch indeholder oplysninger om selve responsobjektet. Dette inkluderer overskrifter, statuskode osv. Vi kalder "res.json ()" - funktionen for at hente de data, vi har brug for fra responsobjektet.

En anden vigtig forskel er, at Fetch API ikke kaster en fejl, hvis anmodningen returnerer en 400 eller 500 statuskode. Det vil stadig blive markeret som et vellykket svar og videregives til 'derefter' funktionen.

Hentning kaster kun en fejl, hvis selve anmodningen afbrydes. For at håndtere 400 og 500 svar kan du skrive brugerdefineret logik ved hjælp af 'respons.status'. Egenskaben 'status' giver dig statuskoden for det returnerede svar.

Store. Nu hvor du forstår, hvordan Fetch API fungerer, lad os se på et par eksempler mere som at videregive data og arbejde med overskrifter.

Arbejde med overskrifter

Du kan videregive overskrifter ved hjælp af egenskaben "overskrifter". Du kan også bruge headers-konstruktøren til at strukturere din kode bedre. Men at videregive et JSON-objekt til "headers" -egenskaben skal fungere i de fleste tilfælde.

fetch('//api.github.com/users/manishmshiva', { method: "GET", headers: {"Content-type": "application/json;charset=UTF-8"} }) .then(response => response.json()) .then(json => console.log(json)); .catch(err => console.log(err));

Videregivelse af data til en POST-anmodning

For en POST-anmodning kan du bruge egenskaben “body” til at sende en JSON-streng som input. Bemærk, at anmodningslegemet skal være en JSON-streng, mens overskrifterne skal være et JSON-objekt.

// data to be sent to the POST request let _data = { title: "foo", body: "bar", userId:1 } fetch('//jsonplaceholder.typicode.com/posts', { method: "POST", body: JSON.stringify(_data), headers: {"Content-type": "application/json; charset=UTF-8"} }) .then(response => response.json()) .then(json => console.log(json)); .catch(err => console.log(err));

Fetch API er stadig i aktiv udvikling. Vi kan forvente bedre funktioner i den nærmeste fremtid.

De fleste browsere understøtter dog brugen af ​​Fetch i dine applikationer. Diagrammet nedenfor skal hjælpe dig med at finde ud af, hvilke browsere der understøtter det på internettet og mobilapps.

Jeg håber, at denne artikel hjalp dig med at forstå, hvordan du arbejder med Fetch API. Sørg for at prøve Hent til din næste webapplikation.

Jeg skriver regelmæssigt om maskinlæring, cybersikkerhed og DevOps. Du kan tilmelde dig mit ugentlige nyhedsbrev her.