Az Axios HTTP-kliens használata React-alkalmazásban: Útmutató

Hark Labs2022-04-06 · 12 min read

Az Axios HTTP-kliens használata React-alkalmazásban: Útmutató

Sok webalkalmazás szembesül azzal a szükségességgel, hogy fejlesztése során egy bizonyos ponton kapcsolatba lépjen egy REST API-val. A(z) React-alapú webalkalmazásokhoz használhatjuk a(z) Axios eszközt, amely egy könnyűsúlyú HTTP-kliens, és az Angular.js v1.x $http szolgáltatásán alapul. A funkciói hasonlóak a JavaScript natív Fetch API.

szolgáltatásához. Az Axios promise-alapú, ami lehetővé teszi számunkra a JavaScript async és await kulcsszavait a könnyebben olvasható szinkron kód érdekében. Támogatja a kérések elfogását (intercept) és megszakítását is. Ezenkívül beépített kliensoldali védelemmel rendelkezik a cross-site request forgery (CSRF) ellen.

Ebben az útmutatóban bemutatjuk, hogyan használható az Axios a népszerű JSON Placeholder API elérésére egy demo React alkalmazásban. További információkat tudhat meg a JSON formátumról JavaScriptben ebből az oktatóanyagból.

Előfeltételek

Az ebben az útmutatóban bemutatott lépések végrehajtásához a következő összetevőkre lesz szüksége:

Egy megfelelően konfigurált Ubuntu szerver. Íme a lépések saját Ubuntu szerverének beállításához a CloudSigma-n.
A legújabb verziójú Node.js telepítve. Tekintse meg, hogyan telepítheti a Node.js-t Ubuntu-ra.
Egy új React projekt, amely a Create React App eszközt használja. Hasznos lesz először követni és végrehajtani ezt a React projekt Create React App segítségével történő beállításáról szóló útmutatót.
Alapvető ismeretek a HTML, CSS és JavaScrip t.

1. lépés: Az Axios telepítése a React projektben

Az Axios közvetlenül elérhető npm modulként. Tekintse meg az Axios on npm oldalon. Mindössze egy React projektet kell létrehoznunk, és telepítenünk kell az Axios csomagot.

A következő npx parancs futtatja a create-react-app eszközt egy új React projekt létrehozásához. A projekt neve lesz használva a projekthez tartozó dedikált könyvtár létrehozására. Itt a projektet a következőképpen neveztük el: react-axios-demo. Futtassa a parancsot:

npx create-react-app react-axios-demo

1	npx create-react-app react-axios-demo

Váltson át az újonnan létrehozott projektkönyvtárra:

cd react-axios-demo/

1	cd react-axios-demo/

Ezután futtassa az npm install parancsot az Axios telepítéséhez. Ha nincs verzió megadva, akkor az npm automatikusan letölti és telepíti az Axios legújabb verzióját:

npm install axios

1	npm install axios

A projektünk most már készen áll az Axios használatára! Itt az ideje, hogy működésbe hozzuk a funkcióit.

2. lépés: GET kérés létrehozása

Ebben a lépésben bemutatjuk egy olyan új komponens létrehozását, amely az Axios-t használja egy GET kérés elküldésére.

Először hozzon létre egy új PersonList komponenst, amely nevek listáját fogja megjeleníteni. Hozzon létre egy dedikált könyvtárat a komponens tárolására:

mkdir -pv src/components

1	mkdir -pv src/components

Ezután hozza létre a PersonList.js :

touch PersonList.js

1	touch PersonList.js

Nyissa meg a fájlt egy szövegszerkesztőben. Mi a Visual Studio Code szoftvert használjuk a kényelem és az olvashatóság érdekében. Írja be a következő JavaScript kódot:

import React from 'react';
import axios from 'axios';

export default class PersonList extends React.Component {
state = {
persons: []
}

componentDidMount() {
axios.get(`https://jsonplaceholder.typicode.com/users`)
.then(res => {
const persons = res.data;
this.setState({ persons });
})
}

render() {
return (
<ul>
{
this.state.persons
.map(person =>
<li key={person.id}>{person.name}</li>
)
}
</ul>
)
}
}

import React from 'react';

import axios from 'axios';

