logo

TechCodeview

Axios v React: vodnik za začetnike

V Reactu je zaledna komunikacija običajno dosežena s protokolom HTTP. Medtem ko mnogi razvijalci poznajo vmesnik za zahteve XML HTTP in API Fetch za izdelavo zahtev HTTP, obstaja še ena zmogljiva knjižnica, imenovana Axios, ki dodatno poenostavi postopek.

Kazalo



Uvod v Axios:

Axios, ki je priljubljena knjižnica, se večinoma uporablja za pošiljanje asinhronih zahtev HTTP končnim točkam REST. Ta knjižnica je zelo uporabna za izvajanje operacij CRUD.

  1. Ta priljubljena knjižnica se uporablja za komunikacijo z zaledjem. Axios podpira Promise API, ki izvira iz JS ES6.
  2. Z uporabo Axios v naši aplikaciji naredimo zahteve API. Ko je zahteva podana, dobimo podatke v Return, nato pa te podatke uporabimo v našem projektu.
  3. Ta knjižnica je zelo priljubljena med razvijalci. Lahko preverite na GitHubu in na njem boste našli 78k zvezdic.

Preden namestite Axios, mora biti vaša projektna aplikacija React pripravljena za namestitev te knjižnice. Ustvariti Reagiraj aplikacijo po spodaj navedenih korakih...

Koraki za ustvarjanje aplikacije React:

Korak 1: Spodaj je ukaz za ustvarjanje aplikacije React v vašem projektu ...



npx create-react-app myreactapp>

2. korak: Vnesite imenik, ustvarjen v prvem koraku.

cd myreactapp>

3. korak: Namestite knjižnico Axios s spodnjim ukazom ...

npm i axios>

Struktura projekta:



Posnetek zaslona-iz-2023-10-06-09-44-29

nastavi v javi

Posodobljene odvisnosti v package.json mapa.

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

primer: Ta delček kode uporablja axios za izdelavo zahteve HTTP zalednemu strežniku.

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)}> Pošlji datoteke ); } } izvoz privzete aplikacije;> 

>

>

Koraki za zagon aplikacije: Odprite terminal in vnesite naslednji ukaz.

npm start>

Izhod: Odprite brskalnik in naš projekt bo prikazan v URL-ju http://localhost:3000/

Zgornji primer je le majhen opis kode za predstavitev uporabe Axios v vašem projektu. V naslednjem razdelku bomo razpravljali o več metodah, kot so GET, POST in PUT v Axios.

Potreba po Axios v Reactu:

Kot smo že omenili, vam Axios omogoča komunikacijo z API-ji v vašem projektu React. Iste naloge je mogoče izvajati tudi z uporabo AJAX, vendar vam Axios nudi več funkcionalnosti in funkcij, kar vam pomaga pri hitri izdelavi vaše aplikacije.

Axios je knjižnica, ki temelji na obljubah, zato morate implementirati nekaj asinhronih zahtev HTTP, ki temeljijo na obljubah. jQuery in AJAX prav tako opravljata isto nalogo, vendar v projektu React React obravnava vse in vse v svojem virtualnem DOM-u, tako da sploh ni potrebe po uporabi jQueryja.

Spodaj je primer pridobivanja strankinih podatkov z uporabo Axios ...

Javascript


uporabniško ime



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

>

>

Zdaj pa preidimo na naslednjo točko in razumemo, kako je mogoče izvajati različne operacije, kot je pridobivanje podatkov ali poraba podatkov z uporabo Axios (GET-POST-DELETE).

GET Zahteva z Axios:

Ustvarite komponento MyBlog in jo priključite na življenjski cikel komponente DidMount. Uvozite Axios na vrhu in pridobite podatke z zahtevo 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;> >})}> >>
>);> >}> }> 

>

>

Tu uporabljamo axios.get (URL), da dobimo obljubo, ki vrne odzivni objekt. Vrnjeni odgovor je dodeljen objektu objave. Pridobimo lahko tudi druge podatke, kot je statusna koda itd.

POST Zahteva z Axios:

Ustvarite novo komponento AddPost za zahteve po objavi. Ta zahteva bo dodala objavo na seznam objav.

Javascript

vrsta vstavljanja java




// 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}'>Ime objave: type='text' name='name' onChange='{this.handleChange}' /> 'submit'>Add ); } }> 

>

>

V zgornji kodi smo naredili zahtevo za objavo HTTP in v bazo podatkov dodali novo objavo. Dogodek onChange sproži metodo handleChange() in posodobi zahtevo, ko zahteva API-ja uspešno vrne podatke.

Izbriši zahtevo z Axios:

Za pošiljanje zahteve za brisanje strežniku se uporablja axios.delete. Med izdelavo te zahteve URL in izbirno konfiguracijo morate določiti dva parametra.

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

Med pošiljanjem zahteve za brisanje boste morali nastaviti telo zahteve in glave. Za ta namen uporabite config.data. V zgornji zahtevi POST spremenite kodo, kot je navedeno spodaj ...

Javascript

jvm




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

>

>

Odzivni objekti v Axios:

Ko pošljete zahtevo strežniku, od strežnika prejmete odgovorni objekt s spodaj podanimi lastnostmi ...

  • podatki: Podatke prejmete s strežnika v obliki koristnega tovora. Ti podatki so vrnjeni v obliki JSON in razčlenjeni nazaj v objekt JavaScript.
  • stanje: Kodo HTTP vrnete s strežnika.
  • statusText: Sporočilo o statusu HTTP, ki ga vrne strežnik.
  • glave: Strežnik pošlje vse glave nazaj.
  • konfiguracija: prvotna konfiguracija zahteve.
  • prošnja: dejanski objekt XMLHttpRequest.

Objekt napake:

Če bo prišlo do težave z zahtevo, boste prejeli objekt napake. Obljuba bo zavrnjena z objektom napake z danimi lastnostmi

  • sporočilo: Besedilo sporočila o napaki.
  • odgovor: Objekt odgovora (če je prejet).
  • prošnja: Dejanski objekt XMLHttpRequest (ko se izvaja v brskalniku).
  • konfiguracija: Prvotna konfiguracija zahteve.

Značilnosti knjižnice Axios

  • Podatki JSON se samodejno preoblikujejo.
  • Preoblikuje podatke o zahtevi in ​​odgovoru.
  • Uporabno pri izdelavi zahtev HTTP iz Node.js
  • Iz brskalnika naredi XMLHttpRequests.
  • Zagotovite podporo na strani odjemalca za zaščito pred XSRF.
  • Podpira API za obećanje.
  • Možnost preklica zahteve.

Metode stenografije v Axios:

Spodaj je nekaj stenografskih metod Axios ...

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

Zaključek

Ta članek je razložil vse o knjižnici Axios. Razpravljali smo o nekaterih uporabnih operacijah, kot je pridobivanje podatkov, objava podatkov, posodabljanje podatkov ali brisanje podatkov v Axios. Ko boste začeli delati na Reactu, boste morali uporabiti to knjižnico za komunikacijo s strežnikom baze podatkov. Zato je pomembno, da to vadite in razumete, kako stvari delujejo v Axiosu.