„JavaScript Fetch“ API pamoka su „JS Fetch Post“ ir antraštės pavyzdžiais

Jei rašote žiniatinklio programą, greičiausiai turėsite dirbti su išoriniais duomenimis. Tai gali būti jūsų pačių duomenų bazė, trečiųjų šalių API ir pan.

Kai AJAX pirmą kartą pasirodė 1999 m., Ji parodė mums geresnį būdą kurti žiniatinklio programas. AJAX buvo svarbiausias žiniatinklio plėtros etapas ir yra pagrindinė daugelio šiuolaikinių technologijų, tokių kaip „React“, koncepcija.

Prieš AJAX turėjote iš naujo pateikti visą tinklalapį, kad galėtumėte atlikti nedidelius atnaujinimus. Bet AJAX suteikė mums būdą, kaip paimti turinį iš vidinės programos ir atnaujinti pasirinktus vartotojo sąsajos elementus. Tai kūrėjams padėjo pagerinti vartotojo patirtį ir sukurti didesnes, sudėtingas interneto platformas.

Avarijos kursas apie REST API

Dabar esame RESTful API amžiuje. Paprasčiau tariant, REST API leidžia jums stumti ir traukti duomenis iš duomenų saugyklos. Tai gali būti jūsų duomenų bazė arba trečiosios šalies serveris, pvz., „Twitter“ API.

Yra keletas skirtingų tipų REST API. Pažvelkime į tuos, kuriuos naudosite daugeliu atvejų.

  • GET  - gaukite duomenis iš API. Pavyzdžiui, gaukite „Twitter“ vartotoją pagal jo vartotojo vardą.
  • POST  - perduokite duomenis į API. Pavyzdžiui, sukurkite naują vartotojo įrašą su vardu, amžiumi ir el. Pašto adresu.
  • PUT  - atnaujinkite esamą įrašą naujais duomenimis. Pavyzdžiui, atnaujinkite vartotojo el. Pašto adresą.
  • DELETE  - pašalinkite įrašą. Pavyzdžiui, ištrinkite vartotoją iš duomenų bazės.

Kiekvienoje REST API yra trys elementai. Užklausa, atsakymas ir antraštės.

Užklausa  - tai duomenys, kuriuos siunčiate į API, pvz., Užsakymo ID, kad būtų galima gauti išsamią užsakymo informaciją.

Atsakymas  - visi duomenys, kuriuos gaunate iš serverio po sėkmingos / nepavykusios užklausos.

Antraštės  - papildomi metaduomenys, perduodami API, kad padėtų serveriui suprasti, kokio tipo užklausą jis nagrinėja, pavyzdžiui, „content-type“.

Tikrasis REST API naudojimo pranašumas yra tas, kad galite sukurti vieną API sluoksnį kelioms programoms dirbti.

Jei turite duomenų bazę, kurią norite tvarkyti naudodamiesi žiniatinklio, mobiliojo ir darbalaukio programa, jums tereikia vieno REST API sluoksnio.

Dabar, kai žinote, kaip veikia „REST“ API, pažiūrėkime, kaip galime jas vartoti.

XMLHttpRequest

Prieš JSON užvaldant pasaulį, pagrindinis keitimosi duomenimis formatas buvo XML. XMLHttpRequest () yra „JavaScript“ funkcija, leidžianti gauti duomenis iš API, kurios grąžino XML duomenis.

„XMLHttpRequest“ suteikė mums galimybę gauti XML duomenis iš vidinės programos neperkraunant viso puslapio.

Ši funkcija išaugo nuo pat pradžių, kai buvo tik XML. Dabar jis palaiko kitus duomenų formatus, pvz., JSON ir paprastąjį tekstą.

Parašykime paprastą XMLHttpRequest iškvietimą į „GitHub“ API, kad gautumėte mano 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.

Ankstesnis kodas išsiųs GET užklausą adresu //api.github.com/users/manishmshiva, kad gautų „GitHub“ informaciją JSON. Jei atsakymas buvo sėkmingas, jis konsolėje atspausdins šį JSON:

