V Reactu se backendová komunikace obvykle dosahuje pomocí protokolu HTTP. Zatímco mnoho vývojářů zná rozhraní požadavků XML HTTP a rozhraní Fetch API pro vytváření požadavků HTTP, existuje další výkonná knihovna s názvem Axios, která proces dále zjednodušuje.

Obsah

• Předpoklady
• Úvod do Axios
• Kroky k vytvoření aplikace React
• Potřeba Axios v Reactu
• GET požadavek s Axios
• Požadavek POST s Axios:
• Smazat požadavek pomocí Axios:
• Objekty odezvy v Axios
• Chybový objekt:
• Vlastnosti knihovny Axios
• Zkratkové metody v Axios
• Závěr

Úvod do Axios:

Axios, což je oblíbená knihovna, se používá hlavně k odesílání asynchronních požadavků HTTP do koncových bodů REST. Tato knihovna je velmi užitečná pro provádění operací CRUD.

1. Tato oblíbená knihovna slouží ke komunikaci s backendem. Axios podporuje Promise API, nativní pro JS ES6.
2. Pomocí Axios vytváříme požadavky API v naší aplikaci. Jakmile je požadavek podán, získáme data v Return a poté tato data použijeme v našem projektu.
3. Tato knihovna je mezi vývojáři velmi oblíbená. Můžete se podívat na GitHub a najdete na něm 78 tisíc hvězdiček.

Před instalací Axios by měla být vaše projektová aplikace React připravena k instalaci této knihovny. Vytvořit Reagovat aplikaci podle níže uvedených kroků…

Kroky k vytvoření aplikace React:

Krok 1: Níže je příkaz k vytvoření aplikace React ve vašem projektu…

npx create-react-app myreactapp 

Krok 2: Zadejte adresář vytvořený v prvním kroku.

cd myreactapp 

Krok 3: Nainstalujte knihovnu Axios pomocí příkazu uvedeného níže…

npm i axios 

Struktura projektu:

Aktualizované závislosti v package.json soubor.

'dependencies': {  '@testing-library/jest-dom': '^5.17.0',  '@testing-library/react': '^13.4.0',  '@testing-library/user-event': '^13.5.0',  'axios': '^1.6.2',  'react': '^18.2.0',  'react-dom': '^18.2.0',  'react-scripts': '5.0.1',  'web-vitals': '^2.1.4' }, 

Příklad: Tento fragment kódu používá axios k vytvoření požadavku HTTP na backendový server.

Javascript

// Filename - App.js> import React from> 'react'> ;> import axios from> 'axios'> ;> class App extends React.Component {> > state = {> > newfiles:> null> ,> > };> > handleFile(e) {> > // Getting the files from the input> > let newfiles = e.target.newfiles;> > this> .setState({ newfiles });> > }> > handleUpload(e) {> > let newfiles => this> .state.newfiles;> > let formData => new> FormData();> > // Adding files to the formdata> > formData.append(> 'image'> , newfiles);> > formData.append(> 'name'> ,> 'Name'> );> > axios({> > // Endpoint to send files> > url:> ' http://localhost:8080/files '> ,> > method:> 'POST'> ,> > headers: {> > // Add any auth token here> > authorization:> 'your token comes here'> ,> > },> > // Attaching the form data> > data: formData,> > })> > // Handle the response from backend here> > .then((res) =>{})> > // Catch errors if any> > .> catch> ((err) =>{});> > }> > render() {> > return> (> > > > > > type='file' // To select multiple files multiple='multiple' onChange={(e) =>this.handleFile(e)} /> onClick={(e) => this.handleUpload(e)}> Odeslat soubory ); } } exportovat výchozí aplikaci;>

Kroky ke spuštění aplikace: Otevřete terminál a zadejte následující příkaz.

npm start 

Výstup: Otevřete prohlížeč a náš projekt se zobrazí v URL http://localhost:3000/

Výše uvedený příklad je jen malý popis kódu, který ukazuje, jak používat Axios ve vašem projektu. V nadcházející části probereme několik metod, jako je GET, POST a PUT v Axios.

Potřeba Axios v Reactu:

Jak jsme diskutovali, Axios vám umožňuje komunikovat s API ve vašem projektu React. Stejné úkoly lze provádět také pomocí AJAX, ale Axios vám poskytuje více funkcí a funkcí, což vám pomůže rychle vytvořit vaši aplikaci.

Axios je knihovna založená na slibech, takže musíte implementovat některé asynchronní požadavky HTTP založené na slibech. jQuery a AJAX také vykonávají stejnou práci, ale v projektu React React zpracovává vše ve svém vlastním virtuálním DOM, takže není nutné používat jQuery vůbec.

Níže je uveden příklad načtení dat zákazníka pomocí Axios…

Javascript

const getCustomersData = () =>{> > axios> > .get(> ' https://jsonplaceholder.typicode.com/customers '> )> > .then(data =>console.log(data.data))> > .> catch> (error =>console.log(error));> };> getCustomersData();>

Nyní pojďme k dalšímu bodu a pochopíme, jak lze provádět různé operace, jako je načítání dat nebo konzumace dat pomocí Axios (GET-POST-DELETE).

