Używanie klienta HTTP Axios w aplikacji React: Poradnik

Hark Labs2022-04-06 · 11 min read

Używanie klienta HTTP Axios w aplikacji React: Poradnik

Wiele aplikacji internetowych na pewnym etapie swojego rozwoju staje przed koniecznością integracji z interfejsem REST API. W przypadku React-owych aplikacji internetowych możemy użyć Axios, lekkiego klienta HTTP opartego na $http usłudze w Angular.js v1.x. Jego funkcje są podobne do natywnego Fetch API.

. Axios opiera się na obietnicach (promises), co pozwala nam na włączenie JavaScript’owych async oraz await w celu uzyskania bardziej czytelnego kodu synchronicznego. Obsługuje również przechwytywanie i anulowanie żądań. Ponadto posiada wbudowaną ochronę po stronie klienta przed fałszowaniem żądań międzywitrynowych (CSRF).

W tym poradniku pokażemy, jak używać Axios do uzyskania dostępu do popularnego JSON Placeholder API w demonstracyjnej aplikacji React. Możesz dowiedzieć się więcej o formacie JSON w JavaScript z tego samouczka.

Wymagania wstępne

Aby wykonać kroki przedstawione w tym poradniku, będziesz potrzebować następujących komponentów:

Prawidłowo skonfigurowany serwer Ubuntu. Oto kroki konfiguracji własnego serwera Ubuntu na CloudSigma.
Najnowsza wersja Node.js zainstalowana. Sprawdź jak zainstalować Node.js na Ubuntu.
Nowy projekt React przy użyciu Create React App. Przydatne będzie najpierw zapoznanie się z tym poradnikiem dotyczącym konfiguracji projektu React przy użyciu Create React App.
Podstawowa znajomość HTML, CSS oraz JavaScrip t.

Krok 1: Instalacja Axios w projekcie React

Axios jest bezpośrednio dostępny jako moduł npm. Sprawdź Axios na npm. Wszystko, czego potrzebujemy, to utworzenie projektu React i zainstalowanie pakietu Axios.

Następujące polecenie npx uruchomi create-react-app w celu utworzenia nowego projektu React. Nazwa projektu zostanie użyta do utworzenia dedykowanego katalogu dla projektu. Tutaj nazwaliśmy projekt react-axios-demo. Uruchom polecenie:

npx create-react-app react-axios-demo

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

Zmień bieżący katalog na nowo utworzony katalog projektu:

cd react-axios-demo/

1	cd react-axios-demo/

Następnie wywołaj polecenie npm install, aby zainstalować Axios. Jeśli nie określono wersji, wówczas npm automatycznie pobierze i zainstaluje najnowszą wersję Axios:

npm install axios

1	npm install axios

Nasz projekt jest nowo gotowy do użycia Axios! Czas przetestować jego funkcje w działaniu.

Krok 2: Tworzenie żądania GET

W tym kroku pokażemy, jak utworzyć nowy komponent, który używa Axios do wysyłania żądania GET .

Najpierw utwórz nowy komponent PersonList, który będzie wyświetlał listę nazwisk. Utwórz dedykowany katalog do przechowywania komponentu:

mkdir -pv src/components

1	mkdir -pv src/components

Następnie utwórz plik PersonList.js :

touch PersonList.js

1	touch PersonList.js

Otwórz plik w edytorze tekstu. Dla wygody i czytelności używamy Visual Studio Code. Wprowadź następujący kod JavaScript:

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>

)

}

Tutaj:

Zaimportowaliśmy React i Axios, aby móc korzystać z nich obu w komponencie.
Podpinamy się pod metodę cyklu życia componentDidMount i wysyłamy żądanie GET.

Możesz użyć axios.get(<url>) z punktu końcowego API (endpointu), aby otrzymać obietnicę (zwraca obiekt odpowiedzi). Obiekt odpowiedzi zawiera pożądane dane. Następnie przypisujemy je do wartości person. Możemy również zebrać dodatkowe informacje o żądaniu, takie jak kod statusu w res.status lub dalsze informacje z res.request.

Następnie musimy dodać nasz komponent do głównego pliku App.js. Dodaj następujący kod:

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

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

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

function App() {

return (

</div>

)

}

Konfiguracja dla tego kroku jest zakończona. Możesz teraz uruchomić aplikację i przetestować ją w swojej ulubionej przeglądarce. Uruchom serwer deweloperski:

npm start

npm start

Jak widać, wynik pokazuje listę imion i nazwisk ludzi w losowej kolejności:

Krok 3: Utworzenie żądania POST

W tej sekcji pokażemy, jak użyć biblioteki Axios do wykonania innej metody żądania HTTP o nazwie POST. Aby to zademonstrować, naszym celem jest utworzenie nowego komponentu w naszym projekcie React o nazwie PersonAdd.

Utwórz plik PersonAdd.js:

