logo

TechCodeview

Axios in React: En guide for begyndere

I React opnås backend-kommunikation typisk ved hjælp af HTTP-protokollen. Mens mange udviklere er bekendt med XML HTTP-anmodningsgrænsefladen og Fetch API til at lave HTTP-anmodninger, er der et andet kraftfuldt bibliotek kaldet Axios, der forenkler processen yderligere.

Indholdsfortegnelse



Introduktion til Axios:

Axios, som er et populært bibliotek, bruges hovedsageligt til at sende asynkrone HTTP-anmodninger til REST-endepunkter. Dette bibliotek er meget nyttigt til at udføre CRUD-operationer.

  1. Dette populære bibliotek bruges til at kommunikere med backend. Axios understøtter Promise API, der er hjemmehørende i JS ES6.
  2. Ved hjælp af Axios laver vi API-anmodninger i vores applikation. Når anmodningen er lavet, får vi dataene i Return, og så bruger vi disse data i vores projekt.
  3. Dette bibliotek er meget populært blandt udviklere. Du kan tjekke på GitHub, og du vil finde 78k stjerner på den.

Før du installerer Axios, bør din React-projektapp være klar til at installere dette bibliotek. Lave en Reagere ansøgning ved at følge nedenstående trin...

Trin til at oprette React Application:

Trin 1: Nedenfor er kommandoen til at oprette React app i dit projekt...



npx create-react-app myreactapp>

Trin 2: Gå ind i den mappe, der blev oprettet i det første trin.

cd myreactapp>

Trin 3: Installer Axios-biblioteket ved hjælp af kommandoen nedenfor...

npm i axios>

Projektets struktur:



Skærmbillede-fra-2023-10-06-09-44-29

fagforening vs fagforening alle

De opdaterede afhængigheder 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: Dette kodestykke bruger axios til at lave en HTTP-anmodning 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 standardapp;> 

>

>

Trin til at køre applikationen: Åbn terminalen og skriv følgende kommando.

npm start>

Produktion: Åbn browseren og vores projekt vises i URL'en http://localhost:3000/

round robin planlægningsalgoritme

Ovenstående eksempel er blot en lille kodebeskrivelse for at vise, hvordan du bruger Axios i dit projekt. Vi vil diskutere flere metoder såsom GET, POST og PUT i Axios i det kommende afsnit.

Behov for Axios i React:

Som vi har diskuteret, giver Axios dig mulighed for at kommunikere med API'erne i dit React-projekt. De samme opgaver kan også udføres ved at bruge AJAX, men Axios giver dig mere funktionalitet og funktioner, og det hjælper dig med at opbygge din applikation hurtigt.

Axios er et løftebaseret bibliotek, så du skal implementere nogle løftebaserede asynkrone HTTP-anmodninger. jQuery og AJAX udfører også det samme job, men i React-projektet håndterer React alt i sit eget virtuelle DOM, så der er ingen grund til at bruge jQuery overhovedet.

Nedenfor er et eksempel til at hente kundens data ved hjælp af Axios...

Javascript




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

>

>

Lad os nu komme til næste punkt og forstå, hvordan forskellige operationer kan udføres, såsom at hente dataene eller forbruge dataene ved hjælp af Axios (GET-POST-DELETE).

FÅ anmodning med Axios:

Opret en MyBlog-komponent, og tilslut den til komponentens DidMount-livscyklus. 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 bruger vi axios.get (URL) til at få et løfte, der returnerer et svarobjekt. Returneret svar tildeles til indlæggets objekt. Vi kan også hente andre oplysninger såsom statuskode mm.

POST-anmodning med Axios:

Opret en ny komponent AddPost for Post-anmodninger. Denne anmodning tilføjer et indlæg til 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}'>Indlægsnavn: type='tekst' navn='navn' onChange='{this.handleChange}' /> 'submit'>Tilføj ); } }> 

>

>

I ovenstående kode har vi lavet en HTTP Post-anmodning og tilføjet et nyt indlæg til databasen. OnChange-hændelsen udløser metoden handleChange() og opdaterer anmodningen, når API-anmodningen returnerer dataene.

Slet anmodning med Axios:

For at sende sletteanmodningen til serveren bruges axios.delete. Du skal angive to parametre, mens du laver denne anmodnings-URL og valgfri konfiguration.

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

Mens du sender sletteanmodningen, skal du indstille anmodningens tekst og overskrifter. Brug config.data til dette formål. I ovenstående POST-anmodning skal du ændre koden som angivet nedenfor...

Javascript




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

>

>

Svarobjekter i Axios:

Når du sender en anmodning til serveren, modtager du et svarobjekt fra serveren med egenskaberne angivet nedenfor...

  • data: Du modtager data fra serveren i nyttelastform. Disse data returneres i JSON-form og parses tilbage til et JavaScript-objekt til dig.
  • status: Du får HTTP-koden retur fra serveren.
  • statustekst: HTTP-statusmeddelelse returneret af serveren.
  • overskrifter: Alle overskrifter sendes tilbage af serveren.
  • config: oprindelige anmodningskonfiguration.
  • anmodning: faktiske XMLHttpRequest-objekt.

Fejlobjekt:

Du vil få et fejlobjekt, hvis der vil være et problem med anmodningen. Løfte vil blive afvist med et fejlobjekt med de angivne egenskaber

  • besked: Fejlmeddelelsestekst.
  • respons: Svarobjekt (hvis modtaget).
  • anmodning: Faktisk XMLHttpRequest-objekt (når det kører i en browser).
  • config: Oprindelig anmodningskonfiguration.

Funktioner i Axios Library

  • JSON-data transformeres automatisk.
  • Det transformerer anmodnings- og svardataene.
  • Nyttigt til at lave HTTP-anmodninger fra Node.js
  • Det laver XMLHttpRequests fra browseren.
  • Giv klientsidesupport til beskyttelse mod XSRF.
  • Understøtter løfte API.
  • Mulighed for at annullere anmodningen.

Stenografimetoder i Axios:

Nedenfor er nogle stenografiske metoder til 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]])

Konklusion

Denne artikel forklarede alt om Axios-biblioteket. Vi har diskuteret nogle nyttige operationer såsom at hente dataene, sende dataene, opdatere dataene eller slette dataene i Axios. Når du begynder at arbejde på React, skal du bruge dette bibliotek til at kommunikere med databaseserveren. Så det er vigtigt at øve sig i det og forstå, hvordan tingene fungerer i Axios.