AXIOS IN REACT: OPAS ALOITTELIJOILLE

Reactissa taustaviestintä tapahtuu tyypillisesti HTTP-protokollan avulla. Vaikka monet kehittäjät tuntevat XML HTTP-pyyntörajapinnan ja Fetch API:n HTTP-pyyntöjen tekemiseen, on olemassa toinen tehokas kirjasto nimeltä Axios, joka yksinkertaistaa prosessia entisestään.

Sisällysluettelo

Edellytykset
Johdatus Axiosiin
React-sovelluksen luomisen vaiheet
Axiosin tarve Reactissa
SAADA Pyyntö Axiosilta
POST-pyyntö Axiosin kanssa:
Poista pyyntö Axiosilla:
Response Objects in Axios
Virheobjekti:
Axios-kirjaston ominaisuudet
Pikakirjoitusmenetelmät Axiosissa
Johtopäätös

Johdatus Axiosiin:

Axios, joka on suosittu kirjasto, käytetään pääasiassa asynkronisten HTTP-pyyntöjen lähettämiseen REST-päätepisteisiin. Tämä kirjasto on erittäin hyödyllinen CRUD-toimintojen suorittamiseen.

Tätä suosittua kirjastoa käytetään kommunikoimaan taustajärjestelmän kanssa. Axios tukee Promise API:ta, joka on natiivi JS ES6:lle.
Axiosin avulla teemme API-pyyntöjä sovelluksessamme. Kun pyyntö on tehty, saamme tiedot Returnissa, jonka jälkeen käytämme näitä tietoja projektissamme.
Tämä kirjasto on erittäin suosittu kehittäjien keskuudessa. Voit tarkistaa GitHubista ja löytää siitä 78 000 tähteä.

Ennen kuin asennat Axiosin, React-projektisovelluksesi pitäisi olla valmis asentamaan tämä kirjasto. Luo Reagoi hakemus noudattamalla alla olevia vaiheita…

React-sovelluksen luomisen vaiheet:

Vaihe 1: Alla on komento luoda React-sovellus projektiisi…

npx create-react-app myreactapp>

Vaihe 2: Syötä ensimmäisessä vaiheessa luotuun hakemistoon.

cd myreactapp>

Vaihe 3: Asenna Axios-kirjasto käyttämällä alla olevaa komentoa…

npm i axios>

Hankkeen rakenne:

Kuvakaappaus-2023-10-06-09-44-29

rekha ikä

Päivitetyt riippuvuudet sisään package.json tiedosto.

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

Esimerkki: Tämä koodinpätkä käyttää aksioita HTTP-pyynnön tekemiseen taustapalvelimelle.

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)}> Lähetä tiedostoja );  } } vie oletussovellus;>>

> 
    
     Sovelluksen suorittamisen vaiheet:    Avaa pääte ja kirjoita seuraava komento.
 npm start>
     Lähtö:    Avaa selain ja projektimme näkyy URL-osoitteessa      http://localhost:3000/      
 Yllä oleva esimerkki on vain pieni koodin kuvaus, joka näyttää, kuinka Axiosta käytetään projektissasi. Keskustelemme useista menetelmistä, kuten GET, POST ja PUT Axiosissa tulevassa osiossa.
     Axioiden tarve reagoida:    
 Kuten olemme keskustelleet, Axios antaa sinun kommunikoida React-projektisi API:iden kanssa. Samat tehtävät voidaan suorittaa myös AJAXilla, mutta Axios tarjoaa sinulle enemmän toimintoja ja ominaisuuksia, mikä auttaa sinua rakentamaan sovelluksesi nopeasti.
 Axios on lupauspohjainen kirjasto, joten sinun on otettava käyttöön joitain lupauspohjaisia asynkronisia HTTP-pyyntöjä. jQuery ja AJAX tekevät myös saman työn, mutta React-projektissa React käsittelee jokaisen ja kaiken omassa virtuaalisessa DOMissaan, joten jQueryä ei tarvitse käyttää ollenkaan.
 Alla on esimerkki asiakkaan tietojen hakemisesta Axiosilla…
 Javascript
 
    
      
  
     
      
     
    
 
     const getCustomersData = () =>{> >axios> >.get(>' https://jsonplaceholder.typicode.com/customers '>)> >.then(data =>console.log(data.data))> >.>catch>(error =>console.log(error));> };> getCustomersData();>  
 
 
 
    
 >
 
    
 >
 
 Siirrytään nyt seuraavaan kohtaan ja ymmärrämme, kuinka erilaisia toimintoja voidaan suorittaa, kuten tietojen noutaminen tai tietojen kuluttaminen Axiosin avulla (GET-POST-DELETE).
     SAADA Pyyntö Axiosin kanssa:    
 Luo komponentti MyBlog ja liitä se komponentin DidMount elinkaareen. Tuo yläreunassa olevat Axiot ja hae tiedot Get-pyynnöllä.
 Javascript
 
    
      
  
     
      
     
    
