Introducere să-i aducă

La revedere, XMLHttpRequest!

fetch () vă permite să faceți cereri, similar cu XMLHttpRequest (XHR). Principala diferență este că Fetch API utilizează Promisiuni (Promise). care permit utilizarea API mai simplu și curat, evitând numărul catastrofal de callback, și necesitatea de a aminti API pentru XMLHttpRequest.

Preluați API-ul disponibil pentru utilizatorii cu Serviciul muncitorului în domeniul global în Chrome 40, dar în versiunea de 42 devine disponibilă în fereastra Domeniu de aplicare. Desigur, pentru toate celelalte browsere care nu există încă nu acceptă preluarea Polyphemus de la GitHub. care este disponibil în prezent.

Simplu Fetch cerere

Să începem cu o comparație a unui exemplu simplu, pus în aplicare cu XMLHttpRequest și aducă. Tot ceea ce facem în acest exemplu - face o cerere la URL-ul, și analiza reacția l ca JSON.

XMLHttpRequest

Exemplul cu XMLHttpRequest, va trebui să se stabilească două manipulare eveniment pe succesul și eroarea. precum și pentru că două metode: deschise () și trimite (). Un exemplu al documentației MDN:

fetch Cererea noastra ar arata astfel:

Primul lucru pe care am verifica starea răspunsului și a verifica dacă executa cu succes o interogare (200 se așteaptă starea). Dacă totul este bine, apoi analiza reacția ca JSON.

fetch () este obiectul Stream-răspuns. Acest lucru înseamnă că, ca urmare a metodei de asteptare JSON (), vom obține Promise, ca citirea de la un obiect asemănător este asincron.

metadate răspuns

În exemplul anterior, am învățat cum să verifice starea obiectului de răspuns și konventirovat răspuns propriu în JSON. Restul metadatelor, pe care le puteți accesa (de exemplu, titluri), sunt enumerate mai jos:

tipuri de raspuns

Când am preluat-cerere tip de răspuns de «bază» va fi dat, «cori» sau «opace». Aceste „tipuri“ indică cu ceea ce a venit de date de resurse și pot fi utilizate pentru a determina prelucrarea datelor.

Atunci când se face o cerere la o resursă situată pe aceeași origine (ceea ce înseamnă că cererea este realizată într-un singur site. Aprox. Per.) Răspunsul va conține tipul „de bază“, și o astfel de solicitare nu va avea nicio restricție.

În cazul în care se face o cerere de la unul la altul origin'a (cerere site-ul cruce), care, la rândul său, a revenit antete CORS, în timp ce tip va fi «CORS». Obiecte ale tipurilor «CORS» și «bază» aproape identice, dar «cori» oarecum limitează metadatele, care pot fi accesate la «Cache-Control», «Content-Language», «Content-Type», «Expiră», «Last-Modified» și «Pragma».

În ceea ce privește «opace» - el vine în cazurile în care o cerere CORS, dar la distanță de resurse nu întoarce antete CORS. Acest tip de interogare nu oferă acces la date sau starea din titlu, astfel încât nu putem judeca rezultatul interogării. În conformitate cu punerea în aplicare actuală a fetch () nu este posibil să se efectueze cereri CORS din fereastra Domeniul de aplicare, și de aceea este scris aici. Această funcționalitate ar trebui să fie adăugate imediat ce API-ul Cache va fi disponibil de la al ferestrei.

Puteți defini modul de solicitare de așteptat, filtrând rezultatele interogării cu tipul greșit. Modul de interogare poate fi setat pentru următoarele:

- „aceeași origine“ reușește numai pentru cererile de aceeași origine, toate celelalte solicitări vor fi respinse.
- „CORS“ funcționează în același mod ca și «aceeași origine» + adaugă capacitatea de a crea interogări la site-uri terțe părți, dacă se întorc antetele CORS corespunzătoare.
- „CORS-cu-forțat-Preflight“ funcționează la fel ca «CORS», dar înainte de cererea este întotdeauna trimite o solicitare de sondă pentru revizuire.
- „no-CORS“ este utilizat atunci când doriți să interogare originea, care nu trimite antete CORS, iar rezultatul de executie este un obiect de tip «opace». După cum sa menționat mai sus, în momentul în care acest lucru nu este posibil în fereastra Domeniu de aplicare.

Pentru a defini un mod de interogare, adăugați opțiuni obiect al doilea parametru la solicitarea și setați «modul» în acest obiect:

lanțuri Promisiuni

Una dintre caracteristicile frumos este abilitatea de a Promise'ov grupa în lanțuri. Dacă vorbim despre ele în domeniul de aplicare fetch (). ne permit să „neîndemânatic“ logică între cereri.

Dacă lucrați cu JSON API, va trebui să verificați starea și analiza JSON pentru fiecare răspuns. Puteți simplifica codul prin identificarea statutului și JSON parsing ca funcții separate, care returnează Promise'y. Veți avea nevoie să se gândească numai cu privire la prelucrarea datelor în sine și, desigur, excepții.

Vom defini o funcție care verifică response.status și returnează rezultatul: Promise.resolve () sau Promise.reject (). Aceasta este prima metodă numită în lanțul nostru, și dacă reușește (Promise.resolve ()), apoi l-au numit metoda următoare - fetch (). care, la rândul său, se întoarce din nou Promisiunea response.json (). După acest apel, dacă are succes, vom fi gata obiect JSON. Dacă parsare eșuează, Promise va fi anulată și starea de lucru a excepției.

cerere POST

Acesta a fost mult timp nu este nevoie surpriza de a utiliza metoda POST pentru a transfera parametrii în „organism“ al cererii de a lucra cu API.
Pentru a efectua o astfel de solicitare, trebuie să specificați opțiunile corespunzătoare din setările obiect fetch ():

scrisorile de acreditare a trimite cererea prin Fetch-

Dacă doriți să trimiteți o cerere la orice scrisorile de acreditare (de exemplu, cookie), ar trebui să setați `credentials` în opțiuni la cerere«includ»:

Pot anula) interogarea fetch (?
În momentul de față, este imposibil, dar se discută în mod activ pe GitHub

Există Polifem?
da

De ce «no-CORS» pus în aplicare pentru lucrătorii de serviciu, dar nu pentru fereastra?
Acest lucru a fost făcut din motive de securitate. Mai multe detalii pot fi găsite aici.