Dacă scrieți o aplicație web, este posibil să fiți nevoit să lucrați cu date externe. Aceasta poate fi propria bază de date, API-uri terțe și așa mai departe.

Cand AJAX apărut pentru prima dată în 1999, ne-a arătat o modalitate mai bună de a construi aplicații web. AJAX a reprezentat un moment important în dezvoltarea web și este conceptul de bază din spatele multor tehnologii moderne, cum ar fi React.

Înainte de AJAX, trebuia să redați din nou o pagină web întreagă chiar și pentru actualizări minore. Dar AJAX ne-a oferit o modalitate de a prelua conținut din backend și de a actualiza elementele de interfață utilizator selectate. Acest lucru i-a ajutat pe dezvoltatori să îmbunătățească experiența utilizatorului și să construiască platforme web mai mari și complicate.

Crash Course pe API-urile REST

JavaScript Fetch API Tutorial cu JS Fetch Post si

Suntem acum în epoca API-uri RESTful. Pur și simplu, un API REST vă permite să împingeți și să extrageți date dintr-un depozit de date. Acesta poate fi baza de date sau serverul unei terțe părți, cum ar fi API Twitter.

Există câteva tipuri diferite de API-uri REST. Să ne uităm la cele pe care le veți folosi în majoritatea cazurilor.

  • OBȚINE– Obțineți date din API. De exemplu, obțineți un utilizator twitter pe baza numelui de utilizator.
  • POST– Împingeți datele către API. De exemplu, creați o nouă înregistrare de utilizator cu numele, vârsta și adresa de e-mail.
  • A PUNE– Actualizați o înregistrare existentă cu date noi. De exemplu, actualizați adresa de e-mail a unui utilizator.
  • ȘTERGE– Eliminați o înregistrare. De exemplu, ștergeți un utilizator din baza de date.

Există trei elemente în fiecare API REST. Cererea, răspunsul și anteturile.

Cerere– Acestea sunt datele pe care le trimiteți către API, cum ar fi un cod de comandă pentru a prelua detaliile comenzii.

1611882306 126 JavaScript Fetch API Tutorial cu JS Fetch Post si
Cerere de mostra

Raspuns– Orice date pe care le primiți de la server după o solicitare reușită / nereușită.

1611882306 362 JavaScript Fetch API Tutorial cu JS Fetch Post si
Exemplu de răspuns

Anteturi– Metadate suplimentare transmise către API pentru a ajuta serverul să înțeleagă cu ce tip de cerere se ocupă, de exemplu „tip de conținut”.

1611882306 261 JavaScript Fetch API Tutorial cu JS Fetch Post si
Exemple de anteturi

Avantajul real al utilizării unui API REST este că puteți construi un singur strat API pentru ca mai multe aplicații să funcționeze.

Dacă aveți o bază de date pe care doriți să o gestionați utilizând o aplicație web, mobilă și desktop, tot ce aveți nevoie este un singur strat API REST.

Acum, că știți cum funcționează API-urile REST, să ne uităm la modul în care le putem consuma.

XMLHttpRequest

Inainte de JSON a preluat lumea, formatul principal de schimb de date a fost XML. XMLHttpRequest () este o funcție JavaScript care a făcut posibilă preluarea datelor de la API-urile care au returnat date XML.

XMLHttpRequest ne-a oferit opțiunea de a prelua date XML din backend fără a reîncărca întreaga pagină.

Această funcție a crescut încă din zilele sale inițiale de a fi XML. Acum acceptă alte formate de date precum JSON și text simplu.

Să scriem un simplu apel XMLHttpRequest către API-ul GitHub pentru a-mi prelua profilul.

// 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', 'https://api.github.com/users/manishmshiva'); // open a GET request
xhr.send(); // send the request to the server.

Codul de mai sus va trimite o solicitare GET către https://api.github.com/users/manishmshiva pentru a prelua informațiile mele GitHub în JSON. Dacă răspunsul a avut succes, acesta va imprima următorul JSON pe consolă:

