logo

TechCodeview

„Axios in React“: vadovas pradedantiesiems

React sistemoje užpakalinis ryšys paprastai pasiekiamas naudojant HTTP protokolą. Nors daugelis kūrėjų yra susipažinę su XML HTTP užklausų sąsaja ir Fetch API HTTP užklausoms teikti, yra dar viena galinga biblioteka, vadinama Axios, kuri dar labiau supaprastina procesą.

Turinys



Įvadas į Axios:

„Axios“, kuri yra populiari biblioteka, daugiausia naudojama asinchroninėms HTTP užklausoms siųsti į REST galinius taškus. Ši biblioteka labai naudinga atliekant CRUD operacijas.

  1. Ši populiari biblioteka naudojama bendravimui su pagrindine programa. „Axios“ palaiko „Promise“ API, sukurtą JS ES6.
  2. Naudodami „Axios“ savo programoje pateikiame API užklausas. Pateikę užklausą, mes gauname duomenis „Return“, o tada naudojame šiuos duomenis savo projekte.
  3. Ši biblioteka yra labai populiari tarp kūrėjų. Galite patikrinti „GitHub“ ir jame rasite 78 tūkst.

Prieš diegiant „Axios“, jūsų „React“ projekto programa turėtų būti paruošta įdiegti šią biblioteką. Sukurti Reaguoti paraišką atlikdami toliau nurodytus veiksmus...

„React“ programos kūrimo veiksmai:

1 žingsnis: Žemiau yra komanda sukurti „React“ programą savo projekte ...



npx create-react-app myreactapp>

2 žingsnis: Įveskite pirmame žingsnyje sukurtą katalogą.

cd myreactapp>

3 veiksmas: Įdiekite Axios biblioteką naudodami toliau pateiktą komandą ...

npm i axios>

Projekto struktūra:



Ekrano kopija-nuo-2023-10-06-09-44-29

dvejetainės paieškos algoritmas

Atnaujintos priklausomybės package.json failą.

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

Pavyzdys: Šis kodo fragmentas naudoja axios, kad pateiktų HTTP užklausą vidiniam serveriui.

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)}> Siųsti failus ); } } eksportuoti numatytąją programą;>> 

> 
    
     Programos paleidimo veiksmai:    Atidarykite terminalą ir įveskite šią komandą.
 
npm start>
 
    Išvestis:    Atidarykite naršyklę ir mūsų projektas bus rodomas URL      http://localhost:3000/      
 
Aukščiau pateiktas pavyzdys yra tik nedidelis kodo aprašymas, skirtas parodyti, kaip naudoti „Axios“ savo projekte. Būsimame skyriuje aptarsime kelis metodus, tokius kaip GET, POST ir PUT in Axios.
 
    „Axios“ poreikis reaguoja:    
 
Kaip jau aptarėme, „Axios“ leidžia bendrauti su API jūsų „React“ projekte. Tas pačias užduotis taip pat galima atlikti naudojant AJAX, tačiau „Axios“ suteikia daugiau funkcijų ir funkcijų, o tai padeda greitai sukurti programą.
java localdatetime

 
„Axios“ yra pažadais pagrįsta biblioteka, todėl turite įdiegti kai kurias pažadais pagrįstas asinchronines HTTP užklausas. „jQuery“ ir AJAX taip pat atlieka tą patį darbą, tačiau „React“ projekte „React“ tvarko kiekvieną ir viską savo virtualiame DOM, todėl visai nereikia naudoti „jQuery“.
 
Žemiau pateikiamas pavyzdys, kaip gauti kliento duomenis naudojant „Axios“…
 
Javascript
 
    
 
     
  
 
    
 
     
     
    
 
 
  
  const getCustomersData = () =>{> >axios> >.get(>' https://jsonplaceholder.typicode.com/customers '>)> >.then(data =>console.log(data.data))> >.>catch>(error =>console.log(error));> };> getCustomersData();>  
  
 
    
 
>
 
    
 
>
 
 
Dabar pereikime prie kito punkto ir suprasime, kaip galima atlikti įvairias operacijas, pvz., gauti duomenis arba naudoti duomenis naudojant „Axios“ (GET-POST-DELETE).
 
    GAUTI užklausą su „Axios“:    
 
Sukurkite komponentą „MyBlog“ ir prijunkite jį prie komponento „DidMount“ gyvavimo ciklo. Importuokite viršuje esančius „Axios“ ir gaukite duomenis naudodami „Gauti užklausą“.
 
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;> >})}> >>
 >);> >}> }> 		 
  
 
    
 
>
 
sąrašai java

    
 
