Pošiljanje zahteve API POST z JavaScriptom s funkcijo Fetch

Razumevanje, kako poslati zahtevo API POST s funkcijo Fetch

Pošiljanje a POST zahteva je bistvenega pomena za skupno rabo podatkov in avtentikacijo med uporabo API-jev. To je zanesljiv način za pošiljanje zahtev HTTP, če znate uporabljati JavaScript in prinesi () tehnika. Toda natančno sestavljanje zahteve je lahko občasno nejasno, zlasti pri delu z glavami, kot je npr Pooblastilo.

Za avtentikacijo v tem primeru morate poslati a POST zahteva na končno točko API. Zgoraj omenjena končna točka zahteva posebno strukturo, ki jo sestavljajo zgoščene poverilnice in API ključ. Kljub temu se pogosto pojavljajo napake, podobne tisti, ki jo doživljate vi, zlasti pri uporabi zunanjih API-jev, ki imajo stroge zahteve glede oblikovanja.

Ta članek bo pokazal, kako narediti a POST zahteva z uporabo prinesi () pravilno metodo. Diagnosticirali bomo morebitne težave in prikazali pravilno obliko glave, da preprečimo pogoste napake, kot je '500 Notranja napaka strežnika', ki ste jo doživeli.

Ko boste končali, boste natančno vedeli, kako sestaviti in poslati JavaScript pridobi POST zahtevo, ki bo zagotovil, da bo API uspešno vzpostavil stik in vrnil potrebne podatke.

Razumevanje JavaScript Fetch API za zahteve POST

Glavni poudarek priloženih skriptov je na pošiljanju a POST zahteva v API z uporabo JavaScripta prinesi () metoda. Pošiljanje ustreznih glav - zlasti Pooblastilo glava, ki vsebuje tako ključ API kot zgoščene poverilnice, ostaja glavni izziv. Te podatke API pričakuje kot nosilni žeton, ki se nato posreduje strežniku za preverjanje pristnosti. Občutljivi podatki, kot so poverilnice, so šifrirani in zaščiteni pri komunikaciji med odjemalcem in strežnikom s to priljubljeno tehniko preverjanja pristnosti.

Ko gre za pošiljanje zahtev HTTP, je metoda pridobivanja zelo prilagodljiva. Osnovna struktura pridobivanja je uporabljena v prvem primeru skripta, kjer je metoda je nastavljen na 'POST'. To API-ju nakazuje, da se podatki pošiljajo in ne pridobivajo. V tem primeru je glave je bistvenega pomena, saj vsebuje polje za avtorizacijo, kamor se pošlje žeton nosilca. Vključen je tudi 'Content-Type: application/json', ki obvesti strežnik, da se podatki prenašajo v formatu JSON. Napake lahko nastanejo zaradi nepravilne razlage zahteve s strani strežnika, če tega ni.

Da bo koda bolj razumljiva in čistejša, uvajamo async/počakaj sintakso v drugi skripti. Ta metoda pomaga pri odgovarjanju na zahteve, ki so asinhrone. Uporabljamo a poskusiti/ujeti blok namesto veriženja obljub z uporabo potem () in ulov(). To olajša vzdrževanje kode in poenostavi obravnavo napak. Če pride do težave z odzivom API-ja, jo prepoznamo in posnamemo temeljito sporočilo. To je še posebej koristno pri odpravljanju napak, kot je '500 Notranja napaka strežnika', do katere je prišlo med prvotno zahtevo.

Logika pridobivanja je razdeljena na lastno funkcijo v tretji rešitvi, ki sprejme bolj modularno strategijo in omogoča ponovno uporabo. Izvajamo tudi preprost test enote, ki uporablja console.assert() da ugotovi, ali je odgovor na zahtevo za pridobivanje pravilen. Funkcijo lahko hitro spremenite tako, da uporablja alternativne končne točke API-ja ali tehnike preverjanja pristnosti, zahvaljujoč njeni modularni strukturi. Zaradi vgrajenih zmožnosti obravnavanja napak lahko aplikacija kljub temu ponudi pronicljive povratne informacije tudi v primeru, da je zahteva neuspešna.

