Introductie

Axios is een op beloften gebaseerde HTTP-clientbibliotheek die het eenvoudig maakt om asynchrone HTTP-verzoeken te verzenden (zoals: POST, GET en DELETE) naar REST-eindpunten, voornamelijk API's.

In dit artikel leren we hoe u POST JSON-verzoeken kunt verzenden met Axios en hoe u zowel eerder geserialiseerde als niet-serialiseerde gegevens kunt verwerken.

Hoe POST JSON-verzoeken te verzenden met Axios

Het POST-verzoek wordt gebruikt om: verstuur data naar een eindpunt. Als we bijvoorbeeld een registratiepagina hebben waar gebruikers hun informatie indienen, kan deze informatie als JSON worden verzonden naar het eindpunt dat we specificeren met behulp van een POST JSON-verzoek.

We maken gebruik van de axios.post() methode om een ​​POST-verzoek met Axios te verzenden, waarvoor twee belangrijke parameters nodig zijn: de URL van het eindpunt (url), en het object dat gegevens vertegenwoordigt die we willen posten (data):

axios.post(url[, data[, config]])

Naast deze twee parameters is er nog een derde: config. Het wordt gebruikt om het POST-verzoek dat we verzenden te configureren, voornamelijk om headers in te stellen.

Niet-geserialiseerde gegevens verzenden

Het is belangrijk op te merken dat Axios standaard JSON gebruikt voor het posten van gegevens, wat betekent dat elk object dat we doorgeven aan Axios het object automatisch naar JSON rangschikt en de Content-Type kop naar application/json. Laten we dat in het voorbeeld illustreren – neem aan dat we het object posten { name: 'John Doe' }:

const result = await axios.post('https://testapi.org/post', { name: 'John Doe' });

Axios zal het object automatisch serialiseren in JSON-formaat:

console.log(result.data.data);

En zoals we al zeiden, het zal ook onze Content-Type kop naar application/json:

console.log(result.data.headers['Content-Type']);

Geserialiseerde JSON-string verzenden

Tot nu toe hebben we gezien dat Axios automatisch alle gegevens die we het verzenden zal serialiseren, maar in dit geval sturen we een geserialiseerde JSON-tekenreeks als de tweede parameter van de axios.post() methode:

const usersName = JSON.stringify({ name: 'John Doe' });

Axios behandelt deze gegevens gewoon als een formuliergecodeerde aanvraagtekst in plaats van de inhoudstype-header in te stellen op: application/json, zoals hieronder getoond:

const usersName = JSON.stringify({ name: 'John Doe' });
const result = await axios.post('https://testapi.org/post', usersName);

console.log(result.data.headers['Content-Type']);

Om dit probleem op te lossen, moeten we expliciet de Content-Type kop naar application/json. Dat kunnen we doen door de config argument bij het aanroepen van de axios.post() methode:

const usersName = JSON.stringify({ name: 'John Doe' });
customConfig = {
    headers: {
    'Content-Type': 'application/json'
    }
};
const result = await axios.post('https://testapi.org/post', usersName, customConfig);

console.log(result.data.data);
console.log(result.data.headers['Content-Type']);

Conclusie

In dit artikel hebben we geleerd hoe we POST JSON-verzoeken kunnen verzenden met Axios, ons er volledig van bewust dat deze gegevens geserialiseerd of niet-serialized kunnen zijn, en we hebben beide scenario's behandeld.