Axios in React: una guia per a principiants
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:
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 startSortida: 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
// 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
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.