ZÍSKEJTE požadavek s Axios:

Vytvořte komponentu MyBlog a připojte ji k životnímu cyklu komponenty DidMount. Importujte Axios nahoře a načtěte data pomocí požadavku Get.

Javascript

// Filename - App.js> import React from> 'react'> ;> import axios from> 'axios'> ;> export> default> class MyList extends React.Component {> > state = {> > blogs: [],> > };> > componentDidMount() {> > axios> > .get(> > `https:> //jsonplaceholder.typicode.com/posts`> > )> > .then((response) =>{> > const posts = response.data;> > this> .setState({ posts });> > });> > }> > render() {> > return> (> > > > > {> this> .state.posts.map((post) =>{> > post.title;> > })}> > > > );> > }> }>

Zde používáme axios.get (URL) k získání příslibu, který vrací objekt odpovědi. Vrácená odpověď je přiřazena k objektu příspěvku. Můžeme také získat další informace, jako je stavový kód atd.

Požadavek POST s Axios:

Vytvořte novou komponentu AddPost pro požadavky Post. Tento požadavek přidá příspěvek do seznamu příspěvků.

Javascript

// Filename - App.js> import React from> 'react'> ;> import axios from> 'axios'> ;> export> default> class AddPost extends React.Component {> > state = {> > postTitle:> ''> ,> > };> > handleChange = (event) =>{> > this> .setState({ postTitle: event.target.value });> > };> > handleSubmit = (event) =>{> > event.preventDefault();> > const post = {> > postName:> this> .state.postName,> > };> > axios> > .post(> > `https:> //jsonplaceholder.typicode.com/posts`,> > { post }> > )> > .then((res) =>{> > console.log(res);> > console.log(res.data);> > });> > };> > render() {> > return> (> > > > '{this.handleSubmit}'>Název příspěvku: type='text' name='name' onChange='{this.handleChange}' /> 'submit'>Add ); } }>

Ve výše uvedeném kódu jsme provedli požadavek HTTP Post a přidali nový příspěvek do databáze. Událost onChange spustí metodu handleChange() a aktualizuje požadavek, když požadavek API úspěšně vrátí data.

Smazat požadavek pomocí Axios:

Pro odeslání požadavku na smazání na server se používá axios.delete. Při vytváření této adresy URL požadavku a volitelnou konfiguraci musíte zadat dva parametry.

axios.delete(url, {   data: { foo: 'bar' },   headers: { 'Authorization': '******' }  }); 

Při odesílání požadavku na odstranění budete muset nastavit tělo požadavku a záhlaví. Pro tento účel použijte config.data. Ve výše uvedeném požadavku POST upravte kód, jak je uvedeno níže…

Javascript

handleSubmit = event =>{> > event.preventDefault();> > axios.> delete> (> > `https:> //jsonplaceholder.typicode.com/posts/${this.state.postName}`)> > .then(res =>{> > console.log(res);> > console.log(res.data);> > })> }>

Objekty odezvy v Axios:

Když odešlete požadavek na server, obdržíte ze serveru objekt odpovědi s vlastnostmi uvedenými níže…

• data: Získáváte data ze serveru ve formě užitečného zatížení. Tato data jsou vrácena ve formě JSON a analyzována zpět do objektu JavaScriptu.
• postavení: Získáte kód HTTP vrácený ze serveru.
• statusText: HTTP stavová zpráva vrácená serverem.
• záhlaví: Všechny hlavičky posílá server zpět.
• konfigurace: původní konfigurace požadavku.
• žádost: skutečný objekt XMLHttpRequest.

Chybový objekt:

Pokud dojde k problému s požadavkem, dostanete chybový objekt. Slib bude odmítnut s chybovým objektem s danými vlastnostmi

• zpráva: Text chybové zprávy.
• Odezva: Objekt odpovědi (pokud byl přijat).
• žádost: Aktuální objekt XMLHttpRequest (při spuštění v prohlížeči).
• konfigurace: Původní konfigurace požadavku.

Vlastnosti knihovny Axios

• Data JSON se transformují automaticky.
• Transformuje data požadavku a odpovědi.
• Užitečné při vytváření požadavků HTTP z Node.js
• Vytváří XMLHttpRequests z prohlížeče.
• Poskytněte podporu na straně klienta pro ochranu před XSRF.
• Podporuje slibované API.
• Možnost zrušit požadavek.

Zkratkové metody v Axios:

Níže jsou uvedeny některé zkrácené metody Axios…

• axios.request(config)
• axios.head(url[, config])
• axios.get(url[, config])
• axios.post(url[, data[, config]])
• axios.put(url[, data[, config]])
• axios.delete(url[, config])
• axios.options(url[, config])
• axios.patch(url[, data[, config]])

Závěr

Tento článek vysvětlil vše o knihovně Axios. Probrali jsme některé užitečné operace, jako je načítání dat, odesílání dat, aktualizace dat nebo mazání dat v Axios. Jakmile začnete pracovat na Reactu, budete muset tuto knihovnu používat ke komunikaci s databázovým serverem. Je tedy důležité si to procvičit a pochopit, jak věci v Axios fungují.