logo

TechCodeview

Axios in React: En guide for nybegynnere

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



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:



Skjermbilde-fra-2023-10-06-09-44-29

java tilfeldig matematikk tilfeldig

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/

array som legger til elementer java

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

instansiering i java 

>

>

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




kvikksortering
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.