Kompletní průvodce prací s Axios

Axios je knihovna JavaScriptu, která poskytuje jednoduché rozhraní API pro odesílání požadavků HTTP z kódu JavaScript na straně klienta nebo kódu Node.js na straně serveru. Axios je postaven na JavaScriptu Promise API, díky kterému je asynchronní kód lépe udržovatelný.

Začínáme s Axios

Axios můžete využít ve své aplikaci pomocí Content Delivery Network (CDN) nebo si jej nainstalovat do svého projektu.

Chcete-li použít Axios přímo v HTML, zkopírujte níže uvedený odkaz CDN a vložte jej do sekce head vašeho HTML souboru:

<skriptsrc=" https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">skript>

S tímto přístupem můžete použít Axios a jeho HTTP metody v těle vašich HTML skriptů. Axios také umí využívat REST API v rámci jako React.

Chcete-li použít Axios v projektu Node.js, nainstalujte jej do adresáře projektu pomocí správce balíčků npm nebo yarn:

npm nainstalovat axios
# nebo
příze přidat axios

Po instalaci můžete začít používat Axios ve svém projektu JavaScript:

konst axios = vyžadovat('axios');

Podle tohoto průvodce budete pracovat s bezplatnými JSONPlaceholder API. I když má toto API sadu zdrojů, budete využívat pouze ty /comments a /posts koncové body. Koncové body jsou specifické adresy URL, ke kterým lze přistupovat za účelem načtení dat nebo manipulaci s nimi.

Vyřizování požadavků GET s Axios

Existuje několik způsobů, jak vytvořit požadavek GET pomocí Axios. Nicméně, syntaxe obecně závisí na preferenci.

Jedním ze způsobů, jak vytvořit požadavek GET, je použití axios() metoda s objektem, který specifikuje metodu požadavku jako dostat a adresu URL, na kterou se má požadavek odeslat.

Například:

konst axios = vyžadovat("axios");
axios({
 metoda: "dostat",
 url: " https://jsonplaceholder.typicode.com/comments",
})
 .pak((res) => {
řídicí panel.log (res.data);
 })
 .chytit((chybovat) => {
řídicí panel.chyba (chyba);
 });

Tento příklad vytváří příslib využívající model asynchronního programování řetězením .pak() a .chytit() metody. Slib zaprotokoluje odpověď do konzole, když je požadavek úspěšný, a zaprotokoluje chybovou zprávu, pokud požadavek selže.

Axios také poskytuje jednodušší způsob vytváření požadavků GET, které eliminují potřebu předat objekt řetězením .dostat() metoda k axios instance.

Například:

axios
 .dostat(" https://jsonplaceholder.typicode.com/comments")
 .pak((res) => {
řídicí panel.log (res.data);
 })
 .chytit((chybovat) => {
řídicí panel.chyba (chyba);
 });

Vytváření požadavků POST s Axios

Vytvoření požadavku POST pomocí Axios je podobné jako vytvoření požadavku GET. Pomocí tohoto požadavku můžete odeslat data na server.

Níže uvedený fragment kódu je příkladem toho, jak používat Axios' .pošta() metoda:

axios
 .pošta(" https://jsonplaceholder.typicode.com/comments", {
 název: "Jackson Smith",
 e-mailem: "[email protected]",
 tělo: "Tohle je umělecké dílo.",
 })
 .pak((res) => {
řídicí panel.log (res.data);
 })
 .chytit((chybovat) => {
řídicí panel.chyba (chyba);
 });

Kód odešle požadavek POST do rozhraní API JSONPlaceholder k vytvoření nového komentáře. The axios.post metoda odesílá data do /comments koncový bod.

Data odeslaná v žádosti jsou objekt s a název, e-mailem, a tělo vlastnictví. Pokud je žádost úspěšná, pak metoda zaznamenává data odezvy do konzole. A pokud dojde k chybě, chytit metoda zaznamená chybu do konzoly.

Vytváření požadavků PUT/PATCH pomocí Axios

Požadavek PUT nebo PATCH můžete použít k aktualizaci existujícího prostředku na serveru. Zatímco PUT nahradí celý prostředek, PATCH aktualizuje pouze určená pole.

Chcete-li vytvořit požadavek PUT nebo PATCH s Axios, musíte použít .dát() nebo .náplast() metody resp.

Zde je příklad použití těchto metod k aktualizaci souboru e-mailem vlastnost komentáře s ID 100:

