Odesílání požadavků POST JSON s Axios

Úvod

Axios je klientská knihovna HTTP založená na slibech, která usnadňuje odesílání asynchronních požadavků HTTP (například POST , GET a DELETE ) na koncové body REST, zejména rozhraní API.

Jak odesílat požadavky POST JSON pomocí Axios

Požadavek POST se používá k odeslání dat do koncového bodu. Pokud například máme registrační stránku, kam uživatelé zasílají své informace, lze tyto informace odeslat jako JSON do koncového bodu, který určíme pomocí požadavku POST JSON.

Používáme axios.post() metoda pro odeslání požadavku POST s Axios, která přebírá dva hlavní parametry – adresu URL koncového bodu (url ) a objekt představující data, která chceme odeslat (data ):

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

Kromě těchto dvou parametrů existuje ještě třetí - config . Používá se ke konfiguraci požadavku POST, který odesíláme, hlavně k nastavení hlaviček.

Odesílání neserializovaných dat

Je důležité si uvědomit, že Axios ve výchozím nastavení používá JSON pro odesílání dat, což znamená, že jakýkoli objekt, který předáme do Axios, automaticky serializuje objekt na JSON a nastaví Content-Type záhlaví na application/json . Ukažme si to na příkladu – předpokládejme, že posíláme objekt { name: 'John Doe' } :

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

Axios automaticky serializuje objekt do formátu JSON:

console.log(result.data.data); // '{"name":"John Doe"}'

A jak jsme řekli, nastaví také naše Content-Type záhlaví na application/json :

console.log(result.data.headers['Content-Type']); // 'application/json;charset=utf-8'

Odesílání serializovaného řetězce JSON

Dosud jsme viděli, že Axios automaticky serializuje všechna data, která mu pošleme, ale v tomto případě pošleme serializovaný řetězec JSON jako druhý parametr axios.post() metoda:

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

Axios bude s těmito daty jednoduše zacházet jako s tělem požadavku zakódovaným ve formuláři, místo aby nastavil záhlaví typu obsahu na application/json , jak je uvedeno níže:

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

console.log(result.data.headers['Content-Type']); // 'application/x-www-form-urlencoded',

Abychom tento problém vyřešili, musíme explicitně nastavit Content-Type záhlaví na application/json . Můžeme to udělat předáním config argument při volání axios.post() metoda:

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); // '{"name":"John Doe"}'
console.log(result.data.headers['Content-Type']); // 'application/json',

Závěr

V tomto článku jsme se naučili, jak posílat požadavky POST JSON pomocí Axios, s plným vědomím toho, že tato data mohou být serializovaná nebo neserializovaná, a zabývali jsme se oběma scénáři.