Fillimi me JavaScript Fetch API

Prelud

A keni përdorur ndonjëherë objektin XMLHttpRequest në JavaScript për të dërguar një kërkesë në backend për të marrë ose postuar disa të dhëna? Nëse jo, atëherë me fat ju, pasi ishte goxha kaotike dhe e ndërlikuar.

Këtu është një shembull i shpejtë i asaj që duhet për të marrë një skedar nga një URL e dhënë duke përdorur XMLHttpRequest objekt kundrejt $.ajax() në jQuery kundrejt API-së amtare fetch të sapo prezantuar.

Marrja e të dhënave duke përdorur XMLHttpRequest

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState == XMLHttpRequest.DONE) {
    console.log(xhr.responseText);
  }
}
xhr.open('GET', 'https://api.jsonbin.io/v3/b/6360e54a65b57a31e6a94a42', true);
xhr.send(null);

Duket e lodhshme apo jo? Nuk është kjo, sa më sipër është kryesisht një shembull minimal se si të dërgoni një kërkesë duke përdorur objektin XMLHttpRequest(). Më pas, jQuery vjen në ndihmë duke prezantuar $.ajax(), një version i thjeshtuar i XMLHttpRequest() si një qershi në krye, duke prezantuar funksionalitete shtesë.

Marrja e të dhënave duke përdorur $.get()

$.get(
  'https://api.jsonbin.io/v3/b/6360e54a65b57a31e6a94a42',
  (res) => {
    console.log(res);
  }
);

jQuery thjeshtoi marrjen e të dhënave në një masë të madhe, krahasuar me objektin vendas XMLHttpRequest(). Megjithëse ishte e lehtë, ai erdhi me disa kosto, pasi jQuery lib peshonte ~ 100 kb (vlerësim i paqartë) ku edhe nëse e kishit ndërtuar lib me modulin vetëm ajax, ai përsëri peshonte afërsisht ~ 50 kb, gjë që është shumë e lartë për të bërë diçka kaq themelore sa duke marrë disa të dhëna JSON.

Përpara se të zhytemi në përdorimin e fetch() API, këtu është diçka e rëndësishme për të marrë një shënim:

Specifikimi i tërheqjes ndryshon nga jQuery.ajax() në mënyrat e mëposhtme domethënëse:

• Premtimi i kthyer nga fetch() nuk do të refuzojë statusin e gabimit HTTP edhe nëse përgjigja është një HTTP 404 ose 500. Në vend të kësaj, sapo serveri të përgjigjet me kokë, Premtimi do të zgjidhet normalisht (me vetinë ok të përgjigjes të caktuar në false nëse përgjigja nuk është në intervalin 200–299), dhe do të refuzohet vetëm në rast të dështimit të rrjetit ose nëse ndonjë gjë e pengon kërkesën të plotësohet. "[1]"
• Përveç nëse fetch() thirret me opsionin credentials të vendosur në include, fetch() Cituar nga MDN:
• Nuk do të dërgojë cookie në kërkesat me origjinë të kryqëzuar.
• Nuk do të caktojë asnjë kuki të dërguar në përgjigje me origjinë të kryqëzuar.

Prezantimi i API-së fetch().

fetch API mbështetet nga shumica e shfletuesve modernë sot. E bën më të lehtë për zhvilluesit të bëjnë kërkesa asinkrone të rrjetit pasi bazohet në premtime, duke shmangur kështu ferrin e kthimit të telefonatave.

Këtu është një shembull i thjeshtë i bërjes së një kërkese GET duke përdorur fetch API.

fetch('https://api.jsonbin.io/v3/b/6360e54a65b57a31e6a94a42')
  .then((res) => res.json())
  .then((data) => console.log(data));

Ju gjithashtu mund të përdorni async ... await në vend të premtimeve, si:

(async () => {
  const res = await fetch('https://api.jsonbin.io/v3/b/6360e54a65b57a31e6a94a42');
  const data = await res.json();
  console.log(data);
})();