touch src/components/PersonAdd.js

1	touch src/components/PersonAdd.js

Następnie otwórz plik w edytorze tekstu i wprowadź następujący kod:

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>

Imię i nazwisko:

</label>

<button type="submit">Dodaj</button>

</form>

</div>

)

}

W tym kodzie pobieramy dane wejściowe użytkownika i wysyłamy (POST) zawartość do API. Wewnątrz funkcji handleSubmit zapobiegamy domyślnej akcji formularza i aktualizujemy stan o dane wprowadzone przez użytkownika. Podczas korzystania z POST zwraca ono ten sam obiekt odpowiedzi. Możemy użyć tego obiektu wewnątrz wywołania then. Aby zrealizować żądanie POST, przechwytujemy dane wejściowe użytkownika i dodajemy je wraz z żądaniem POST. Daje nam to odpowiedź. Rejestrujemy odpowiedź za pomocą console.log. Powinno to pokazać dane wejściowe user w formularzu.

Następnie dodaj komponent do App.js. Pełny kod powinien wyglądać następująco:

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>

)

}

Teraz czas na przetestowanie zmian. Uruchom serwer deweloperski:

npm start

npm start

Sprawdź zmiany w przeglądarce internetowej:

Krok 4: Utworzenie żądania DELETE

W tej sekcji zademonstrujemy usuwanie elementów z API za pomocą axios.delete i użycia adresu URL jako parametru. Aby to zademonstrować, utwórz komponent PersonRemove. Utwórz plik PersonRemove.js w katalogu src/components:

touch src/components/PersonRemove.js

1	touch src/components/PersonRemove.js

Następnie otwórz plik w edytorze tekstu i dodaj następujący kod:

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>
ID osoby:
<input type="number" name="id" onChange={this.handleChange} />
</label>
<button type="submit">Usuń</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>

ID osoby:

</label>

</form>

</div>

)

}

Tutaj obiekt res dostarcza informacji o żądaniu. Możemy następnie użyć console.log po przesłaniu formularza.

Następnie zaimplementuj komponent w 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>

)

}

Czas ponownie przetestować nasz kod. Uruchom serwer:

npm start

npm start

Powinieneś zobaczyć nowy formularz, który pobiera nazwę użytkownika i usuwa ją z listy:

Step 5: Apply Base Instance in Axios

Teraz będziemy pracować z bazową instancją Axios. Tutaj możemy zdefiniować adres URL i inne elementy konfiguracyjne. Aby to zaimplementować, utwórz osobny plik api.js:

touch src/api.js

1	touch src/api.js

Otwórz go w edytorze tekstu i wprowadź następujący kod:

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/`

});

Po jego skonfigurowaniu możemy go użyć wewnątrz komponentu PersonRemove. Oto jak będzie wyglądał kod:

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);

})

}

Tutaj http://jsonplaceholder.typicode.com/ jest ustawiony jako bazowy adres URL. Teraz nie musimy już używać pełnego adresu URL za każdym razem, gdy odwołujemy się do punktu końcowego API.

Krok 6: Implementacja async i await

W tej sekcji przyjrzymy się, jak zaimplementować async oraz await do pracy z obietnicami. Słowo kluczowe await rozwiązuje obietnicę i zwraca wartość. Możemy przypisać tę wartość do zmiennej dla wygodniejszego użycia.

Oto jak będzie wyglądał zaktualizowany kod PersonRemove.js będzie wyglądał:

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);

}

Tutaj zastąpiliśmy .then(). Gdy obietnica zostanie rozwiązana, przechowujemy wartość w zmiennej response.

Podsumowanie

W tym samouczku omówiliśmy różne przykłady użycia biblioteki Axios do pracy z REST API. Kody pokazują tworzenie żądań HTTP i obsługę odpowiedzi.

Chcesz dowiedzieć się więcej o JavaScript? Sprawdź nasze inne poradniki dla początkujących dotyczące różnych pojęć i funkcji JavaScript, na przykład daty i czasu, manipulacji ciągami znaków, klas, oraz obiektów.

Miłego kodowania!

Hark Labs

Autor · CloudSigma

Preslav Dobrev jest projektantem kreatywnym w CloudSigma, skupiającym się na spójnej tożsamości biznesowej przy wykorzystaniu tradycyjnych i innowacyjnych kanałów marketingowych. Biegle łączy wizję artystyczną ze strategicznym marketingiem, tworząc wywierające wpływ narracje marki.

Używanie klienta HTTP Axios w aplikacji React: Poradnik

Wymagania wstępne

Krok 1: Instalacja Axios w projekcie React

Krok 2: Tworzenie żądania GET

Krok 3: Utworzenie żądania POST

Krok 4: Utworzenie żądania DELETE

Step 5: Apply Base Instance in Axios

Krok 6: Implementacja async i await

Podsumowanie

Hark Labs

Komentarze