Obținerea de date de pe server prin preluarea
In acest tutorial, ne vom uita la ceea ce este preluat și modul în care diferă de la XMLHttpRequest. Fetch - Această XMLHttpRequest îmbunătățire, care în mod implicit utilizează PROMIS și mai mult API-ul simplu și curat.
Trebuie remarcat imediat că fetch nu este acceptat de toate browserele. De exemplu, în IE 10-11 nu a funcționat. În Safari, funcționează cu versiunea 10. Desigur, există Polyphemus, care utilizează XMLHttpRequest cu browsere mai vechi pentru el.
Pentru a obraschatsya server pentru date, să creeze API-ul cu datele de testare folosind serviciul mocky.io.
Aici am o JSON
Introduceți-l în cererea corpului și modul de avans, selectați
Pentru orice domeniu ar putea obraschatsya la acest API.
Faceți clic pe Generare de răspuns și a obține un link către API-ul nostru.
Acum, să scrie o interogare, folosind instrumentul, ceea ce ne va permite pentru a obține datele.
Una dintre nuanță în fetch, că noi nu ajunge direct în datele de răspuns, și Stream-obiect. Acest lucru înseamnă că ar trebui să fie răspunsul nostru pentru a analiza, pentru a obține datele.
Aici vom folosi .json metoda pentru a analiza reacția ca JSON. Rezultatul este, de asemenea, un apel .json PROMIS, așa că trebuie să scrie apoi, în care vom obține rezultatul. Dacă ne uităm în browser-ul, avem consola de date.
Acest cod puteți scrie un pic mai curat, apoi împărțirea la 2 design și evitând cuiburi adânci
Dacă ne uităm în browser-ul, codul nostru funcționează la fel de bine.
În preluarea datelor de multe ori au erori și trebuie să se ocupe într-un fel. Fetch cu aceasta, există nuanțe. De obicei, cred că, dacă scrie .catch, ceva pentru a prinde orice erori.
Vom prinde declarație adăugată, dar cu o specificație fetch spune că nu va include numai erori de rețea. Care este conectat cu rețeaua. De exemplu, se desprinde atunci când solicitarea privind timeout.
Dacă vrem să prindem greșelile obișnuite, acestea trebuie să fie prelucrate în primul bloc .Apoi. Și, din moment ce lucrăm cu Promise, le putem a fost rezolvată, iar respingerile atunci când vrem
Am adăugat încă un bloc pentru a rezolva și de a respinge, care vă permite să faceți munca noastră aduc în mod corespunzător. Nici unul dintre următoarele, atunci va eșua eroare, și cădem imediat în închizător.
Acum putem face o 2 Funcția a lanțului, deoarece acestea trebuie să fie aceeași în toate utilizările de fetch.
Dacă, de exemplu, ar dori să facă o cerere POST, este suficient pentru a specifica metoda de post. Putem adăuga, de asemenea, un organism, dorim să transmitem în interogare.
După cum putem vedea, prelua mult mai flexibilă decât XMLHttpRequest. Datorită utilizării PROMIS ne permite să combine codul așa cum avem nevoie.
Și, deși multe companii deja ispolyut aduc Vreau să anunțe o serie de dezavantaje, pe care le văd.
- Codul obține încă o mulțime și trebuie să scrie un înveliș în jurul unei preluări, era convenabil de a folosi
- Parsarea de date nu este deosebit de util dacă am obține de la server este întotdeauna JSON, iar codul trebuie să scrie
- Dacă doriți să transmită date către corpul sub forma obiectului, va trebui să apela obiect JSON.stringify, care este incomod
- eroare de manipulare în fetch, atunci când nu toate erorile se încadrează în captura eu personal nu-mi place. Pentru mine, este logic ca toate erorile se încadrează întotdeauna în captură
Am o soluție la aceste întrebări? Eu prefer să folosesc biblioteca sau superagent Axios, în cazul în care toate aceste probleme au fost rezolvate și necesitatea de a scrie cod mimimum. Prin urmare, dacă aveți posibilitatea de a alege care tehnologia de a utiliza, încercați aceste biblioteci.
1 lună în urmă