Jei užklausa nepavyko, ji atspausdins šį klaidos pranešimą į konsolę:

Gauti API

„Fetch“ API yra paprastesnė, lengvai naudojama „XMLHttpRequest“ versija, kad asinchroniškai būtų naudojami ištekliai. „Fetch“ leidžia jums dirbti su REST API su papildomomis parinktimis, tokiomis kaip duomenų talpykla, srautinių atsakymų skaitymas ir dar daugiau.

Pagrindinis skirtumas yra tas, kad „Fetch“ dirba su pažadais, o ne su atgaliniais skambučiais. Įvedę pažadus „JavaScript“ kūrėjai tolino nuo atgalinių skambučių.

Jei naudojate sudėtingą programą, galite lengvai įprasti rašyti atgalinius skambučius, vedančius atgalinio skambučio pragaru.

Gavus pažadus, lengva rašyti ir tvarkyti asinchronines užklausas. Jei žadate pažadus, čia galite sužinoti, kaip jie veikia.

Štai kaip atrodė anksčiau parašyta funkcija, jei vietoj XMLHttpRequest naudosite „fetch“):

// 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

Pirmasis funkcijos „Fetch“ parametras visada turėtų būti URL. Tada „Fetch“ paima antrą JSON objektą su tokiomis parinktimis kaip metodas, antraštės, užklausos turinys ir pan.

Yra svarbus skirtumas tarp XMLHttpRequest ir Fetch atsakymo objekto.

„XMLHttpRequest“ pateikia duomenis kaip atsakymą, o „Fetch“ atsakymo objekte yra informacijos apie patį atsakymo objektą. Tai apima antraštes, būsenos kodą ir tt Mes vadiname „res.json ()“ funkciją, kad gautume reikiamus duomenis iš atsako objekto.

Kitas svarbus skirtumas yra tas, kad „Fetch“ API neišmes klaidos, jei užklausa pateiks 400 arba 500 būsenos kodą. Jis vis tiek bus pažymėtas kaip sėkmingas atsakymas ir perduotas funkcija „tada“.

„Fetch“ pateikia klaidą tik tada, kai nutraukiama pati užklausa. Norėdami tvarkyti 400 ir 500 atsakymų, galite parašyti pasirinktinę logiką naudodami „response.status“. „Status“ ypatybė suteiks jums grąžinto atsakymo būsenos kodą.

Puiku. Dabar, kai suprantate, kaip veikia „Fetch“ API, pažvelkime dar į keletą pavyzdžių, tokių kaip duomenų perdavimas ir darbas su antraštėmis.

Darbas su antraštėmis

Galite praleisti antraštes naudodami ypatybę „antraštės“. Taip pat galite naudoti antraščių konstruktorių, kad geriau struktūrizuotumėte savo kodą. Tačiau daugeliu atvejų JSON objekto perdavimas nuosavybei „antraštės“ turėtų būti naudingas.

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));

Duomenų perdavimas POST užklausai

Norėdami gauti POST užklausą, galite naudoti ypatybę „body“, kad perduotumėte JSON eilutę kaip įvestį. Atkreipkite dėmesį, kad užklausos turinys turėtų būti JSON eilutė, o antraštės - JSON objektas.

// 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 vis dar aktyviai kuriama. Artimiausiu metu galime tikėtis geresnių funkcijų.

Tačiau dauguma naršyklių palaiko „Fetch“ naudojimą jūsų programose. Žemiau pateikta diagrama turėtų padėti išsiaiškinti, kurios naršyklės ją palaiko žiniatinklyje ir programose mobiliesiems.

Tikiuosi, kad šis straipsnis padėjo suprasti, kaip dirbti su „Fetch“ API. Būtinai išbandykite „Fetch“ savo kitai žiniatinklio programai.

Aš reguliariai rašau apie mašininį mokymąsi, kibernetinį saugumą ir „DevOps“. Galite užsiregistruoti mano savaitiniam naujienlaiškiui čia.