logo

TechCodeview

Axios in React: een gids voor beginners

In React wordt backend-communicatie doorgaans bereikt met behulp van het HTTP-protocol. Hoewel veel ontwikkelaars bekend zijn met de XML HTTP-verzoekinterface en de Fetch API voor het doen van HTTP-verzoeken, is er nog een krachtige bibliotheek genaamd Axios die het proces verder vereenvoudigt.

Inhoudsopgave



Inleiding tot Axios:

Axios, een populaire bibliotheek, wordt voornamelijk gebruikt om asynchrone HTTP-verzoeken naar REST-eindpunten te verzenden. Deze bibliotheek is erg handig om CRUD-bewerkingen uit te voeren.

  1. Deze populaire bibliotheek wordt gebruikt om met de backend te communiceren. Axios ondersteunt de Promise API, eigen aan JS ES6.
  2. Met Axios doen we API-verzoeken in onze applicatie. Zodra de aanvraag is gedaan, krijgen we de gegevens in Return en gebruiken we deze gegevens in ons project.
  3. Deze bibliotheek is erg populair onder ontwikkelaars. Je kunt GitHub bekijken en je vindt er 78.000 sterren op.

Voordat u Axios installeert, moet uw React-projectapp gereed zijn om deze bibliotheek te installeren. Maak een Reageer aanvraag volgens de onderstaande stappen...

Stappen om een ​​React-applicatie te maken:

Stap 1: Hieronder vindt u de opdracht om de React-app in uw project te maken...



npx create-react-app myreactapp>

Stap 2: Voer de map in die in de eerste stap is aangemaakt.

cd myreactapp>

Stap 3: Installeer de Axios-bibliotheek met behulp van de onderstaande opdracht ...

npm i axios>

Projectstructuur:



Screenshot-van-2023-10-06-09-44-29

Java-punt

De bijgewerkte afhankelijkheden in pakket.json bestand.

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

Voorbeeld: Dit codefragment gebruikt axios om een ​​HTTP-verzoek in te dienen bij de backend-server.

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)}> Bestanden verzenden ); } } standaardapp exporteren;> 

>

>

Stappen om de applicatie uit te voeren: Open de terminal en typ de volgende opdracht.

npm start>

Uitgang: Open de browser en ons project wordt weergegeven in de URL http://localhost:3000/

Het bovenstaande voorbeeld is slechts een kleine codebeschrijving om te laten zien hoe u Axios in uw project kunt gebruiken. In de komende sectie zullen we meerdere methoden bespreken, zoals GET, POST en PUT in Axios.

Behoefte aan Axios in React:

Zoals we hebben besproken, kunt u met Axios communiceren met de API's in uw React-project. Dezelfde taken kunnen ook worden uitgevoerd met behulp van AJAX, maar Axios biedt u meer functionaliteit en functionaliteit en dat helpt u bij het snel bouwen van uw applicatie.

Axios is een op beloftes gebaseerde bibliotheek, dus u moet enkele op beloftes gebaseerde asynchrone HTTP-verzoeken implementeren. jQuery en AJAX voeren ook dezelfde taak uit, maar in het React-project verwerkt React alles in zijn eigen virtuele DOM, dus het is helemaal niet nodig om jQuery te gebruiken.

Hieronder ziet u een voorbeeld om de gegevens van de klant op te halen met Axios…

Javascript




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

powershell-beheerder 
>

>

Laten we nu naar het volgende punt gaan en begrijpen hoe verschillende bewerkingen kunnen worden uitgevoerd, zoals het ophalen van de gegevens of het consumeren van de gegevens met behulp van Axios (GET-POST-DELETE).

KRIJG een verzoek met Axios:

Maak een component MyBlog en koppel deze aan de component DidMount-levenscyclus. Importeer de Axios bovenaan en haal de gegevens op met 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;> >})}> >>
>);> >}> }> 

>

>