export default class PersonList extends React.Component {

state = {

persons: []

}

componentDidMount() {

axios.get(`https://jsonplaceholder.typicode.com/users`)

.then(res => {

const persons = res.data;

this.setState({ persons });

})

}

render() {

return (

<ul>

{

this.state.persons

.map(person =>

<li key={person.id}>{person.name}</li>

)

}

</ul>

)

}

Itt:

Importáltuk a React-et és az Axios-t, hogy mindkettőt használhassuk a komponensben.
Rácsatlakozunk a componentDidMount életciklus-hookra, és elküldünk egy GET kérést.

Használhatja az axios.get(<url>) metódust egy API végpontról, hogy egy promise-t kapjon (ami egy válaszobjektumot ad vissza). A válaszobjektum tartalmazza a kívánt adatokat. Ezt követően hozzárendeljük a person értékéhez. További információkat is gyűjthetünk a kérésről, például a státuszkódot a res.status alatt, vagy további információkat a res.request.

Ezután hozzá kell adnunk a komponensünket a fő App.js fájlhoz. Adja hozzá a következő kódokat:

import PersonList from './components/PersonList.js';

function App() {
return (
<div ClassName="App">
<PersonList/>
</div>
)
}

import PersonList from './components/PersonList.js';

function App() {

return (

</div>

)

}

A lépés konfigurációja befejeződött. Most már futtathatja az alkalmazást, és tesztelheti a kedvenc böngészőjével. Indítsa el a fejlesztői szervert:

npm start

npm start

Amint láthatjuk, a kimenet az emberek neveinek listáját mutatja véletlenszerű sorrendben:

3. lépés: POST kérés létrehozása

Ebben a részben bemutatjuk az Axios használatát egy másik HTTP kérés metódus végrehajtására, amelyet úgy hívnak, hogy POST. Ennek bemutatására az a célunk, hogy létrehozzunk egy új komponenst a React projektünkben, amelynek neve PersonAdd.

Hozza létre a PersonAdd.js:

touch src/components/PersonAdd.js

1	touch src/components/PersonAdd.js

Ezután nyissa meg a fájlt egy szövegszerkesztőben, és írja be a következő kódot:

import React from 'react';
import axios from 'axios';

export default class PersonAdd extends React.Component {
state = {
name: ''
}
handleChange = event => {
this.setState({ name: event.target.value });
}
handleSubmit = event => {
event.preventDefault();
const user = {
name: this.state.name
};
axios.post(`https://jsonplaceholder.typicode.com/users`, { user })
.then(res => {
console.log(res);
console.log(res.data);
})
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<label>
Person Name:
<input type="text" name="name" onChange={this.handleChange} />
</label>
<button type="submit">Add</button>
</form>
</div>
)
}
}

import React from 'react';

import axios from 'axios';

export default class PersonAdd extends React.Component {

state = {

name: ''

}

handleChange = event => {

this.setState({ name: event.target.value });

}

handleSubmit = event => {

event.preventDefault();

const user = {

name: this.state.name

};

axios.post(`https://jsonplaceholder.typicode.com/users`, { user })

.then(res => {

console.log(res);

console.log(res.data);

})

}

render() {

return (

<div>

<label>

Személy neve:

</label>

<button type="submit">Hozzáadás</button>

</form>

</div>

)

}

Ebben a kódban a felhasználói bevitelt vesszük át, és a tartalmat POST-oljuk egy API-nak. A handleSubmit függvényen belül megakadályozzuk az űrlap alapértelmezett műveletét, és frissítjük az állapotot a felhasználói bevitelre. Amikor a POST metódust használjuk, az ugyanazt a válaszobjektumot adja vissza. Az objektumot használhatjuk egy then híváson belül. A POST kérés teljesítéséhez rögzítjük a felhasználói bevitelt, és hozzáadjuk a POST kéréshez. Ez ad nekünk egy választ. A választ a console.log segítségével naplózzuk. Ennek meg kell mutatnia a user bevitelt az űrlapon.

Ezután adja hozzá a komponenst a App.js fájlhoz. A teljes kódnak így kell kinéznie:

import PersonList from './components/PersonList';
import PersonAdd from './components/PersonAdd';

function App() {
return (
<div ClassName="App">
<PersonAdd/>
<PersonList/>
</div>
)
}

import PersonList from './components/PersonList';

import PersonAdd from './components/PersonAdd';

function App() {

return (

</div>

)

}

Most itt az ideje tesztelni a változtatásokat. Indítsa el a fejlesztői szervert:

npm start

npm start

Ellenőrizze a változást a webböngészőben:

4. lépés: DELETE kérés létrehozása

Ebben a részben bemutatjuk az elemek törlését egy API-ból az axios.delete segítségével, egy URL-t használva paraméterként. Ennek bemutatására hozza létre a PersonRemove. Hozza létre a PersonRemove.js fájlt a src/components könyvtárban:

touch src/components/PersonRemove.js

1	touch src/components/PersonRemove.js

Ezután nyissa meg a fájlt egy szövegszerkesztőben, és adja hozzá a következő kódot:

import React from 'react';
import axios from 'axios';

export default class PersonRemove extends React.Component {
state = {
id: ''
}

handleChange = event => {
this.setState({ id: event.target.value });
}

handleSubmit = event => {
event.preventDefault();
axios.delete(`https://jsonplaceholder.typicode.com/users/${this.state.id}`)
.then(res => {
console.log(res);
console.log(res.data);
})
}

render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<label>
Személy ID:
<input type="number" name="id" onChange={this.handleChange} />
</label>
<button type="submit">Törlés</button>
</form>
</div>
)
}
}

import React from 'react';

import axios from 'axios';

