Förutom den inbyggda funktionen fetch() finns det flera tredjepartsbibliotek tillgängliga för att göra HTTP-förfrågningar i JavaScript. Ett av de mest populära biblioteken är Axios ( Axios Docs). Dessa bibliotek erbjuder ytterligare funktioner och fördelar som kan förenkla arbetet med API:er och förbättra kodens läsbarhet.

Varför använda Axios eller andra bibliotek istället för inbyggda fetch()?

Även om fetch()-API:et är kraftfullt har det vissa begränsningar som tredjepartsbibliotek som Axios hanterar:

• Automatisk JSON-tolkning: Axios tolkar automatiskt JSON-svar, medan du med fetch() måste anropa response.json() manuellt;
• Timeouts: Axios gör det möjligt att ange tidsgränser för förfrågningar, vilket inte stöds inbyggt av fetch();
• Interceptors för förfrågningar och svar: Axios tillhandahåller interceptors som gör det möjligt att köra funktioner innan en förfrågan skickas eller efter att ett svar mottagits, vilket är användbart för att lägga till autentiseringstoken eller logga förfrågningar;
• Enklare syntax: Axios har en enklare och mer konsekvent syntax för att göra förfrågningar och hantera svar;
• Stöd för äldre webbläsare: Axios har inbyggt stöd för äldre webbläsare som kanske inte fullt ut stöder det inbyggda fetch()-API:et.

Grundläggande användning av Axios

Axios tillhandahåller en enkel syntax för att göra både GET- och POST-förfrågningar. Det returnerar Promises, precis som fetch(), men hanterar vissa repetitiva uppgifter som att tolka JSON automatiskt.

GET-förfrågan med Axios

Detta exempel visar användning av Axios för en GET-förfrågan. Funktionen getPostWithAxios anropar axios.get() för att hämta data från en API-endpoint (/posts/1). Axios förenklar processen genom att automatiskt tolka JSON-svaret, vilket eliminerar behovet av ett separat anrop till .json(). try...catch-blocket hanterar eventuella fel och visar antingen inläggets titel eller ett felmeddelande i HTML-koden.

POST-förfrågan med Axios

Detta exempel visar en POST-förfrågan med Axios för att skicka data till ett API. Funktionen sendPostWithAxios anropar axios.post() med API-endpunkten (/posts) och data för ett nytt inlägg, inklusive title, body och userId. Axios skickar automatiskt data som JSON, vilket förenklar processen. try...catch-blocket hanterar eventuella fel och visar antingen den skapade inläggstiteln eller ett felmeddelande i HTML-koden.

Felhantering med Axios

Axios tillhandahåller en lättanvänd mekanism för felhantering. Om förfrågan misslyckas (t.ex. nätverksproblem eller serverfel) kastar Axios automatiskt ett fel, vilket kan hanteras med try...catch.

Detta exempel visar felhantering med Axios. Funktionen getInvalidPost försöker hämta data från en icke-existerande slutpunkt med hjälp av axios.get(). När begäran misslyckas kastar Axios automatiskt ett fel. try...catch-blocket fångar detta fel och visar felmeddelandet i HTML-koden.

Ytterligare funktioner och fördelar med Axios

En genomgång av några ytterligare funktioner i Axios.

Interceptors för förfrågningar och svar

Axios möjliggör avlyssning av förfrågningar och svar för att modifiera dem innan de hanteras. Detta är användbart för att lägga till autentiseringstoken, logga förfrågningar eller hantera global felhantering.

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-stöd

Axios möjliggör inställning av timeout för förfrågningar, vilket säkerställer att förfrågan inte fastnar obegränsat.

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

Förenklad felhantering

Axios kastar automatiskt fel när ett svar har en status utanför 2xx-intervallet, vilket möjliggör standardiserad hantering av fel.

Webbläsarstöd

Axios fungerar i alla moderna webbläsare och tillhandahåller polyfills för äldre webbläsare, vilket gör det till ett mer mångsidigt alternativ för vissa projekt.