Ud over den indbyggede fetch()-funktion findes der flere tredjepartsbiblioteker til at foretage HTTP-forespørgsler i JavaScript. Et af de mest populære biblioteker er Axios ( Axios Docs). Disse biblioteker tilbyder yderligere funktioner og fordele, som kan forenkle arbejdet med API'er og forbedre læsbarheden af koden.

Hvorfor bruge Axios eller andre biblioteker frem for den indbyggede fetch()?

Selvom fetch()-API'et er kraftfuldt, har det nogle begrænsninger, som tredjepartsbiblioteker som Axios adresserer:

• Automatisk JSON-parsing: Axios parser automatisk JSON-svar, hvorimod du med fetch() manuelt skal kalde response.json();
• Timeouts: Axios giver mulighed for at angive timeouts for forespørgsler, hvilket ikke understøttes direkte af fetch();
• Request- og response-interceptorer: Axios tilbyder interceptorer, der gør det muligt at køre funktioner før en forespørgsel sendes eller efter et svar modtages, hvilket er nyttigt til f.eks. at tilføje autentificeringstokens eller logge forespørgsler;
• Mere enkel syntaks: Axios har en mere enkel og ensartet syntaks til at foretage forespørgsler og håndtere svar;
• Understøttelse af ældre browsere: Axios har indbygget understøttelse af ældre browsere, som muligvis ikke fuldt ud understøtter den indbyggede fetch()-API.

Grundlæggende brug af Axios

Axios tilbyder en enkel syntaks til at foretage både GET- og POST-forespørgsler. Det returnerer Promises, ligesom fetch(), men håndterer nogle af de gentagne opgaver som automatisk parsing af JSON.

GET-forespørgsel med Axios

Dette eksempel demonstrerer brugen af Axios til en GET-anmodning. Funktionen getPostWithAxios kalder axios.get() for at hente data fra et API-endpoint (/posts/1). Axios forenkler processen ved automatisk at parse JSON-svaret, hvilket eliminerer behovet for et separat .json()-kald. Blokken try...catch håndterer eventuelle fejl og viser enten postens titel eller en fejlmeddelelse i HTML'en.

POST-anmodning med Axios

Dette eksempel demonstrerer en POST-anmodning ved brug af Axios til at sende data til et API. Funktionen sendPostWithAxios kalder axios.post() med API-endepunktet (/posts) og data til et nyt opslag, inklusive title, body og userId. Axios sender automatisk dataene som JSON, hvilket forenkler processen. Blokken try...catch håndterer eventuelle fejl og viser enten titlen på det oprettede opslag eller en fejlmeddelelse i HTML'en.

Fejlhåndtering med Axios

Axios tilbyder en brugervenlig mekanisme til fejlhåndtering. Hvis anmodningen mislykkes (f.eks. netværksproblem eller serverfejl), kaster Axios automatisk en fejl, som kan håndteres med try...catch.

Dette eksempel illustrerer fejlhåndtering med Axios. Funktionen getInvalidPost forsøger at hente data fra et ikke-eksisterende endpoint ved hjælp af axios.get(). Når anmodningen mislykkes, kaster Axios automatisk en fejl. try...catch-blokken opfanger denne fejl og viser fejlmeddelelsen i HTML'en.

Yderligere funktioner og fordele ved Axios

En gennemgang af yderligere funktioner i Axios.

Request- og response-interceptors

Axios muliggør opsnapning af forespørgsler og svar for at ændre dem, før de behandles. Dette er nyttigt til tilføjelse af autentificeringstokens, logning af forespørgsler eller håndtering af global fejlhåndtering.

axios.interceptors.request.use(
  config => {
    // Modify request config (e.g., add authentication token)
    config.headers.Authorization = 'Bearer token';
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

Timeout-understøttelse

Axios giver mulighed for at angive timeouts for forespørgsler, hvilket sikrer, at forespørgslen ikke hænger uendeligt.

axios
  .get('https://jsonplaceholder.typicode.com/posts/1', { timeout: 5000 })
  .then(response => console.log(response.data))
  .catch(error => console.error('Request timed out', error));

Forenklet fejlhåndtering

Axios kaster automatisk fejl, når et svar har en status uden for 2xx-intervallet, så fejl kan håndteres på en standardiseret måde.

Browser-understøttelse

Axios fungerer på tværs af alle moderne browsere og leverer polyfills til ældre browsere, hvilket gør det til et mere alsidigt valg for visse projekter.