In mijn vorige kleinschalige tutorial hebben we het gehad over Fetch vs AJAX vs XHR. Na aanleiding van een comment over het gebruik van Axios, zullen wij vandaag kijken waarom Axios een betere oplossing is dan de ( nog ) niet consistente fetch().

Fetch

Fetch() is een gedeelte van een Javascript window-object methode die in de fetch api zit ingebakken. Het is ingebouwd, dus gebruikers hoeven niets te installeren! Fetch() laat ons synchroon data verkrijgen van een API zonder extra libraries te hoeven installeren.

fetch(url)
    .then((response) => {
        //Handel de response af
    })   
    .catch((error) => {
        //Handel de error af
    })

Hier maken we een simpele fetch() GET request. In de fetch() methode, is er één verplicht argument, de url, dit is een path waarvan de user zijn data kan behandelen. Vervolgens returned de fetch() methode een promise, die resolved kan worden naar het response object of een error kan weergeven, hieronder volgt een voorbeeld van hoe wij dit kunnen doen d.m.v een POST request:

fetch(url, {
    method: 'POST',
    
    //Return de headers in json formaat
    headers: {
        'Content-Type': 'application/json',
    },
    
    //Een POST request kan alleen een string verzenden, geen object en daarom transformeren wij dit naar een JSON string
    body: JSON.stringify(data)
})
  .then((response) => response.json())
  .catch((error) => console.log(error));

De argumenten in de fetch() zijn optioneel, maar als de gebruiker hier geen gebruik van maakt zal de fetch() hem behandelen als een GET request en zal de content gedownload worden op de gegeven URL.
Zoals eerder gezegd, returned de promise een object, en daardoor zal de gebruiker moet de gebruiker een andere methode gebruiken om de body te verkrijgen van de response. Er zijn een aantal verschillende methodes die een gebruiker kan gebruiken wat afhankelijk is van de format van de body.

response.json()
response.text()
response.blob()
response.formData()
response.arrayBuffer()

Waarvan de meest bekende de response.json() is.
Helaas is de ingebouwde fetch() functie niet in Node.js te bekennen, maar is er een 'polyfill' zoals node-fetch. Tussen node-fetch en de browser versie fetch() zijn er verschillende bekende variaties.

Axios

Axios is een Javascript library voor het maken van HTTP requests vanuit Node, XMLHttpRequest of een browser.
Als moderne library, is het gebaseerd op de Promise API. Axios heeft een aantal nadelen, zoals protectie tegen 'cross-site request forgery' ( CSRF ) aanvallen waardoor er gebruik gemaakt zou moeten worden van CSRF tokens.
Gebruikers moeten de library installeren en importeren in je project met een CDN, npm, Yarn of Bower.

axios.get(url)
    .then((response) => console.log(response))
    .catch((error) => console.log(error));

In axios, wanneer gebruikers een config object maken, hebben zij toegang tot een aantal properties. De meest voorkomende zijn :

url
baseURL
params
auth
headers
responseType
data

Als response, zal Axios een promise returnen dat word resolved in de response object OF een error object. In deze response object zijn de volgende waarden te zien :

data: Dee data van de response
status HTTP status code van de call ( 200, 404 etc. )
statusText HTTP status als een text bericht
headers Zelfde die als in de request te zien is
config Request configuratie
request XMLHttpRequest object

axios({
    url: 'http://example.com',
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    data: {name: "Django", age: 25},
});

Gebruikers moeten met TWEE promises werken in fetch(). Gebruikers kunnen boilerplate vermijden en nettere, beknoptere code schrijven in Axios.

Axios maakt gebruik van de data propertie , waar fetch() gebruik maakt van de body propertie om de data af te handelen. Fetch() zijn data is stringified ( format naar een JSON string ). In fetch(), is de URL doorgegeven als een argument, maar in Axios is is de URL doorgegeven als config object.

Het verschil tussen Fetch en Axios is dat bij fetch() de request word uitgevoerd, vervolgens moet de gebruiker nog het response.json() proces afhandelen. In Axios world de data automatisch stringified en is er dus geen extra operatie nodig voor de afhandeling.

Conclussie

Voor de meeste HTTP communicatie benodigdheden brengt Axios een gemakkelijke API in een compact pakket.
Axios is een hele goede en nette oplossing voor applicaties die veel HTTP requests moeten uitvoeren en voor een nette error afhandeling of HTTP interceptions.

Wanneer je een kleinschalig project hebt die maar een aantal requests moet uitvoeren, is fetch daarentegen geen slechte oplossing aangezien je hier geen extra pakket voor nodig hebt en dit al standaard in je browser zit.