Në shembujt e mësipërm, fetch() merr një argument që është shtegu drejt burimit që dëshironi të merrni. Një gjë e rëndësishme për t'u theksuar këtu, përgjigja nuk kthen trupin e përgjigjes JSON, por në vend të kësaj është një paraqitje e të gjithë përgjigjes HTTP ku mund të përdorni .json() për të marrë të dhënat e përgjigjes aktuale JSON.

fetch ofron gjithashtu opsione të ndryshme që mund t'i përdorni për objektin e përgjigjes, si, text() që kthen tekst të papërpunuar, formData(), blob(), etj.

Trajtimi i gabimeve

Kur provova për herë të parë marrjen, përdora .catch() duke supozuar se kodi im do të përfundonte në deklaratën .catch() nëse kërkesa ishte jo 200. Për habinë time, .catch() nuk u ekzekutua kurrë, edhe nëse kërkesa dështoi me një kod përgjigjeje prej 4xx ose 5xx. Siç u përmend më parë në këtë postim.

Për shembull, URL-ja e mëposhtme do të shkaktonte një gabim 404.

fetch('https://api.jsonbin.io/v3/b/6360e54a65b57a31e6a94a4a')
  .then((res) => res.json())
  .then((data) => console.log(data))
  .catch((err) => console.log('Something went wrong'));

Këtu, kodi im nuk printoi Something went wrong. Më vonë, duke iu referuar dokumentacionit zyrtar, rezulton se fetch nuk hedh një gabim nëse serveri kthen një gabim (4xx ose 5xx).

E vetmja herë kur kodi im do të përfundonte në deklaratën e kapjes është kur nuk ka lidhje interneti ose probleme të ngjashme. Ja ku response.ok vjen në shpëtim. Përdorimi i response.ok do të kthehej i vërtetë nëse kodi i statusit të përgjigjes është midis 200-299 tjetër false.

Në shembullin e mësipërm, përdorimi i response.ok për të kontrolluar gjendjen e kërkesës do të kthente false pasi kodi i përgjigjes ishte 404.

(async () => {
  const res = await fetch('https://api.jsonbin.io/v3/b/6360e54a65b57a31e6a94a42');

  if(!res.ok) {
    throw new Error(`'Request failed with status code: ${res.status}`);
  }

  const data = await res.json();

  console.log(data);
})();

Duke i bashkangjitur Titujt e Kërkesave dhe ngarkesën

Në shembujt e mësipërm, ne u përpoqëm t'i merrnim këto regjistrime duke përdorur metodën default GET.

Por, çka nëse dëshironi të dërgoni një kërkesë POST ose PUT së bashku me disa Headers të bashkangjitura?

Ju mund të kaloni headers dhe t'i bashkëngjitni një ngarkesë në kërkesën tuaj fetch ose duke përdorur objektin Headers() ose thjesht mund t'i kaloni këto në një objekt si parametër të dytë tek API fetch si:

(async () => {
  const res = await fetch('https://api.jsonbin.io/v3/b/6360e54a65b57a31e6a94a42', 
  {
    method: 'POST', // *GET, POST, PUT, DELETE, etc.
    mode: 'cors', // no-cors, *cors, same-origin
    headers: { // Request headers
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({"sample": "json"}) // Request payload
  });

  if(!res.ok) {
    throw new Error(`'Request failed with status code: ${res.status}`);
  }
  const data = await res.json();
  console.log(data);
})();

fetch() kundrejt XHR

Ka disa ndryshime midis fetch API dhe kërkesës XHR. Nuk doja t'i përsërisja apo t'i kopjoja këto, pasi vetë mësova për këto dallime nga një "përgjigje Stackoverflow".

Mbështetja e shfletuesit

fetch() API tani ka një mbështetje të mirë të shfletuesit. Këtu është një përmbledhje e shpejtë e Mbështetjes së Shfletuesit nga MDN:

Ju gjithashtu mund të përdorni fetch në NodeJS duke përdorur flamurin --experimental-fetch, ose të përdorni paketën node-fetch ​​nëse është e nevojshme.

Burimet

• "Përdorimi i API-së fetch() në MDN"
• "Merr API kundër XHR"
• "Merrni mbështetjen e shfletuesit API në CanIUse"
• "Hyrje në API të fetch()"