$lang['tuto'] = "opplæringsprogrammer"; ?>$lang['tuto'] = "opplæringsprogrammer"; ?> Sende en API POST-forespørsel med JavaScript ved å bruke

Sende en API POST-forespørsel med JavaScript ved å bruke Fetch

Alice Dupont
Søndag 29. september 2024 03:08:14
API Authentication

Forstå hvordan du sender en API POST-forespørsel med Fetch

Sender en er avgjørende for datadeling og autentisering mens du bruker APIer. Det er en pålitelig måte å sende HTTP-forespørsler på hvis du vet hvordan du bruker JavaScript og teknikk. Men det kan av og til være uklart å konstruere forespørselen nøyaktig, spesielt når du arbeider med overskrifter som f.eks .

For å autentisere i dette tilfellet må du sende en til et API-endepunkt. Det nevnte endepunktet krever en spesifikk struktur, som består av en hashet legitimasjon og en . Likevel oppstår det ofte feil som ligner på den du opplever, spesielt når du bruker eksterne API-er som har strenge formateringskrav.

Denne artikkelen vil demonstrere hvordan du lager en ved å bruke metode riktig. Vi vil diagnostisere mulige problemer og demonstrere riktig overskriftsformat for å forhindre vanlige feil som "500 Internal Server Error" som du opplevde.

Når du er ferdig, vet du nøyaktig hvordan du setter sammen og sender inn en JavaScript , som vil garantere at API-en blir kontaktet og returnerer de nødvendige dataene.

Kommando Eksempel på bruk
fetch() En server kan kontaktes via HTTP-forespørsler ved å bruke get()-funksjonen. Den brukes til å sende inn en POST-forespørsel til API-endepunktet i dette tilfellet.
Authorization Når du sender inn et API-kall, sendes bærer-tokenet – som består av hashet-legitimasjonen og API-nøkkelen – via autorisasjonsoverskriften for å lette autentiseringen.
async/await Brukes til å administrere kode som er asynkron på en mer forståelig måte. Et løfte returneres av asynkrone funksjoner, og utførelsen settes på pause til løftet er oppfylt.
response.ok Denne parameteren bestemmer om HTTP-forespørselen (statuskode 200–299) var vellykket. For å håndtere feiltilfeller på riktig måte, sendes det en feil hvis svaret ikke er akseptabelt.
response.json() Brukes for å analysere API-svarets JSON-kropp. Den lager et JavaScript-objekt fra svarstrømmen.
throw new Error() Sender en tilpasset feilmelding i tilfelle API-svaret mislykkes. Dette gir presise meldinger, noe som letter mer effektiv feilhåndtering.
console.assert() Console.assert() er et verktøy som brukes for feilsøking og testing som hjelper til med å bekrefte gyldigheten av hentemetoden i tester ved kun å logge en melding hvis den angitte påstanden er usann.
Content-Type Formatet til forespørselsteksten er spesifisert i Content-Type-overskriften, som sørger for at API-en kan forstå dataene (applikasjon/json i dette tilfellet).
try/catch Brukes i asynkrone rutiner for å håndtere feil. Kode som kan forårsake en feil finnes i try-blokken, og eventuelle feil som oppstår håndteres i catch-blokken.

Forstå JavaScript Fetch API for POST-forespørsler

Hovedfokuset for skriptene som leveres er å sende en til et API som bruker JavaScript metode. Sende de riktige overskriftene – spesielt header, som inneholder både en API-nøkkel og hashet-legitimasjon – er fortsatt den primære utfordringen. Disse dataene forventes av APIen som et bærertoken, som deretter overføres til serveren for autentisering. Sensitive data, for eksempel legitimasjon, er kryptert og beskyttet når du kommuniserer mellom klienten og serveren ved hjelp av denne populære autentiseringsteknikken.

Når det gjelder å sende HTTP-forespørsler, er hentemetoden veldig fleksibel. Den grunnleggende hentestrukturen brukes i det første skripteksemplet, der er satt til 'POST'. Dette indikerer til APIen at data sendes i stedet for å hentes. I dette tilfellet objektet er viktig siden det inneholder autorisasjonsfeltet, som er dit bærertokenet sendes. 'Content-Type: application/json' er også inkludert for å informere serveren om at dataene blir overført i JSON-format. Feil kan skyldes serverens feilaktige tolkning av forespørselen i fravær av dette.

For å gjøre koden mer forståelig og renere, introduserer vi syntaks i det andre skriptet. Denne metoden hjelper til med å svare på forespørsler som er asynkrone. Vi bruker en blokk i stedet for lenke løfter ved hjelp av og fange(). Dette gjør koden enklere å vedlikeholde og effektiviserer feilhåndtering. Hvis det er et problem med API-svaret, identifiserer vi det og registrerer en grundig melding. Dette er spesielt nyttig for feilsøking av feil som "500 Internal Server Error" som oppstod under den første forespørselen.

