În React, comunicarea backend se realizează de obicei folosind protocolul HTTP. În timp ce mulți dezvoltatori sunt familiarizați cu interfața de solicitare HTTP XML și API-ul Fetch pentru a face solicitări HTTP, există o altă bibliotecă puternică numită Axios care simplifică în continuare procesul.

Cuprins

• Cerințe preliminare
• Introducere în Axios
• Pași pentru a crea aplicația React
• Nevoia de Axios în React
• GET Solicitare cu Axios
• Solicitare POST cu Axios:
• Ștergeți cererea cu Axios:
• Obiecte de răspuns în Axios
• Obiect de eroare:
• Caracteristicile bibliotecii Axios
• Metode stenografice în Axios
• Concluzie

Introducere în Axios:

Axios, care este o bibliotecă populară, este folosită în principal pentru a trimite solicitări HTTP asincrone către punctele finale REST. Această bibliotecă este foarte utilă pentru a efectua operațiuni CRUD.

1. Această bibliotecă populară este folosită pentru a comunica cu backend-ul. Axios acceptă API-ul Promise, nativ pentru JS ES6.
2. Folosind Axios, facem solicitări API în aplicația noastră. Odată ce solicitarea este făcută, primim datele în Return și apoi folosim aceste date în proiectul nostru.
3. Această bibliotecă este foarte populară printre dezvoltatori. Puteți verifica pe GitHub și veți găsi 78.000 de stele pe el.

Înainte de a instala Axios, aplicația de proiect React ar trebui să fie pregătită pentru a instala această bibliotecă. Creeaza o Reacţiona aplicație urmând pașii de mai jos...

Pași pentru a crea aplicația React:

Pasul 1: Mai jos este comanda pentru a crea aplicația React în proiectul tău...

npx create-react-app myreactapp>

Pasul 2: Intră în directorul creat la primul pas.

cd myreactapp>

Pasul 3: Instalați biblioteca Axios folosind comanda de mai jos...

npm i axios>

Structura proiectului:

c matrice de șiruri de caractere

Dependențe actualizate în pachet.json fişier.

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

Exemplu: Acest fragment de cod folosește axios pentru a face o solicitare HTTP către serverul backend.

Javascript

> 
    
     Pași pentru a rula aplicația:    Deschideți terminalul și introduceți următoarea comandă.
 
npm start>
 
    Ieșire:    Deschideți browserul și proiectul nostru este afișat în URL      http://localhost:3000/      
 
Exemplul de mai sus este doar o mică descriere a codului pentru a arăta cum să utilizați Axios în proiectul dvs. Vom discuta mai multe metode, cum ar fi GET, POST și PUT în Axios în secțiunea următoare.
 
    Nevoia de Axios în React:    
 
După cum am discutat, Axios vă permite să comunicați cu API-urile din proiectul dvs. React. Aceleași sarcini pot fi efectuate și prin utilizarea AJAX, dar Axios vă oferă mai multe funcționalități și caracteristici, ceea ce vă ajută să vă construiți rapid aplicația.
 
Axios este o bibliotecă bazată pe promisiuni, așa că trebuie să implementați unele solicitări HTTP asincrone bazate pe promisiuni. jQuery și AJAX efectuează, de asemenea, aceeași sarcină, dar în proiectul React, React gestionează fiecare și totul în propriul său DOM virtual, deci nu este nevoie să utilizați jQuery deloc.
 
Mai jos este un exemplu pentru a prelua datele clientului folosind Axios...
 
Javascript
 
    
 
     
  
 
    
 
     
     
    
alinierea imaginilor în css
 
 
 
 
 
 const getCustomersData = () =>{> >axios> >.get(>' https://jsonplaceholder.typicode.com/customers '>)> >.then(data =>console.log(data.data))> >.>catch>(error =>console.log(eroare));> };> getCustomersData();> 
 
 
 
 
    
 
>
 
    
 
>
 
 
Acum să ajungem la următorul punct și să înțelegem cum pot fi efectuate diferite operațiuni, cum ar fi preluarea datelor sau consumarea datelor folosind Axios (GET-POST-DELETE).
 
    Solicitare GET cu Axios:    
 