export default class PersonRemove extends React.Component {

state = {

id: ''

}

handleChange = event => {

this.setState({ id: event.target.value });

}

handleSubmit = event => {

event.preventDefault();

axios.delete(`https://jsonplaceholder.typicode.com/users/${this.state.id}`)

.then(res => {

console.log(res);

console.log(res.data);

})

}

render() {

return (

<div>

<label>

Személy ID:

</label>

<button type="submit">Törlés</button>

</form>

</div>

)

}

Itt a(z) res objektum nyújt információt a kérésről. Ezután használhatjuk a console.log metódust az űrlap elküldése után.

Ezután implementálja a komponenst az App.js:

import PersonList from './components/PersonList';
import PersonAdd from './components/PersonAdd';
import PersonRemove from './components/PersonRemove';

function App() {
return (
<div ClassName="App">
<PersonAdd/>
<PersonList/>
<PersonRemove/>
</div>
)
}

import PersonList from './components/PersonList';

import PersonAdd from './components/PersonAdd';

import PersonRemove from './components/PersonRemove';

function App() {

return (

</div>

)

}

Ideje újra tesztelni a kódunkat. Indítsa el a szervert:

npm start

npm start

Egy új űrlapot kellene találnia, amely bekéri a felhasználó nevét, és eltávolítja azt a listáról:

5. lépés: Alappéldány (Base Instance) alkalmazása az Axios-ban

Most az Axios alappéldányával fogunk dolgozni. Itt meghatározhatunk egy URL-t és egyéb konfigurációs elemeket. Ennek megvalósításához hozzon létre egy külön fájlt: api.js:

touch src/api.js

1	touch src/api.js

Nyissa meg egy szövegszerkesztőben, és írja be a következő kódot:

import axios from 'axios';

export default axios.create({
baseURL: `http://jsonplaceholder.typicode.com/`
});

import axios from 'axios';

export default axios.create({

baseURL: `http://jsonplaceholder.typicode.com/`

});

Miután beállította, használhatjuk a PersonRemove komponensen belül. Így fog kinézni a kód:

import React from 'react';
import API from '../api';

export default class PersonRemove extends React.Component {
handleSubmit = event => {
event.preventDefault();
API.delete(`users/${this.state.id}`)
.then(res => {
console.log(res);
console.log(res.data);
})
}
}

import React from 'react';

import API from '../api';

export default class PersonRemove extends React.Component {

handleSubmit = event => {

event.preventDefault();

API.delete(`users/${this.state.id}`)

.then(res => {

console.log(res);

console.log(res.data);

})

}

Itt a(z) http://jsonplaceholder.typicode.com/ van beállítva alapértelmezett URL-ként. Így már nem kell a teljes URL-t használnunk minden alkalommal, amikor elérjük az API egy végpontját.

6. lépés: Az async és az await implementálása

Ebben a részben megvizsgáljuk, hogyan lehet implementálni az async és await kulcsszavakat a promise-ok kezeléséhez. Az await kulcsszó feloldja a promise-t, és visszaadja a valuevaluevalue egy változóhoz a kényelmesebb használat érdekében.

Így fog kinézni a(z) PersonRemove.js frissített kódja:

import React from 'react';
import API from '../api';

export default class PersonRemove extends React.Component {
handleSubmit = event => {
event.preventDefault();
const response = await API.delete(`users/${this.state.id}`);
console.log(response);
console.log(response.data);
}
}

import React from 'react';

import API from '../api';

export default class PersonRemove extends React.Component {

handleSubmit = event => {

event.preventDefault();

const response = await API.delete(`users/${this.state.id}`);

console.log(response);

console.log(response.data);

}

Itt lecseréltük a(z) .then()-t. Amint a(z) promise feloldódik, az értéket a(z) response.

Záró gondolatok

Ebben az útmutatóban különböző példákat vizsgáltunk meg az Axios használatára a REST API-val való munkához. A kódok bemutatják a HTTP-kérések létrehozását és a válaszok kezelését.

Szeretne többet megtudni a JavaScriptről? Tekintse meg a többi kezdő útmutatónkat a különböző JavaScript-koncepciókról és -funkciókról, például: dátum és idő, karakterlánc-manipuláció, osztályok, és objektumok.

Kellemes kódolást!

Hark Labs

Szerző · CloudSigma

Preslav Dobrev a CloudSigma kreatív tervezője, aki hagyományos és innovatív marketingcsatornák segítségével következetes vállalati identitás kialakítására összpontosít. Kiemelkedően képes ötvözni a művészi látásmódot a stratégiai marketinggel, hogy hatásos márkatörténeteket hozzon létre.

Az Axios HTTP-kliens használata React-alkalmazásban: Útmutató

Előfeltételek

1. lépés: Az Axios telepítése a React projektben

2. lépés: GET kérés létrehozása

3. lépés: POST kérés létrehozása

4. lépés: DELETE kérés létrehozása

5. lépés: Alappéldány (Base Instance) alkalmazása az Axios-ban

6. lépés: Az async és az await implementálása

Záró gondolatok

Hark Labs

Hozzászólások