AXIOS IN REACT: ROKASGRĀMATA IESĀCĒJIEM

Programmā React aizmugursistēmas komunikācija parasti tiek panākta, izmantojot HTTP protokolu. Lai gan daudzi izstrādātāji ir pazīstami ar XML HTTP pieprasījuma saskarni un Fetch API HTTP pieprasījumu veikšanai, ir vēl viena jaudīga bibliotēka ar nosaukumu Axios, kas šo procesu vēl vairāk vienkāršo.

Satura rādītājs

Priekšnoteikumi
Ievads Axios
Darbības, lai izveidotu React lietojumprogrammu
Axios nepieciešamība reaģēt
Saņemiet pieprasījumu ar Axios
POST pieprasījums ar Axios:
Dzēst pieprasījumu ar Axios:
Atbildes objekti Axios
Kļūdas objekts:
Axios bibliotēkas iezīmes
Ātrraksta metodes Axios
Secinājums

Ievads Axios:

Axios, kas ir populāra bibliotēka, galvenokārt tiek izmantota, lai nosūtītu asinhronus HTTP pieprasījumus uz REST galapunktiem. Šī bibliotēka ir ļoti noderīga, lai veiktu CRUD darbības.

Šī populārā bibliotēka tiek izmantota, lai sazinātos ar aizmugursistēmu. Axios atbalsta Promise API, kas ir JS ES6.
Izmantojot Axios, mēs savā lietojumprogrammā veicam API pieprasījumus. Kad pieprasījums ir iesniegts, mēs iegūstam datus sadaļā Return, un pēc tam mēs izmantojam šos datus savā projektā.
Šī bibliotēka ir ļoti populāra izstrādātāju vidū. Varat pārbaudīt GitHub, un tajā atradīsit 78 000 zvaigznes.

Pirms Axios instalēšanas jūsu React projekta programmai jābūt gatavai šīs bibliotēkas instalēšanai. Izveidot a Reaģēt pieteikšanās, veicot tālāk norādītās darbības…

Darbības, lai izveidotu React lietojumprogrammu:

1. darbība: Zemāk ir komanda, lai projektā izveidotu lietotni React…

npx create-react-app myreactapp>

2. darbība: Ievadiet pirmajā solī izveidotajā direktorijā.

cd myreactapp>

3. darbība: Instalējiet Axios bibliotēku, izmantojot tālāk norādīto komandu…

npm i axios>

Projekta struktūra:

Ekrānuzņēmums no-2023-10-06-09-44-29

statisks c

Atjauninātās atkarības pack.json failu.

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

Piemērs: Šis koda fragments izmanto axios, lai veiktu HTTP pieprasījumu aizmugursistēmas serverim.

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)}> Sūtīt failus );  } } eksportēt noklusējuma lietotni;>>

> 
    
     Darbības, lai palaistu lietojumprogrammu:    Atveriet termināli un ierakstiet šādu komandu.
 npm start>
     Izvade:    Atveriet pārlūkprogrammu, un mūsu projekts tiek parādīts URL      http://localhost:3000/      
 Iepriekš minētais piemērs ir tikai neliels koda apraksts, lai parādītu, kā izmantot Axios savā projektā. Mēs apspriedīsim vairākas metodes, piemēram, GET, POST un PUT in Axios nākamajā sadaļā.
     Axios nepieciešamība reaģēt:    
 Kā mēs jau apspriedām, Axios ļauj sazināties ar API jūsu React projektā. Tos pašus uzdevumus var veikt arī, izmantojot AJAX, taču Axios nodrošina vairāk funkcionalitātes un līdzekļu, kas palīdz ātri izveidot lietojumprogrammu.
 Axios ir uz solījumiem balstīta bibliotēka, tāpēc jums ir jāievieš daži uz solījumu balstīti asinhroni HTTP pieprasījumi. jQuery un AJAX arī veic vienu un to pašu darbu, taču React projektā React apstrādā katru un visu savā virtuālajā DOM, tāpēc jQuery nav jāizmanto vispār.
 Tālāk ir sniegts piemērs klienta datu iegūšanai, izmantojot Axios…
 Javascript
 
    
      
  
     
      
     
    
 
     const getCustomersData = () =>{> >axios> >.get(>' https://jsonplaceholder.typicode.com/customers '>)> >.then(data =>console.log(data.data))> >.>catch>(error =>console.log(error));> };> getCustomersData();>  
 
 
 
    
 >
 
reakcijas tabula
    
 >
 
 Tagad pāriesim pie nākamā punkta un sapratīsim, kā var veikt dažādas darbības, piemēram, iegūt datus vai izmantot datus, izmantojot Axios (GET-POST-DELETE).
     SAŅEMT pieprasījumu ar Axios:    
 Izveidojiet komponentu MyBlog un pievienojiet to komponenta DidMount dzīves ciklam. Importējiet Axios augšpusē un iegūstiet datus, izmantojot Saņemt pieprasījumu.
