Aproape fiecare proiect trebuie să comunice cu lumea exterioară. Dacă lucrați cu framework-uri JavaScript, cel mai probabil veți utiliza Fetch API pentru a face acest lucru.

Dar când lucrezi cu API-ul, îți amintești sintaxa pe de rost sau ai nevoie de puțin ajutor?

Am scris multe articole despre JavaScript și lucruri conexe doar pentru a mă găsi mai târziu frecvent (re) vizitându-le pentru a-mi reîmprospăta memoria sau pentru a obține un eșantion de cod despre care știu că „este acolo undeva”.

În acest articol, îmi propun să creez o altă resursă de genul acesta. Voi enumera cele mai comune 9 cereri API Fetch.

Sunt sigur că le-ai folosit de multe ori. Dar nu ar fi frumos să eviți să treci prin proiecte vechi pentru a găsi sintaxa acelei cereri specifice pe care ai folosit-o acum jumătate de an? 🙂

De ce să folosiți API-ul Fetch?

În zilele noastre, suntem răsfățați de toate serviciile care oferă SDK-uri frumoase care abstractește cererile API reale. Cerem doar date folosind structuri tipice de limbaj și nu ne pasă de schimbul real de date.

Dar dacă nu există SDK pentru platforma aleasă? Sau ce se întâmplă dacă construiești atât serverul, cât și clientul? În aceste cazuri, trebuie să gestionați solicitările de unul singur. Acesta este modul în care puteți face acest lucru folosind API-ul Fetch.

Solicitare GET simplă cu API-ul Fetch

fetch('{url}')
    .then(response => console.log(response));

Solicitare simplă POST cu API-ul Fetch

fetch('{url}', {
    method: 'post'
})
    .then(response => console.log(response));

GET cu un jeton de autorizare (purtător) în API-ul Fetch

fetch('{url}', {
    headers: {
        'Authorization': 'Basic {token}'
    }
})
    .then(response => console.log(response));

GET cu date de interogare în API-ul Fetch

fetch('{url}?var1=value1&var2=value2')
    .then(response => console.log(response));

OBȚINEȚI cu CORS în API-ul Fetch

fetch('{url}', {
    mode: 'cors'
})
    .then(response => console.log(response));

POST cu jeton de autorizare și date de șir de întrebări în API-ul Fetch

fetch('{url}?var1=value1&var2=value2', {
    method: 'post',
    headers: {
        'Authorization': 'Bearer {token}'
    }
})
    .then(response => console.log(response));

POST cu date de formular în API-ul Fetch

let formData = new FormData();
formData.append('field1', 'value1');
formData.append('field2', 'value2');

fetch('{url}', {
    method: 'post',
    body: formData
})
    .then(response => console.log(response));

POST cu date JSON în API-ul Fetch

fetch('{url}', {
    method: 'post',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        'field1': 'value1',
        'field2': 'value2'
    })
})
    .then(response => console.log(response));

POST cu date JSON și CORS în API-ul Fetch

fetch('{url}', {
    method: 'post',
    mode: 'cors',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        'field1': 'value1',
        'field2': 'value2'
    })
})
    .then(response => console.log(response));

Cum se procesează rezultatele cererii API Fetch

API-ul Fetch returnează un Promisiune. De aceea folosesc mereu .then() și o funcție de apel invers pentru procesarea răspunsului:

fetch(...).then(response => {
    // process the response
}

Dar puteți aștepta rezultatul și dacă vă aflați într-o funcție asincronă:

async function getData(){
    let data = await fetch(...);
    // process the response
}

Acum să aruncăm o privire la modul în care putem extrage datele din răspuns:

Cum se verifică codul de stare al răspunsului Fetch API

Când trimitem solicitări POST, PATCH și PUT, suntem de obicei interesați de codul de stare de returnare:

fetch(...)
    .then(response => {
        if (response.status == 200){
            // all OK
        } else {
            console.log(response.statusText);
        }
    });

Cum se obține o valoare simplă a răspunsului Fetch API

Unele puncte finale API pot trimite înapoi un identificator al unei noi înregistrări de baze de date care a fost creată folosind datele dvs.:

var userId;

fetch(...)
    .then(response => response.text())
    .then(id => {
        userId = id;
        console.log(userId)
    });

Cum se convertesc datele JSON ale răspunsului Fetch API

Dar, în majoritatea cazurilor, veți primi date JSON în corpul răspunsului:

var dataObj;

fetch(...)
    .then(response => response.json())
    .then(data => {
        dataObj = data;
        console.log(dataObj)
    });

Rețineți că puteți accesa datele numai după ce ambele promisiuni sunt rezolvate. Acest lucru este uneori puțin confuz, așa că prefer mereu să folosesc metode asincronizate și să aștept rezultatele:

async function getData(){
    var dataObj;

    const response = await fetch(...);
    const data = await response.json();
    dataObj = data;
    console.log(dataObj);
}

Concluzie

Aceste mostre ar trebui să te asigure în majoritatea situațiilor.

Am pierdut ceva, o cerere pe care o folosiți zilnic? Sau altceva cu care te lupți? Anunță-mă Stare de nervozitate, și o voi acoperi într-un alt articol 🙂

Oh, și puteți obține această fișă de cheats într-un de asemenea, formular tipărit.