logo

TechCodeview

Axios in React: Príručka pre začiatočníkov

V Reacte sa backendová komunikácia zvyčajne dosahuje pomocou protokolu HTTP. Zatiaľ čo mnohí vývojári sú oboznámení s rozhraním požiadaviek HTTP XML a rozhraním Fetch API na vytváranie požiadaviek HTTP, existuje ďalšia výkonná knižnica s názvom Axios, ktorá tento proces ešte viac zjednodušuje.

Obsah



Úvod do Axios:

Axios, čo je populárna knižnica, sa používa hlavne na odosielanie asynchrónnych požiadaviek HTTP na koncové body REST. Táto knižnica je veľmi užitočná na vykonávanie operácií CRUD.

  1. Táto populárna knižnica slúži na komunikáciu s backendom. Axios podporuje Promise API, natívne pre JS ES6.
  2. Pomocou Axios vytvárame API požiadavky v našej aplikácii. Po zadaní požiadavky získame údaje v Return a potom tieto údaje použijeme v našom projekte.
  3. Táto knižnica je medzi vývojármi veľmi populárna. Môžete to skontrolovať na GitHub a nájdete na ňom 78 tisíc hviezdičiek.

Pred inštaláciou Axios by mala byť vaša projektová aplikácia React pripravená na inštaláciu tejto knižnice. Vytvor Reagovať aplikáciu podľa nižšie uvedených krokov...

Kroky na vytvorenie aplikácie React:

Krok 1: Nižšie je uvedený príkaz na vytvorenie aplikácie React vo vašom projekte…



npx create-react-app myreactapp>

Krok 2: Zadajte adresár vytvorený v prvom kroku.

cd myreactapp>

Krok 3: Nainštalujte knižnicu Axios pomocou príkazu uvedeného nižšie…

npm i axios>

Štruktúra projektu:



Snímka obrazovky z 2023-10-06-09-44-29

ako tlačiť java

Aktualizované závislosti v package.json súbor.

'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' },>

Príklad: Tento útržok kódu používa axios na vytvorenie požiadavky HTTP na server backend.

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)}> Odoslať súbory ); } } exportovať predvolenú aplikáciu;> 

>

>

Kroky na spustenie aplikácie: Otvorte terminál a zadajte nasledujúci príkaz.

npm start>

Výkon: Otvorte prehliadač a náš projekt sa zobrazí v adrese URL http://localhost:3000/

Vyššie uvedený príklad je len malým popisom kódu, ktorý ukazuje, ako používať Axios vo svojom projekte. V nasledujúcej časti budeme diskutovať o viacerých metódach, ako sú GET, POST a PUT v Axiose.

Potreba Axios v reakcii:

Ako sme už diskutovali, Axios vám umožňuje komunikovať s API vo vašom projekte React. Rovnaké úlohy je možné vykonávať aj pomocou AJAX, ale Axios vám poskytuje viac funkcií a funkcií, čo vám pomôže rýchlo zostaviť vašu aplikáciu.

Axios je knižnica založená na sľuboch, takže musíte implementovať niektoré asynchrónne požiadavky HTTP založené na sľuboch. jQuery a AJAX tiež vykonávajú rovnakú prácu, ale v projekte React React spracováva všetko vo svojom vlastnom virtuálnom DOM, takže nie je potrebné používať jQuery.

Nižšie je uvedený príklad na načítanie údajov zákazníka pomocou Axios…

zoznam štátov

Javascript




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

>

>

Teraz poďme k ďalšiemu bodu a pochopíme, ako možno vykonávať rôzne operácie, ako je načítanie údajov alebo spotrebovanie údajov pomocou Axios (GET-POST-DELETE).

ZÍSKAJTE žiadosť s Axios:

Vytvorte komponent MyBlog a pripojte ho do životného cyklu komponentu DidMount. Importujte Axios v hornej časti a načítajte údaje pomocou žiadosti 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;> >})}> >>
>);> >}> }> 

