I React oppnås backend-kommunikasjon vanligvis ved å bruke HTTP-protokollen. Mens mange utviklere er kjent med XML HTTP-forespørselsgrensesnittet og Fetch API for å lage HTTP-forespørsler, er det et annet kraftig bibliotek kalt Axios som forenkler prosessen ytterligere.

Innholdsfortegnelse

• Forutsetninger
• Introduksjon til Axios
• Trinn for å lage React-applikasjon
• Behov for Axios i React
• FÅ forespørsel med Axios
• POST-forespørsel med Axios:
• Slett forespørsel med Axios:
• Responsobjekter i Axios
• Feilobjekt:
• Funksjoner i Axios Library
• Stenografimetoder i Axios
• Konklusjon

Introduksjon til Axios:

Axios, som er et populært bibliotek, brukes hovedsakelig til å sende asynkrone HTTP-forespørsler til REST-endepunkter. Dette biblioteket er veldig nyttig for å utføre CRUD-operasjoner.

1. Dette populære biblioteket brukes til å kommunisere med backend. Axios støtter Promise API, innfødt til JS ES6.
2. Ved å bruke Axios lager vi API-forespørsler i applikasjonen vår. Når forespørselen er gjort får vi dataene i Return, og deretter bruker vi disse dataene i prosjektet vårt.
3. Dette biblioteket er veldig populært blant utviklere. Du kan sjekke på GitHub og du vil finne 78k stjerner på den.

Før du installerer Axios, bør React-prosjektappen din være klar til å installere dette biblioteket. Lage en Reagere søknad ved å følge trinnene nedenfor...

Fremgangsmåte for å lage en reaksjonsapplikasjon:

Trinn 1: Nedenfor er kommandoen for å lage React-appen i prosjektet ditt...

npx create-react-app myreactapp 

Steg 2: Gå inn i katalogen som ble opprettet i det første trinnet.

cd myreactapp 

Trinn 3: Installer Axios-biblioteket ved å bruke kommandoen gitt nedenfor...

npm i axios 

Prosjektstruktur:

De oppdaterte avhengighetene i package.json fil.

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

Eksempel: Denne kodebiten bruker aksioer for å sende en HTTP-forespørsel til backend-serveren.

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)}> Send filer ); } } eksporter standard app;>

Trinn for å kjøre applikasjonen: Åpne terminalen og skriv inn følgende kommando.

npm start 

Produksjon: Åpne nettleseren og prosjektet vårt vises i URL-en http://localhost:3000/

Eksemplet ovenfor er bare en liten kodebeskrivelse for å vise frem hvordan du bruker Axios i prosjektet ditt. Vi vil diskutere flere metoder som GET, POST og PUT i Axios i den kommende delen.

Behov for Axios i React:

Som vi har diskutert, lar Axios deg kommunisere med API-ene i React-prosjektet ditt. De samme oppgavene kan også utføres ved å bruke AJAX, men Axios gir deg mer funksjonalitet og funksjoner, og det hjelper deg med å bygge applikasjonen din raskt.

Axios er et løftebasert bibliotek, så du må implementere noen løftebaserte asynkrone HTTP-forespørsler. jQuery og AJAX utfører også den samme jobben, men i React-prosjektet håndterer React alt i sin egen virtuelle DOM, så det er ikke nødvendig å bruke jQuery i det hele tatt.

Nedenfor er et eksempel for å hente kundens data ved hjelp av Axios...

Javascript

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

La oss nå komme til neste punkt og forstå hvordan forskjellige operasjoner kan utføres som å hente dataene eller konsumere dataene ved å bruke Axios (GET-POST-DELETE).

FÅ forespørsel med Axios:

Opprett en komponent MyBlog og koble den inn i komponentens DidMount-livssyklus. Importer Axios øverst og hent dataene med Get request.

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;> > })}> > > > );> > }> }>

Her bruker vi axios.get (URL) for å få et løfte som returnerer et responsobjekt. Returnert svar tilordnes innleggets objekt. Vi kan også hente annen informasjon som statuskode etc.

POST-forespørsel med Axios:

Opprett en ny komponent AddPost for Post-forespørsler. Denne forespørselen vil legge til et innlegg i postlisten.

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}'>Innleggsnavn: type='tekst' navn='navn' onChange='{this.handleChange}' /> 'submit'>Legg til ); } }>

I koden ovenfor har vi laget en HTTP Post-forespørsel og lagt til et nytt innlegg i databasen. OnChange-hendelsen utløser metoden handleChange() og oppdaterer forespørselen når API-forespørselen returnerer dataene.

Slett forespørsel med Axios:

For å sende sletteforespørselen til serveren brukes axios.delete. Du må spesifisere to parametere mens du lager denne forespørsels-URLen og valgfri konfig.

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

Mens du sender sletteforespørselen, må du angi forespørselens tekst og overskrifter. Bruk config.data til dette formålet. I POST-forespørselen ovenfor, endre koden som gitt nedenfor...

Javascript

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

Responsobjekter i Axios:

Når du sender en forespørsel til serveren, mottar du et svarobjekt fra serveren med egenskapene gitt nedenfor...

• data: Du mottar data fra serveren i nyttelastform. Disse dataene returneres i JSON-form og analyseres tilbake til et JavaScript-objekt til deg.
• status: Du får HTTP-koden returnert fra serveren.
• statustekst: HTTP-statusmelding returnert av serveren.
• overskrifter: Alle overskriftene sendes tilbake av serveren.
• config: opprinnelig forespørselskonfigurasjon.
• be om: faktiske XMLHttpRequest-objekt.

Feilobjekt:

Du vil få et feilobjekt hvis det blir et problem med forespørselen. Løfte vil bli avvist med et feilobjekt med egenskapene gitt

• beskjed: Feilmeldingstekst.
• respons: Svarobjekt (hvis mottatt).
• be om: Faktisk XMLHttpRequest-objekt (når det kjøres i en nettleser).
• config: Opprinnelig forespørselskonfigurasjon.

Funksjoner i Axios Library

• JSON-data transformeres automatisk.
• Den transformerer forespørsels- og svardataene.
• Nyttig for å lage HTTP-forespørsler fra Node.js
• Det lager XMLHttpRequests fra nettleseren.
• Gi støtte på klientsiden for å beskytte mot XSRF.
• Støtter løfte API.
• Mulighet til å kansellere forespørselen.

Stenografimetoder i Axios:

Nedenfor er noen stenografiske metoder for 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]])

Konklusjon

Denne artikkelen forklarte alt om Axios-biblioteket. Vi har diskutert noen nyttige operasjoner som å hente dataene, legge ut dataene, oppdatere dataene eller slette dataene i Axios. Når du begynner å jobbe med React, må du bruke dette biblioteket for å kommunisere med databaseserveren. Så det er viktig å øve seg på det og forstå hvordan ting fungerer i Axios.