Creați o componentă MyBlog și conectați-o la ciclul de viață al componentei DidMount. Importați Axios din partea de sus și preluați datele cu cererea Obțineți.
 
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;> >})}> >>
 >);> >}> }> 
 
 
 
 
    
 
>
 
    
 
>
 
 
Aici folosim axios.get (URL) pentru a obține o promisiune care returnează un obiect de răspuns. Răspunsul returnat este atribuit obiectului postării. De asemenea, putem prelua și alte informații, cum ar fi codul de stare etc.
 
    Solicitare POST cu Axios:    
 
Creați o nouă componentă AddPost pentru solicitările Post. Această solicitare va adăuga o postare la lista de postări.
 
Javascript
 
    
 
     
  
variabilă de referință în 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}'>Post Name: type='text' name='name' onChange='{this.handleChange}' /> 'submit'>Add );  } }>>>
 
 
 
 
    
 
> 
    
 În codul de mai sus, am făcut o solicitare HTTP Post și am adăugat o nouă postare în baza de date. Evenimentul onChange declanșează metoda handleChange() și actualizează solicitarea atunci când solicitarea API returnează datele cu succes.
 
    Ștergeți cererea cu Axios:    
 
Pentru a trimite cererea de ștergere către server se folosește axios.delete. Trebuie să specificați doi parametri în timp ce faceți această solicitare URL și configurație opțională.
 
axios.delete(url, {   data: { foo: 'bar' },   headers: { 'Authorization': '******' }  });>
 
În timp ce trimiteți cererea de ștergere, va trebui să setați corpul și anteturile solicitării. Utilizați config.data în acest scop. În cererea POST de mai sus, modificați codul așa cum este indicat mai jos...
 
Javascript
 
    
 
     
  
 
    
funcție statică în java
 
     
     
    
 
 
 
 
 
 handleSubmit = event =>{> >event.preventDefault();> >axios.>delete>(> >`https:>//jsonplaceholder.typicode.com/posts/${this.state.postName}`)> >.then(res =>{> >console.log(res);> >console.log(res.data);> >})> }> 
 
 
 
 
    
 
>
 
    
 
>
 
 
    Obiecte de răspuns în Axios:    
 
Când trimiteți o cerere către server, primiți un obiect de răspuns de la server cu proprietățile prezentate mai jos...
 
 
    date:    Primiți date de la server sub formă de încărcare utilă. Aceste date sunt returnate în formă JSON și sunt analizate înapoi într-un obiect JavaScript.
 
    stare:    Veți primi codul HTTP returnat de la server.
 
    statusText:    Mesaj de stare HTTP returnat de server.
 
    anteturi:    Toate anteturile sunt trimise înapoi de către server.
 
    config:    configurația originală a cererii.
 
    cerere:    obiect XMLHttpRequest real.
 
 
    Obiect de eroare:    
 
Veți primi un obiect de eroare dacă va exista o problemă cu cererea. Promisiunea va fi respinsă cu un obiect de eroare cu proprietățile date
 
 
    mesaj:    Textul mesajului de eroare.
 
    raspuns:    Obiect de răspuns (dacă este primit).
 
    cerere:    Obiect XMLHttpRequest real (când rulează într-un browser).
 
    config:    Configurația originală a cererii.
 
 
    Caracteristicile bibliotecii Axios    
 
 
Datele JSON sunt transformate automat.
 
Transformă datele de solicitare și răspuns.
 
Util pentru a face cereri HTTP de la Node.js
 
Face XMLHttpRequests din browser.
 
Oferiți suport la nivelul clientului pentru protejarea împotriva XSRF.
 
Acceptă promise API.
 
Posibilitatea de a anula cererea.
 
 
    Metode de scurtătură în Axios:    
 
Mai jos sunt câteva metode scurte ale 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]])
 
 
Concluzie
 
Acest articol a explicat totul despre biblioteca Axios. Am discutat despre câteva operațiuni utile, cum ar fi preluarea datelor, postarea datelor, actualizarea datelor sau ștergerea datelor în Axios. Odată ce veți începe să lucrați la React, va trebui să utilizați această bibliotecă pentru a comunica cu serverul bazei de date. Prin urmare, este important să faceți o practică și să înțelegeți cum funcționează lucrurile în Axios.