>

>

Spojené štáty americké koľko miest

Tu používame axios.get (URL) na získanie prísľubu, ktorý vráti objekt odpovede. Vrátená odpoveď je priradená k objektu príspevku. Môžeme tiež získať ďalšie informácie, ako je stavový kód atď.

Požiadavka POST s Axios:

Vytvorte nový komponent AddPost pre požiadavky na príspevok. Táto žiadosť pridá príspevok do zoznamu príspevkov.

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ázov príspevku: type='text' name='name' onChange='{this.handleChange}' /> 'submit'>Add ); } }>

príkaz java if 
>

>

Vo vyššie uvedenom kóde sme vytvorili požiadavku HTTP Post a pridali nový príspevok do databázy. Udalosť onChange spúšťa metódu handleChange() a aktualizuje požiadavku, keď žiadosť API úspešne vráti údaje.

Odstrániť požiadavku pomocou Axios:

Na odoslanie žiadosti o vymazanie na server sa používa axios.delete. Pri vytváraní tejto adresy URL požiadavky a voliteľnej konfigurácie musíte zadať dva parametre.

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

Pri odosielaní žiadosti o vymazanie budete musieť nastaviť telo žiadosti a hlavičky. Na tento účel použite config.data. Vo vyššie uvedenej žiadosti POST upravte kód, ako je uvedené nižšie…

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 odozvy v Axiose:

Keď odošlete požiadavku na server, dostanete zo servera objekt odpovede s vlastnosťami uvedenými nižšie...

  • údaje: Zo servera dostanete údaje vo forme užitočného zaťaženia. Tieto údaje sa vrátia vo forme JSON a analyzujú sa späť do objektu JavaScriptu.
  • postavenie: Dostanete kód HTTP vrátený zo servera.
  • statusText: Správa o stave HTTP vrátená serverom.
  • hlavičky: Všetky hlavičky posiela server späť.
  • konfigurácia: pôvodná konfigurácia požiadavky.
  • žiadosť: skutočný objekt XMLHttpRequest.

Objekt chyby:

Ak sa vyskytne problém s požiadavkou, dostanete chybový objekt. Sľub bude odmietnutý s chybovým objektom s danými vlastnosťami

  • správa: Text chybovej správy.
  • odpoveď: Objekt odpovede (ak bol prijatý).
  • žiadosť: Skutočný objekt XMLHttpRequest (pri spustení v prehliadači).
  • konfigurácia: Pôvodná konfigurácia požiadavky.

Funkcie knižnice Axios

  • Údaje JSON sa transformujú automaticky.
  • Transformuje údaje požiadavky a odpovede.
  • Užitočné pri vytváraní požiadaviek HTTP z Node.js
  • Vytvára XMLHttpRequests z prehliadača.
  • Poskytnite podporu na strane klienta na ochranu pred XSRF.
  • Podporuje sľubné API.
  • Možnosť zrušiť požiadavku.

Skrátené metódy v Axios:

Nižšie sú uvedené niektoré skrátené metódy Axios…

  • axios.request(config)
  • axios.head(url[, config])
  • axios.get(url[, config])
  • axios.post(url[, údaje[, konfigurácia]])
  • axios.put(url[, údaje[, konfigurácia]])
  • axios.delete(url[, config])
  • axios.options(url[, config])
  • axios.patch(url[, údaje[, konfigurácia]])

Záver

Tento článok vysvetlil všetko o knižnici Axios. Diskutovali sme o niektorých užitočných operáciách, ako je načítanie údajov, odosielanie údajov, aktualizácia údajov alebo vymazanie údajov v Axiose. Keď začnete pracovať na Reacte, budete musieť túto knižnicu použiť na komunikáciu s databázovým serverom. Preto je dôležité si to precvičiť a pochopiť, ako veci fungujú v Axiose.