miten java päivitetään
 
     // 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;> >})}> >>
 >);> >}> }>  
 
 
 
    
 >
 
    
 >
 
 Tässä käytämme axios.get-osoitetta (URL) saadaksemme lupauksen, joka palauttaa vastausobjektin. Palautettu vastaus on määritetty viestin objektiin. Voimme myös hakea muita tietoja, kuten tilakoodin jne.
     POST-pyyntö Axiosin kanssa:    
 Luo uusi komponentti AddPost Post-pyyntöjä varten. Tämä pyyntö lisää viestin viestiluetteloon.
 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}'>Viestin nimi: type='text' name='name' onChange='{this.handleChange}' /> 'submit'>Lisää );  } }>  
 
 
 
    
 >
 
    
 >
 
 Yllä olevassa koodissa olemme tehneet HTTP Post -pyynnön ja lisänneet uuden viestin tietokantaan. OnChange-tapahtuma laukaisee menetelmän handleChange() ja päivittää pyynnön, kun API-pyyntö palauttaa tiedot onnistuneesti.
     Poista pyyntö Axiosilla:    
 Poistopyynnön lähettämiseen palvelimelle käytetään axios.deletea. Sinun on määritettävä kaksi parametria tehdessäsi tämän pyynnön URL-osoitetta ja valinnaista konfiguraatiota.
 axios.delete(url, {   data: { foo: 'bar' },   headers: { 'Authorization': '******' }  });>
 Kun lähetät poistopyynnön, sinun on asetettava pyynnön tekstiosa ja otsikot. Käytä tähän tarkoitukseen config.dataa. Muokkaa yllä olevassa POST-pyynnössä olevaa koodia alla kuvatulla tavalla…
 Javascript
 
    
powershell vs bash
      
  
     
      
     
    
 
     handleSubmit = event =>{> >event.preventDefault();> >axios.>delete>(> >`https:>//jsonplaceholder.typicode.com/posts/${this.state.postName}`)> >.then(res =>{> >console.log(res);> >console.log(res.data);> >})> }>  
 
 
 
    
 >
 
    
 >
 
     Vastausobjektit Axiosissa:    
 Kun lähetät pyynnön palvelimelle, saat palvelimelta vastausobjektin alla olevilla ominaisuuksilla…
      tiedot:    Saat tiedot palvelimelta hyötykuorman muodossa. Nämä tiedot palautetaan JSON-muodossa ja jäsennetään takaisin JavaScript-objektiksi sinulle.
     Tila:    Saat palvelimelta palautetun HTTP-koodin.
     statusTeksti:    Palvelimen palauttama HTTP-tilaviesti.
     otsikot:    Palvelin lähettää kaikki otsikot takaisin.
     konfigurointi:    alkuperäinen pyyntömääritys.
     pyyntö:    todellinen XMLHttpRequest-objekti.
 
     Virheobjekti:    
 Saat virheobjektin, jos pyynnössä on ongelma. Lupaus hylätään virheobjektilla, jolla on annetut ominaisuudet
      viesti:    Virheviestin teksti.
     vastaus:    Vastausobjekti (jos vastaanotettu).
     pyyntö:    Todellinen XMLHttpRequest-objekti (kun suoritetaan selaimessa).
     konfigurointi:    Alkuperäinen pyyntömääritys.
 
     Axios-kirjaston ominaisuudet    
  JSON-tiedot muunnetaan automaattisesti.
 Se muuttaa pyyntö- ja vastaustiedot.
 Hyödyllinen HTTP-pyyntöjen tekemisessä Node.js:stä
 Se tekee XMLHttpRequests selaimesta.
 Tarjoa asiakaspuolen tukea XSRF:ltä suojaamiseksi.
 Tukee lupaus API:ta.
 Mahdollisuus peruuttaa pyyntö.
 
     Pikakirjoitusmenetelmät Axiosissa:    
 Alla on joitain Axiosin pikakirjoitusmenetelmiä…
  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]])
 
 Johtopäätös
 Tämä artikkeli selitti kaiken Axios-kirjastosta. Olemme keskustelleet hyödyllisistä toiminnoista, kuten tietojen hakemisesta, lähettämisestä, tietojen päivittämisestä tai tietojen poistamisesta Axiosissa. Kun aloitat Reactin työskentelyn, sinun on käytettävä tätä kirjastoa kommunikoidaksesi tietokantapalvelimen kanssa. Siksi on tärkeää harjoitella sitä ja ymmärtää, miten asiat toimivat Axioksessa.

TechCodeview

Johdatus Axiosiin:

React-sovelluksen luomisen vaiheet:

Javascript

Axioiden tarve reagoida:

Javascript

SAADA Pyyntö Axiosin kanssa:

Javascript

POST-pyyntö Axiosin kanssa:

Javascript

Poista pyyntö Axiosilla:

Javascript

Vastausobjektit Axiosissa:

Virheobjekti:

Axios-kirjaston ominaisuudet

Pikakirjoitusmenetelmät Axiosissa:

Johtopäätös