Hentelogikken er delt inn i sin egen funksjon i den tredje løsningen, som tar i bruk en mer modulær strategi og gjør den gjenbrukbar. Vi implementerer også en enkel enhetstest som bruker for å finne ut om svaret på hentingsforespørselen er riktig. Du kan raskt endre funksjonen til å bruke alternative API-endepunkter eller autentiseringsteknikker takket være dens modulære struktur. På grunn av dens innebygde feilhåndteringsfunksjoner, kan applikasjonen likevel gi innsiktsfull tilbakemelding selv i tilfelle forespørselen mislykkes.

Bruke Fetch for å sende en API POST-forespørsel med autorisasjon

Dette eksemplet viser deg hvordan du bruker JavaScript metode for å sende en POST-forespørsel med autorisasjonshoder og passende feilhåndtering.

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

Håndtering av autorisasjons- og forespørselsfeil med Fetch

Denne metoden sikrer pålitelig API-kommunikasjon ved å forbedre feilhåndtering og gi grundig tilbakemelding når forespørsler mislykkes.

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

Modulær tilnærming med henting og enhetstesting

Denne modulære tilnærmingen inkluderer en enkel enhetstest for å verifisere henteforespørselen og deler logikk inn i funksjoner.

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

Utvider API-autentisering og feilhåndtering i hentingsforespørsler

Å jobbe med API-er krever en forståelse av hvordan overskrifter og tokens administreres, spesielt for de som krever det . Det er vanlig å bruke en bærer-token i header for API-forespørselen du prøver å utføre. Ved å overføre kryptert legitimasjon, muliggjør denne teknikken sikker tilkobling mellom klienten din og API. Din hashed-legitimasjon og API-nøkkel er vanligvis inkludert i bærertokenet. Den må formateres riktig for å forhindre problemer som 500 intern serverfeil du opplevde.

Et avgjørende element ved å sende inn POST-forespørsler ved hjelp av bekrefter at API-en er i stand til å motta det bestemte formatet og typen data du oppgir. For å bidra til å sikre at serveren leser innholdet i forespørselen på riktig måte, kan du bruke 'Content-Type: application/json'. Noen ganger kan API-er trenge ekstra felt i POST-forespørselsteksten, inkludert skjemadata eller spørringsparametere, som kanskje ikke var tydelig fra dokumentasjonen til å begynne med.

Å utvikle pålitelige programmer som kommuniserer med eksterne API-er krever nøye vurdering av feilhåndtering. Du kan ha flere problemer i tillegg til 500-feilen, for eksempel 404-feil eller 400-feil relatert til feil data eller feil endepunkter. Bruk av en blokk, sammen med omfattende feilmeldinger og loggsystemer i koden din, kan hjelpe deg med å diagnostisere og løse disse problemene. Før du inkorporerer forespørsler i koden din, er det alltid en god idé å teste dem med programmer som Postman eller Curl for å sikre at alt fungerer som det skal.

  1. Hva er et bærertegn, og hvorfor er det viktig?
  2. En type autentiseringsteknikk som brukes for å beskytte API-kommunikasjon er bærertoken. For å sikre at serveren vet hvem som gjør forespørselen, sendes den gjennom overskriften i forespørselen din.
  3. Hvorfor får jeg en 500 intern serverfeil?
  4. En 500-feil antyder et problem med serveren. I ditt tilfelle kan dette være et resultat av feilaktige data som er gitt til API-en eller feil formatering av overskrift.
  5. Hvordan kan jeg håndtere feil i en hentingsforespørsel?
  6. For å hjelpe til med feilsøking, bruk en blokk i en funksjon for å oppdage eventuelle feil og vise dem med .
  7. Hva gjør "Content-Type"-overskriften?
  8. Typen data du overfører til serveren indikeres av overskrift. brukes vanligvis til å overføre data i JSON-format.
  9. Kan jeg gjenbruke hentefunksjonen på tvers av forskjellige APIer?
  10. Ja, du kan enkelt gjenbruke hentefunksjonen for flere APIer ved å gjøre den modulær og oppgi overskriftene, brødteksten og API-endepunktet som argumenter.

Arbeid med eksterne tjenester krever at du lærer hvordan du bruker JavaScript til å sende API POST-forespørsler. Du kan øke sjansene dine for å komme med autentiserte forespørsler betraktelig ved å håndtere feil på riktig måte, og sørge for at header er inkludert, og organisering av metode.

Feil som 500 Internal Server Error indikerer ofte problemer med formateringen av dataene eller forespørselsstrukturen. Slike problemer er enkle å fikse med nøye overskriftsadministrasjon og grundig feilmeldingsfeilsøking.

  1. Detaljer om hvordan du strukturerer en POST-forespørsel med henting i JavaScript, inkludert håndtering av autorisasjonshoder: MDN Web Docs - Hent API
  2. API-dokumentasjon som gir veiledning om hvordan du autentiserer med Bearer-tokens ved å bruke en POST-forespørsel: Priaid Autentiseringstjeneste
  3. Omfattende ressurs om feilhåndtering for JavaScript-forespørsler, med fokus på vanlige problemer som 500 Internal Server Error: MDN Web Docs - HTTP 500-statuskode