asv, cik pilsētu
 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;> >})}> >>
 >);> >}> }>  
 
 
 
    
 >
 
    
 >
 
 Šeit mēs izmantojam axios.get (URL), lai iegūtu solījumu, kas atgriež atbildes objektu. Atgrieztā atbilde tiek piešķirta ziņas objektam. Mēs varam izgūt arī citu informāciju, piemēram, statusa kodu utt.
     POST pieprasījums ar Axios:    
 Izveidojiet jaunu komponentu AddPost ziņu pieprasījumiem. Šis pieprasījums pievienos ziņu ziņu sarakstam.
 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}'>Ziņas nosaukums: type='text' name='name' onChange='{this.handleChange}' /> 'submit'>Pievienot );  } }>  
 
 
 
    
 >
 
    
 >
 
 Iepriekš minētajā kodā mēs esam veikuši HTTP Post pieprasījumu un pievienojuši datubāzei jaunu ziņu. Notikums onChange aktivizē metodi handleChange() un atjaunina pieprasījumu, kad API pieprasījums veiksmīgi atgriež datus.
     Dzēst pieprasījumu ar Axios:    
 Lai nosūtītu dzēšanas pieprasījumu uz serveri, tiek izmantots axios.delete. Veicot šī pieprasījuma URL un neobligāto konfigurāciju, ir jānorāda divi parametri.
 axios.delete(url, {   data: { foo: 'bar' },   headers: { 'Authorization': '******' }  });>
 Nosūtot dzēšanas pieprasījumu, jums būs jāiestata pieprasījuma pamatteksts un galvenes. Šim nolūkam izmantojiet config.data. Iepriekš minētajā POST pieprasījumā mainiet kodu, kā norādīts tālāk…
 Javascript
 
    
      
  
     
      
     
    
 
     handleSubmit = event =>{> >event.preventDefault();> >axios.>delete>(> >`https:>//jsonplaceholder.typicode.com/posts/${this.state.postName}`)> >.then(res =>{> >console.log(res);> >console.log(res.data);> >})> }>  
 
 
 
    
 >
 
    
 >
 
     Atbildes objekti Axios:    
 Nosūtot pieprasījumu serverim, jūs saņemat atbildes objektu no servera ar tālāk norādītajiem rekvizītiem...
java slēdzis
      dati:    Jūs saņemat datus no servera lietderīgās slodzes formā. Šie dati tiek atgriezti JSON formā un parsēti atpakaļ JavaScript objektā.
     statuss:    Jūs saņemat HTTP kodu, kas tiek atgriezts no servera.
     statusTeksts:    HTTP statusa ziņojums, ko atgriezis serveris.
     galvenes:    Visas galvenes serveris nosūta atpakaļ.
     konfigurācija:    sākotnējā pieprasījuma konfigurācija.
     pieprasījums:    faktiskais XMLHttpRequest objekts.
 
     Kļūdas objekts:    
 Ja ar pieprasījumu radīsies problēma, tiks parādīts kļūdas objekts. Solījums tiks noraidīts ar kļūdas objektu ar norādītajām īpašībām
      ziņa:    Kļūdas ziņojuma teksts.
     atbilde:    Atbildes objekts (ja saņemts).
     pieprasījums:    Faktiskais XMLHttpRequest objekts (ja darbojas pārlūkprogrammā).
     konfigurācija:    Sākotnējā pieprasījuma konfigurācija.
 
     Axios bibliotēkas iezīmes    
  JSON dati tiek pārveidoti automātiski.
 Tas pārveido pieprasījuma un atbildes datus.
 Noderīga, veicot HTTP pieprasījumus no Node.js
 Tas veido XMLHttpRequests no pārlūkprogrammas.
 Nodrošiniet klienta puses atbalstu aizsardzībai pret XSRF.
 Atbalsta solījumu API.
 Iespēja atcelt pieprasījumu.
 
     Saīsinātās metodes Axios:    
 Tālāk ir norādītas dažas Axios stenogrāfijas metodes…
  axios.request(config)
 axios.head(url[, config])
 axios.get(url[, config])
 axios.post(url[, dati[, konfigurācija]])
 axios.put(url[, dati[, konfigurācija]])
 axios.delete(url[, config])
 axios.options(url[, config])
 axios.patch(url[, data[, config]])
 
 Secinājums
 Šajā rakstā ir izskaidrots viss par Axios bibliotēku. Mēs esam apsprieduši dažas noderīgas darbības, piemēram, datu iegūšanu, datu ievietošanu, datu atjaunināšanu vai datu dzēšanu programmā Axios. Kad sāksit strādāt pie React, šī bibliotēka būs jāizmanto, lai sazinātos ar datu bāzes serveri. Tāpēc ir svarīgi to praktizēt un saprast, kā lietas darbojas Axios.

TechCodeview

Ievads Axios:

Darbības, lai izveidotu React lietojumprogrammu:

Javascript

Axios nepieciešamība reaģēt:

Javascript

SAŅEMT pieprasījumu ar Axios:

Javascript

POST pieprasījums ar Axios:

Javascript

Dzēst pieprasījumu ar Axios:

Javascript

Atbildes objekti Axios:

Kļūdas objekts:

Axios bibliotēkas iezīmes

Saīsinātās metodes Axios:

Secinājums