konst axios = vyžadovat("axios");
axios
 .dostat(" https://jsonplaceholder.typicode.com/comments/100")
 .pak((res) => {
řídicí panel.log (res.data.email);
 })
 .chytit((chybovat) => {
řídicí panel.chyba (chyba);
 });
// Výstup:
// '[email protected]'
axios
 .náplast(" https://jsonplaceholder.typicode.com/comments/100", {
 e-mailem: "[email protected]",
 })
 .pak((res) => {
řídicí panel.log (res.data.email);
 })
 .chytit((chybovat) => {
řídicí panel.chyba (chyba);
 });
// Výstup:
// '[email protected]',

Tento program nejprve odešle požadavek GET na koncový bod " https://jsonplaceholder.typicode.com/comments/100". Poté zaznamená e-mailem vlastnost komentáře s ID 100 do konzole. Vytváříme požadavek GET, abyste viděli, co se změnilo po odeslání požadavku PATCH.

Druhý požadavek je PATCH požadavek na stejný koncový bod. Tento kód aktualizuje e-mail s komentářem na [email protected].

Vytváření požadavků na odstranění pomocí Axios

Můžete použít VYMAZAT požadavek na odstranění zdroje na serveru.

Vezměte si následující příklad, jak použít .vymazat() metoda odstranění zdroje ze serveru:

axios
 .vymazat(" https://jsonplaceholder.typicode.com/comments/10")
 .pak((res) => {
řídicí panel.log (res.data);
 })
 .chytit((chybovat) => {
řídicí panel.chyba (chyba);
 });
//Output:
// {}

Přihlášením prázdného objektu do konzole výše uvedený kód ukazuje, že smazal komentář s ID 10.

Simultánní požadavky s Axios

Pomocí Axios můžete načítat data z více koncových bodů najednou. Chcete-li to provést, musíte použít .Všechno() metoda. Tato metoda přijímá pole požadavků jako svůj parametr a řeší se pouze tehdy, když obdržíte všechny odpovědi.

V následujícím příkladu je .Všechno() metoda načítá data ze dvou koncových bodů současně:

axios
 .Všechno([
 axios.get(" https://jsonplaceholder.typicode.com/comments? _limit=2"),
 axios.get(" https://jsonplaceholder.typicode.com/posts? _limit=2"),
 ])
 .pak(
 axios.spread((komentáře, příspěvky) => {
řídicí panel.log (komentáře.data);
řídicí panel.log (posts.data);
 })
 )
 .chytit((chybovat) =>řídicí panel.chyba (chyba));

Výše uvedený blok kódu odesílá požadavky současně a poté předává odpovědi do .pak() metoda. Axios .šíření() metoda odděluje odpovědi a přiřazuje každou odpověď její proměnné.

Nakonec konzola zaznamená data vlastnost dvou odpovědí: komentáře a příspěvky.

Zachycování požadavků pomocí Axios

Někdy může být potřeba zachytit požadavek, než se dostane na server. Můžete použít Axios' interceptors.request.use() způsob zachycení požadavků.

V následujícím příkladu metoda zaprotokoluje typ požadavku do konzoly pro každý provedený požadavek:

axios.interceptors.request.use(
 (config) => {
řídicí panel.log(`${config.method} vznesena žádost');
vrátit se config;
 },
 (chyba) => {
vrátit seSlib.odmítnout (chyba);
 }
);
axios
 .dostat(" https://jsonplaceholder.typicode.com/comments? _limit=2")
 .pak((res) =>řídicí panel.log (res.data))
 .chytit((chybovat) =>řídicí panel.chyba (chyba));

Program definuje interceptor Axios pomocí axios.interceptors.request.use metoda. Tato metoda trvá config a chyba objekty jako argumenty. The config objekt obsahuje informace o požadavku, včetně metody požadavku (config.metoda) a adresu URL požadavku (config.url).

Funkce interceptor vrací config objekt, což umožňuje, aby požadavek běžel normálně. Pokud dojde k chybě, funkce vrátí odmítnuté Slib objekt.

Nakonec program požádá o testování interceptoru. Konzole zaznamená typ provedeného požadavku, v tomto případě požadavek GET.

Axios toho má víc

Naučili jste se vytvářet a zachycovat požadavky ve vašich projektech pomocí Axios. Mnoho dalších funkcí, jako je transformace požadavků a používání instancí Axios, máte jako vývojář JavaScriptu k dispozici k prozkoumání. Axios zůstává preferovanou možností pro vytváření požadavků HTTP ve vašich aplikacích JavaScript. Fetch API je však další dobrá možnost, kterou můžete prozkoumat.