>
 
 
Čia mes naudojame axios.get (URL), kad gautume pažadą, grąžinantį atsakymo objektą. Grąžintas atsakymas priskiriamas įrašo objektui. Taip pat galime gauti kitą informaciją, pvz., būsenos kodą ir pan.
 
    POST užklausa naudojant „Axios“:    
 
Sukurkite naują komponentą „AddPost“, skirtą įrašų užklausoms. Ši užklausa įrašą įtrauks į įrašų sąrašą.
 
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}'>Įrašo pavadinimas: type='text' name='name' onChange='{this.handleChange}' /> 'submit'>Pridėti );  } }>> 
  
 
    
 
> 
    
 Aukščiau pateiktame kode pateikėme HTTP pašto užklausą ir į duomenų bazę įtraukėme naują įrašą. Įvykis onChange suaktyvina metodą handleChange() ir atnaujina užklausą, kai API užklausa sėkmingai grąžina duomenis.
 
    Ištrinti užklausą naudojant „Axios“:    
 
Norėdami išsiųsti ištrynimo užklausą į serverį, naudojamas axios.delete. Pateikdami šios užklausos URL ir pasirenkamą konfigūraciją turite nurodyti du parametrus.
 
axios.delete(url, {   data: { foo: 'bar' },   headers: { 'Authorization': '******' }  });>
 
Siųsdami panaikinimo užklausą turėsite nustatyti užklausos turinį ir antraštes. Šiuo tikslu naudokite config.data. Aukščiau pateiktoje POST užklausoje pakeiskite kodą, kaip nurodyta toliau…
 
Javascript
 
    
 
     
  
 
    
 
     
     
    
 
 
  
  handleSubmit = event =>{> >event.preventDefault();> >axios.>delete>(> >`https:>//jsonplaceholder.typicode.com/posts/${this.state.postName}`)> >.then(res =>{> >console.log(res);> >console.log(res.data);> >})> }>  
  
 
    
 
>
 
    
sujungimo eilutė java

 
>
 
 
    Atsakymo objektai „Axios“:    
 
Kai siunčiate užklausą serveriui, iš serverio gaunate atsakymo objektą su toliau nurodytomis savybėmis...
 
     
  •     duomenys:    Duomenis iš serverio gaunate naudingos apkrovos forma. Šie duomenys grąžinami JSON forma ir išanalizuojami atgal į „JavaScript“ objektą.
    •  
  •     būsena:    Gaunate HTTP kodą, grąžintą iš serverio.
    •  
  •     statusTekstas:    Serverio grąžintas HTTP būsenos pranešimas.
    •  
  •     antraštės:    Visas antraštes serveris siunčia atgal.
    •  
  •     konfigūracija:    pradinė užklausos konfigūracija.
    •  
  •     prašymas:    tikrasis XMLHttpRequest objektas.
    •  
 
    Klaidos objektas:    
 
Jei su užklausa kils problemų, gausite klaidos objektą. Pažadas bus atmestas su klaidos objektu su nurodytomis savybėmis
 
     
  •     žinutė:    Klaidos pranešimo tekstas.
    •  
  •     atsakymas:    Atsakymo objektas (jei gautas).
    •  
  •     prašymas:    Faktinis XMLHttpRequest objektas (kai veikia naršyklėje).
    •  
  •     konfigūracija:    Pradinė užklausos konfigūracija.
    •  
 
    „Axios“ bibliotekos ypatybės    
 
     
  • JSON duomenys transformuojami automatiškai.
    •  
  • Jis transformuoja užklausos ir atsakymo duomenis.
    •  
  • Naudinga teikiant HTTP užklausas iš Node.js
    •  
  • Jis sukuria XMLHttpRequests iš naršyklės.
    •  
  • Pateikite kliento palaikymą, kad apsaugotumėte nuo XSRF.
    •  
  • Palaiko pažado API.
    •  
  • Galimybė atšaukti prašymą.
    •  
 
    Trumpieji metodai „Axios“:    
 
Žemiau pateikiami keli „Axios“ trumpieji metodai…
 
     
  • 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]])
    •  
 
Išvada
 
Šiame straipsnyje paaiškinta viskas apie Axios biblioteką. Aptarėme kai kurias naudingas operacijas, pvz., duomenų gavimą, duomenų paskelbimą, duomenų atnaujinimą arba duomenų ištrynimą „Axios“. Kai pradėsite dirbti su React, turėsite naudoti šią biblioteką, kad galėtumėte susisiekti su duomenų bazės serveriu. Taigi svarbu tai praktikuoti ir suprasti, kaip viskas veikia „Axios“.