1611882306 272 JavaScript Fetch API Tutorial cu JS Fetch Post si

Dacă solicitarea a eșuat, va imprima acest mesaj de eroare pe consolă:

1611882306 195 JavaScript Fetch API Tutorial cu JS Fetch Post si

Fetch API

API-ul Fetch este o versiune mai simplă și ușor de utilizat a XMLHttpRequest pentru a consuma resurse în mod asincron. Fetch vă permite să lucrați cu API-urile REST cu opțiuni suplimentare, cum ar fi stocarea în cache a datelor, citirea răspunsurilor în flux și multe altele.

Diferența majoră este că Fetch funcționează cu promisiuni, nu cu returnări. Dezvoltatorii JavaScript s-au îndepărtat de apelurile de apel după introducerea promisiunilor.

Pentru o aplicație complexă, ați putea obține cu ușurință obiceiul de a scrie apeluri care să conducă la callback hell.

Cu promisiuni, este ușor să scrieți și să gestionați cereri asincrone. Dacă ești nou la promisiuni, puteți afla cum funcționează aici.

Iată cum ar arăta funcția pe care am scris-o mai devreme dacă ați folosi fetch () în loc de XMLHttpRequest:

// GET Request.
fetch('https://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

Primul parametru al funcției de preluare ar trebui să fie întotdeauna adresa URL. Preluarea ia apoi un al doilea obiect JSON cu opțiuni precum metodă, anteturi, corpul cererii și așa mai departe.

Există o diferență importantă între obiectul de răspuns în XMLHttpRequest și Fetch.

XMLHttpRequest returnează datele ca răspuns, în timp ce obiectul de răspuns de la Fetch conține informații despre obiectul de răspuns în sine. Aceasta include anteturi, cod de stare etc. Apelăm la funcția „res.json ()” pentru a obține datele de care avem nevoie de la obiectul de răspuns.

O altă diferență importantă este că API-ul Fetch nu va genera o eroare dacă cererea returnează un cod de stare 400 sau 500. Acesta va fi în continuare marcat ca un răspuns de succes și trecut la funcția „atunci”.

Preluarea generează o eroare numai dacă solicitarea în sine este întreruptă. Pentru a gestiona 400 și 500 de răspunsuri, puteți scrie logică personalizată utilizând „response.status”. Proprietatea „status” vă va oferi codul de stare al răspunsului returnat.

Grozav. Acum că înțelegeți cum funcționează API-ul Fetch, să analizăm alte câteva exemple, cum ar fi trecerea datelor și lucrul cu anteturi.

Lucrul cu anteturi

Puteți trece anteturi folosind proprietatea „anteturi”. Puteți utiliza, de asemenea, constructor de antete pentru a vă structura mai bine codul. Dar trecerea unui obiect JSON la proprietatea „headers” ar trebui să funcționeze în majoritatea cazurilor.

fetch('https://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));

Transmiterea datelor către o cerere POST

Pentru o cerere POST, puteți utiliza proprietatea „body” pentru a trece un șir JSON ca intrare. Rețineți că corpul cererii ar trebui să fie un șir JSON, în timp ce anteturile ar trebui să fie un obiect JSON.

// data to be sent to the POST request
let _data = {
  title: "foo",
  body: "bar", 
  userId:1
}

fetch('https://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));

API-ul Fetch este încă în dezvoltare activă. Ne putem aștepta la funcții mai bune în viitorul apropiat.

Cu toate acestea, majoritatea browserelor acceptă utilizarea Fetch în aplicațiile dvs. Graficul de mai jos ar trebui să vă ajute să aflați ce browsere îl acceptă pe web și în aplicațiile mobile.

1611882306 345 JavaScript Fetch API Tutorial cu JS Fetch Post si

Sper că acest articol v-a ajutat să înțelegeți cum să lucrați cu API-ul Fetch. Asigurați-vă că încercați Fetch pentru următoarea aplicație web.


Scriu în mod regulat despre Machine Learning, Cyber ​​Security și DevOps. Vă puteți înscrie pentru buletin informativ săptămânal aici.