logo

TechCodeview

Axios in React: En guide för nybörjare

I React uppnås backend-kommunikation vanligtvis med hjälp av HTTP-protokollet. Medan många utvecklare är bekanta med XML HTTP-förfrågningsgränssnittet och Fetch API för att göra HTTP-förfrågningar, finns det ett annat kraftfullt bibliotek som heter Axios som förenklar processen ytterligare.

Innehållsförteckning



Introduktion till Axios:

Axios, som är ett populärt bibliotek, används främst för att skicka asynkrona HTTP-förfrågningar till REST-slutpunkter. Det här biblioteket är mycket användbart för att utföra CRUD-operationer.

  1. Detta populära bibliotek används för att kommunicera med backend. Axios stöder Promise API, inbyggt i JS ES6.
  2. Med Axios gör vi API-förfrågningar i vår applikation. När begäran är gjord får vi uppgifterna i Return, och sedan använder vi dessa uppgifter i vårt projekt.
  3. Detta bibliotek är mycket populärt bland utvecklare. Du kan kolla på GitHub och du hittar 78k stjärnor på den.

Innan du installerar Axios bör din React-projektapp vara redo att installera det här biblioteket. Skapa en Reagera ansökan enligt stegen nedan...

Steg för att skapa React Application:

Steg 1: Nedan är kommandot för att skapa React-appen i ditt projekt...



npx create-react-app myreactapp>

Steg 2: Gå in i katalogen som skapades i det första steget.

cd myreactapp>

Steg 3: Installera Axios-biblioteket med kommandot nedan...

npm i axios>

Projektets struktur:



Skärmdump-från-2023-10-06-09-44-29

c++ prototypfunktion

De uppdaterade beroendena 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' },>

Exempel: Detta kodavsnitt använder axios för att göra en HTTP-begäran till backend-servern.

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)}> Skicka filer ); } } exportera standardapp;> 

>

>

Steg för att köra programmet: Öppna terminalen och skriv följande kommando.

npm start>

Produktion: Öppna webbläsaren och vårt projekt visas i URL:en http://localhost:3000/

Exemplet ovan är bara en liten kodbeskrivning för att visa hur du använder Axios i ditt projekt. Vi kommer att diskutera flera metoder som GET, POST och PUT i Axios i det kommande avsnittet.

Behov av Axios i React:

Som vi har diskuterat låter Axios dig kommunicera med API:erna i ditt React-projekt. Samma uppgifter kan också utföras med AJAX, men Axios ger dig mer funktionalitet och funktioner och det hjälper dig att snabbt bygga din applikation.

Axios är ett löftesbaserat bibliotek, så du måste implementera några löftesbaserade asynkrona HTTP-förfrågningar. jQuery och AJAX utför också samma jobb men i React-projektet hanterar React allt i sitt eget virtuella DOM, så det finns inget behov av att använda jQuery alls.

Nedan är ett exempel för att hämta kundens data med Axios...

Javascript




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

sammanlänkning java-sträng 
>

>

Låt oss nu komma till nästa punkt och förstå hur olika operationer kan utföras som att hämta data eller konsumera data med Axios (GET-POST-DELETE).

GET-förfrågan med Axios:

Skapa en komponent MyBlog och koppla in den i komponentens DidMount-livscykel. Importera Axios högst upp och hämta data 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;> >})}> >>
>);> >}> }> 

>

>

Här använder vi axios.get (URL) för att få ett löfte som returnerar ett responsobjekt. Returnerat svar tilldelas inläggets objekt. Vi kan även hämta annan information som statuskod mm.

POST-förfrågan med Axios:

Skapa en ny komponent AddPost för Post-förfrågningar. Denna begäran kommer att lägga till ett inlägg till inläggslistan.

Javascript




stdin i c
// 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}'>Inläggets namn: typ='text' name='namn' onChange='{this.handleChange}' /> 'submit'>Lägg till ); } }> 

>

>

I ovanstående kod har vi gjort en HTTP Post-förfrågan och lagt till ett nytt inlägg i databasen. Händelsen onChange utlöser metoden handleChange() och uppdaterar begäran när API-begäran returnerar data framgångsrikt.

Ta bort begäran med Axios:

För att skicka raderingsförfrågan till servern används axios.delete. Du måste ange två parametrar när du gör denna begäran URL och valfri konfiguration.

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

När du skickar borttagningsbegäran måste du ställa in förfrågans text och rubriker. Använd config.data för detta ändamål. I ovanstående POST-begäran, ändra koden enligt nedan...

Javascript




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

>

dubbel i java 
>

Svarsobjekt i Axios:

När du skickar en förfrågan till servern får du ett svarsobjekt från servern med egenskaperna nedan...

  • data: Du får data från servern i nyttolastform. Denna data returneras i JSON-form och analyseras tillbaka till ett JavaScript-objekt till dig.
  • status: Du får HTTP-koden tillbaka från servern.
  • statusText: HTTP-statusmeddelande som returneras av servern.
  • rubriker: Alla rubriker skickas tillbaka av servern.
  • config: ursprungliga begäran konfiguration.
  • begäran: faktiska XMLHttpRequest-objekt.

Felobjekt:

Du får ett felobjekt om det blir problem med begäran. Löfte kommer att avvisas med ett felobjekt med de angivna egenskaperna

  • meddelande: Felmeddelande text.
  • svar: Svarsobjekt (om mottaget).
  • begäran: Faktiskt XMLHttpRequest-objekt (när det körs i en webbläsare).
  • config: Ursprunglig begäran konfiguration.

Funktioner i Axios Library

  • JSON-data omvandlas automatiskt.
  • Den omvandlar förfrågnings- och svarsdata.
  • Användbar för att göra HTTP-förfrågningar från Node.js
  • Det gör XMLHttpRequests från webbläsaren.
  • Ge support på klientsidan för att skydda mot XSRF.
  • Stöder löfte API.
  • Möjlighet att avbryta begäran.

Stenografimetoder i Axios:

Nedan finns några stenografiska metoder för 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]])

Slutsats

Den här artikeln förklarade allt om Axios-biblioteket. Vi har diskuterat några användbara operationer som att hämta data, lägga upp data, uppdatera data eller ta bort data i Axios. När du väl börjar arbeta med React måste du använda det här biblioteket för att kommunicera med databasservern. Så det är viktigt att öva på det och förstå hur saker och ting fungerar i Axios.