A React, la comunicació de fons s'aconsegueix normalment mitjançant el protocol HTTP. Tot i que molts desenvolupadors estan familiaritzats amb la interfície de sol·licitud HTTP XML i l'API Fetch per fer sol·licituds HTTP, hi ha una altra biblioteca potent anomenada Axios que simplifica encara més el procés.
Taula de contingut
- Requisits previs
- Introducció a Axios
- Passos per crear una aplicació React
- Necessitat d'Axios a React
- GET sol·licitud amb Axios
- Sol·licitud POST amb Axios:
- Suprimeix la sol·licitud amb Axios:
- Objectes de resposta a Axios
- Objecte d'error:
- Característiques de la biblioteca Axios
- Mètodes taquigràfics a Axios
- Conclusió
Introducció a Axios:
Axios, que és una biblioteca popular, s'utilitza principalment per enviar sol·licituds HTTP asíncrones als punts finals REST. Aquesta biblioteca és molt útil per realitzar operacions CRUD.
- Aquesta popular biblioteca s'utilitza per comunicar-se amb el backend. Axios admet l'API Promise, nativa de JS ES6.
- Amb Axios fem sol·licituds d'API a la nostra aplicació. Un cop feta la sol·licitud obtenim les dades a Return, i després les fem servir al nostre projecte.
- Aquesta biblioteca és molt popular entre els desenvolupadors. Podeu consultar a GitHub i hi trobareu 78.000 estrelles.
Abans d'instal·lar Axios, la vostra aplicació de projecte React hauria d'estar preparada per instal·lar aquesta biblioteca. Crea un Reacciona aplicació seguint els passos que es detallen a continuació...
Passos per crear una aplicació React:
Pas 1: A continuació es mostra l'ordre per crear l'aplicació React al vostre projecte...
npx create-react-app myreactapp>
Pas 2: Entreu al directori creat en el primer pas.
cd myreactapp>
Pas 3: Instal·leu la biblioteca Axios mitjançant l'ordre que es mostra a continuació...
npm i axios>
Estructura del projecte:
matriu de cadenes de programació c
Les dependències actualitzades a package.json dossier.
'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' },> Exemple: Aquest fragment de codi utilitza axios per fer una sol·licitud HTTP al servidor de fons.
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)}> Enviar fitxers ); } } exporta l'aplicació predeterminada;>>> |
>Passos per executar l'aplicació: Obriu el terminal i escriviu la següent comanda. npm start>Sortida: Obriu el navegador i el nostre projecte es mostra a l'URL http://localhost:3000/
L'exemple anterior és només una petita descripció del codi per mostrar com utilitzar Axios al vostre projecte. A la propera secció parlarem de diversos mètodes com GET, POST i PUT a Axios.
Necessitat d'Axios a React:
Com hem comentat, Axios us permet comunicar-vos amb les API del vostre projecte React. Les mateixes tasques també es poden realitzar mitjançant AJAX, però Axios us ofereix més funcionalitats i característiques i això us ajuda a crear la vostra aplicació ràpidament.
Axios és una biblioteca basada en promeses, de manera que cal implementar algunes sol·licituds HTTP asíncrones basades en promeses. jQuery i AJAX també fan la mateixa feina, però en el projecte React, React gestiona tots i totes en el seu propi DOM virtual, de manera que no cal utilitzar jQuery en absolut.
A continuació es mostra un exemple per obtenir les dades del client mitjançant Axios...
Javascript
const getCustomersData = () =>{>>axios>>.get(>' https://jsonplaceholder.typicode.com/customers '>)>>.then(data =>console.log(data.data))>>.>catch>(error =>console.log(error));>};>getCustomersData();>>>Ara anem al següent punt i entenem com es poden realitzar diferents operacions, com ara obtenir les dades o consumir-les mitjançant Axios (GET-POST-DELETE).
GET sol·licitud amb Axios:
Creeu un component MyBlog i connecteu-lo al cicle de vida del component DidMount. Importeu l'Axios a la part superior i obteniu les dades amb la sol·licitud Obtén.
Javascript
EUA quantes ciutats
// 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;>>})}>>>>);>>}>}>>>Aquí estem utilitzant axios.get (URL) per obtenir una promesa que retorna un objecte de resposta. La resposta retornada s'assigna a l'objecte de la publicació. També podem recuperar altra informació com ara el codi d'estat, etc.
Sol·licitud POST amb Axios:
Creeu un nou component AddPost per a les sol·licituds de publicació. Aquesta sol·licitud afegirà una publicació a la llista de publicacions.
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}'>Nom de la publicació: type='text' name='name' onChange='{this.handleChange}' /> 'submit'>Afegeix); } }>>>>Al codi anterior, hem fet una sol·licitud HTTP Post i hem afegit una nova publicació a la base de dades. L'esdeveniment onChange activa el mètode handleChange() i actualitza la sol·licitud quan la sol·licitud de l'API retorna les dades correctament. Suprimeix la sol·licitud amb Axios:
Per enviar la sol·licitud d'eliminació al servidor s'utilitza axios.delete. Heu d'especificar dos paràmetres mentre feu aquesta sol·licitud URL i configuració opcional.
axios.delete(url, { data: { foo: 'bar' }, headers: { 'Authorization': '******' } });>Mentre envieu la sol·licitud d'eliminació, haureu d'establir el cos i les capçaleres de la sol·licitud. Utilitzeu config.data per a aquest propòsit. A la sol·licitud POST anterior, modifiqueu el codi tal com es mostra a continuació...
Javascript
llista de matrius en java
handleSubmit = event =>{>>event.preventDefault();>>axios.>delete>(>>`https:>//jsonplaceholder.typicode.com/posts/${this.state.postName}`)>>.then(res =>{>>console.log(res);>>console.log(res.data);>>})>}>>>Objectes de resposta a Axios:
Quan envieu una sol·licitud al servidor, rebeu un objecte de resposta del servidor amb les propietats que s'indiquen a continuació...
- dades: Rebreu dades del servidor en forma de càrrega útil. Aquestes dades es retornen en forma JSON i es tornen a analitzar en un objecte JavaScript.
- estat: Obteniu el codi HTTP retornat del servidor.
- statusText: Missatge d'estat HTTP retornat pel servidor.
- capçaleres: Totes les capçaleres són enviades pel servidor.
- config: configuració de sol·licitud original.
- petició: objecte XMLHttpRequest real.
Objecte d'error:
Obtindreu un objecte d'error si hi ha un problema amb la sol·licitud. La promesa es rebutjarà amb un objecte d'error amb les propietats proporcionades
- missatge: Text del missatge d'error.
- resposta: Objecte de resposta (si es rep).
- petició: Objecte XMLHttpRequest real (quan s'executa en un navegador).
- config: Configuració de la sol·licitud original.
Característiques de la biblioteca Axios
- Les dades JSON es transformen automàticament.
- Transforma les dades de sol·licitud i resposta.
- Útil per fer sol·licituds HTTP des de Node.js
- Fa XMLHttpRequests des del navegador.
- Proporcioneu suport al costat del client per protegir-vos contra XSRF.
- Admet l'API de promesa.
- Possibilitat de cancel·lar la sol·licitud.
Mètodes de taquigrafia a Axios:
A continuació es mostren alguns mètodes taquigràfics d'Axios...
- axios.request(config)
- axios.head(url[, config])
- axios.get(url[, config])
- axios.post(url[, dades[, config]])
- axios.put(url[, dades[, config]])
- axios.delete(url[, config])
- axios.options(url[, config])
- axios.patch(url[, dades[, config]])
Conclusió
Aquest article explica tot sobre la biblioteca Axios. Hem comentat algunes operacions útils, com ara obtenir les dades, publicar-les, actualitzar-les o suprimir-les a Axios. Un cop comencis a treballar en React, hauràs d'utilitzar aquesta biblioteca per comunicar-te amb el servidor de bases de dades. Per tant, és important fer-ne una pràctica i entendre com funcionen les coses a Axios.