Hier gebruiken we axios.get (URL) om een ​​belofte te krijgen die een antwoordobject retourneert. Het geretourneerde antwoord wordt toegewezen aan het object van het bericht. Ook andere informatie zoals statuscode etc. kunnen wij opvragen.

POST-verzoek met Axios:

Maak een nieuwe component AddPost voor postverzoeken. Met dit verzoek wordt een bericht aan de berichtenlijst toegevoegd.

Javascript




waarde van tekenreeks 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}'>Berichtnaam: type='text' name='name' onChange='{this.handleChange}' /> 'submit'>Toevoegen ); } }> 

>

>

In de bovenstaande code hebben we een HTTP Post-verzoek gedaan en een nieuw bericht aan de database toegevoegd. De onChange-gebeurtenis activeert de methode handleChange() en werkt het verzoek bij wanneer het API-verzoek de gegevens succesvol retourneert.

Aanvraag verwijderen met Axios:

Om het verwijderverzoek naar de server te sturen wordt axios.delete gebruikt. U moet twee parameters opgeven tijdens het maken van deze aanvraag-URL en optionele configuratie.

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

Terwijl u het verwijderingsverzoek verzendt, moet u de hoofdtekst en headers van het verzoek instellen. Gebruik hiervoor config.data. Wijzig in het bovenstaande POST-verzoek de code zoals hieronder aangegeven...

Javascript




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

>

mijn live cricket 
>

Antwoordobjecten in Axios:

Wanneer u een verzoek naar de server verzendt, ontvangt u een antwoordobject van de server met de onderstaande eigenschappen...

  • gegevens: U ontvangt gegevens van de server in payload-vorm. Deze gegevens worden in JSON-vorm geretourneerd en weer in een JavaScript-object aan u ontleed.
  • toestand: U krijgt de HTTP-code teruggestuurd van de server.
  • statusTekst: HTTP-statusbericht geretourneerd door de server.
  • kopteksten: Alle headers worden door de server teruggestuurd.
  • configuratie: oorspronkelijke verzoekconfiguratie.
  • verzoek: daadwerkelijk XMLHttpRequest-object.

Foutobject:

U krijgt een foutmelding als er een probleem is met de aanvraag. De belofte wordt afgewezen met een foutobject met de opgegeven eigenschappen

  • bericht: Tekst foutmelding.
  • antwoord: Antwoordobject (indien ontvangen).
  • verzoek: Werkelijk XMLHttpRequest-object (bij uitvoering in een browser).
  • configuratie: Oorspronkelijke verzoekconfiguratie.

Kenmerken van Axios-bibliotheek

  • JSON-gegevens worden automatisch getransformeerd.
  • Het transformeert de verzoek- en antwoordgegevens.
  • Handig bij het maken van HTTP-verzoeken vanuit Node.js
  • Het maakt XMLHttpRequests vanuit de browser.
  • Bied ondersteuning aan de clientzijde voor bescherming tegen XSRF.
  • Ondersteunt belofte-API.
  • Mogelijkheid om het verzoek te annuleren.

Verkorte methoden in Axios:

Hieronder vindt u enkele verkorte methoden van Axios...

  • axios.request(config)
  • axios.head(url[, configuratie])
  • axios.get(url[, configuratie])
  • axios.post(url[, data[, configuratie]])
  • axios.put(url[, gegevens[, configuratie]])
  • axios.delete(url[, configuratie])
  • axios.options(url[, configuratie])
  • axios.patch(url[, data[, configuratie]])

Conclusie

In dit artikel wordt alles uitgelegd over de Axios-bibliotheek. We hebben enkele nuttige handelingen besproken, zoals het ophalen van de gegevens, het plaatsen van de gegevens, het bijwerken van de gegevens of het verwijderen van de gegevens in Axios. Zodra u aan React gaat werken, moet u deze bibliotheek gebruiken om met de databaseserver te communiceren. Het is dus belangrijk om er praktijk mee te maken en te begrijpen hoe dingen werken in Axios.