// Solution 1: Simple Fetch API with Authorization
const apiKey = 'your_api_key';
const hashedCredentials = 'your_hashed_credentials';
const url = 'https://authservice.priaid.ch/login?format=json';

fetch(url, {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${apiKey}:${hashedCredentials}`,
    'Content-Type': 'application/json'
  }
})
.then(response => {
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
})
.then(data => console.log('Success:', data))
.catch(error => console.error('Error:', error));

// Solution 2: Fetch with Detailed Error Handling
async function postData() {
  const apiKey = 'your_api_key';
  const hashedCredentials = 'your_hashed_credentials';
  const url = 'https://authservice.priaid.ch/login?format=json';
  
  try {
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${apiKey}:${hashedCredentials}`,
        'Content-Type': 'application/json'
      }
    });
    
    if (!response.ok) {
      throw new Error(`Error ${response.status}: ${response.statusText}`);
    }
    
    const data = await response.json();
    console.log('Success:', data);
  } catch (error) {
    console.error('Fetch Error:', error.message);
  }
}
  
postData();

// Solution 3: Modular Fetch Function with Unit Test
const fetchData = async (apiKey, hashedCredentials) => {
  const url = 'https://authservice.priaid.ch/login?format=json';
  
  try {
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${apiKey}:${hashedCredentials}`,
        'Content-Type': 'application/json'
      }
    });
    
    if (!response.ok) {
      throw new Error(`Error ${response.status}: ${response.statusText}`);
    }
    
    return await response.json();
  } catch (error) {
    return { success: false, message: error.message };
  }
};

// Unit Test
const testFetchData = async () => {
  const result = await fetchData('your_api_key', 'your_hashed_credentials');
  console.assert(result.success !== false, 'Test Failed: ', result.message);
  console.log('Test Passed:', result);
};

testFetchData();

Razširitev avtentikacije API-ja in obravnavanja napak v zahtevah za pridobitev

Delo z API-ji zahteva razumevanje načina upravljanja glav in žetonov, zlasti za tiste, ki to zahtevajo avtentikacija. Običajno je uporaba žetona Bearer v Pooblastilo za zahtevo API, ki jo poskušate izvesti. S prenosom šifriranih poverilnic ta tehnika omogoča varno povezavo med vašo stranko in API-jem. Vaše zgoščene poverilnice in ključ API-ja so običajno vključeni v žeton nosilca. Mora biti ustrezno formatiran, da preprečite težave, kot je interna napaka strežnika 500, ki ste jo doživeli.

Ključni element pošiljanja zahtev POST z uporabo prinesi () preverja, ali je API sposoben sprejeti določeno obliko in vrsto podatkov, ki jih posredujete. Če želite zagotoviti, da strežnik ustrezno prebere telo vaše zahteve, lahko uporabite »Content-Type: application/json«. Občasno lahko API-ji potrebujejo dodatna polja v telesu zahteve POST, vključno s podatki obrazca ali parametri poizvedbe, kar morda sprva ni bilo razvidno iz dokumentacije.

Razvijanje zanesljivih programov, ki komunicirajo z zunanjimi API-ji, zahteva natančno preučitev upravljanja napak. Morda imate poleg napake 500 dodatne težave, kot so napake 404 ali napake 400, povezane z neustreznimi podatki ali napačnimi končnimi točkami. Uporaba a poskusiti/ujeti blok, skupaj z izčrpnimi sporočili o napakah in sistemi beleženja v vaši kodi, lahko pomaga pri diagnosticiranju in reševanju teh težav. Preden zahteve vključite v svojo kodo, je vedno dobro, da jih preizkusite s programi, kot sta Postman ali Curl, da se prepričate, da vse deluje, kot bi moralo.