W React komunikacja z backendem odbywa się zazwyczaj za pomocą protokołu HTTP. Choć wielu programistów zna interfejs żądań XML HTTP i interfejs API Fetch do tworzenia żądań HTTP, istnieje jeszcze jedna potężna biblioteka o nazwie Axios, która jeszcze bardziej upraszcza ten proces.
Spis treści
- Warunki wstępne
- Wprowadzenie do Axiosa
- Kroki tworzenia aplikacji React
- Potrzeba Axios w React
- POBIERZ żądanie za pomocą Axios
- Żądanie POST z Axios:
- Usuń żądanie za pomocą Axios:
- Obiekty odpowiedzi w Axios
- Obiekt błędu:
- Funkcje biblioteki Axios
- Metody skrócone w Axios
- Wniosek
Wprowadzenie do Axios:
Popularna biblioteka Axios służy głównie do wysyłania asynchronicznych żądań HTTP do punktów końcowych REST. Ta biblioteka jest bardzo przydatna do wykonywania operacji CRUD.
- Ta popularna biblioteka służy do komunikacji z backendem. Axios obsługuje interfejs API Promise, natywny dla JS ES6.
- Za pomocą Axios realizujemy żądania API w naszej aplikacji. Po złożeniu żądania otrzymujemy dane w Return, a następnie wykorzystujemy je w naszym projekcie.
- Biblioteka ta jest bardzo popularna wśród programistów. Możesz sprawdzić na GitHubie i znajdziesz na nim 78 tys. gwiazdek.
Zanim zainstalujesz Axios, Twoja aplikacja projektu React powinna być gotowa do zainstalowania tej biblioteki. Stwórz Reagować aplikacji, wykonując czynności podane poniżej…
Kroki tworzenia aplikacji React:
Krok 1: Poniżej znajduje się polecenie umożliwiające utworzenie aplikacji React w Twoim projekcie…
npx create-react-app myreactapp>
Krok 2: Wejdź do katalogu utworzonego w pierwszym kroku.
cd myreactapp>
Krok 3: Zainstaluj bibliotekę Axios za pomocą polecenia podanego poniżej…
npm i axios>
Struktura projektu:
mysql opuścił połączenie
Zaktualizowane zależności w pakiet.json plik.
'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' },> Przykład: Ten fragment kodu używa osi do wysyłania żądania HTTP do serwera zaplecza.
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)}> Wyślij pliki ); } } eksportuj domyślną aplikację;> |
>
>
Kroki, aby uruchomić aplikację: Otwórz terminal i wpisz następujące polecenie.
npm start>
Wyjście: Otwórz przeglądarkę, a nasz projekt wyświetli się w adresie URL http://localhost:3000/
Powyższy przykład to tylko krótki opis kodu pokazujący, jak używać Axios w swoim projekcie. W nadchodzącej sekcji omówimy wiele metod, takich jak GET, POST i PUT w Axios.
Potrzeba Axios w React:
Jak już wspomnieliśmy, Axios umożliwia komunikację z interfejsami API w projekcie React. Te same zadania można również wykonać przy użyciu AJAX, ale Axios zapewnia więcej funkcjonalności i funkcji, co pomaga w szybkim budowaniu aplikacji.
Axios jest biblioteką opartą na obietnicach, dlatego należy zaimplementować niektóre asynchroniczne żądania HTTP oparte na obietnicach. jQuery i AJAX również wykonują tę samą pracę, ale w projekcie React React obsługuje wszystko w swoim własnym wirtualnym DOM, więc nie ma w ogóle potrzeby używania jQuery.
Poniżej znajduje się przykład pobrania danych klienta za pomocą Axios…
np. standardowe
JavaScript
const getCustomersData = () =>{> >axios> >.get(>' https://jsonplaceholder.typicode.com/customers '>)> >.then(data =>console.log(data.data))> >.>catch>(error =>konsola.log(błąd));> };> getCustomersData();> |
>
>
Przejdźmy teraz do następnego punktu i zrozummy, w jaki sposób można wykonywać różne operacje, takie jak pobieranie danych lub zużywanie danych za pomocą Axios (GET-POST-DELETE).
POBIERZ żądanie za pomocą Axios:
Utwórz komponent MyBlog i podłącz go do cyklu życia komponentu DidMount. Zaimportuj Axios na górze i pobierz dane za pomocą żądania Get.
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;> >})}> >>>);> >}> }> |
>
>
przejdź do kasy
Tutaj używamy axios.get (URL), aby uzyskać obietnicę zwracającą obiekt odpowiedzi. Zwrócona odpowiedź jest przypisana do obiektu postu. Możemy również pobrać inne informacje, takie jak kod statusu itp.
Żądanie POST z Axios:
Utwórz nowy komponent AddPost dla żądań pocztowych. To żądanie spowoduje dodanie postu do listy postów.
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}'>Nazwa wpisu: type='text' name='name' onChange='{this.handleChange}' /> 'submit'>Add ); } }> |
globalna zmienna w js
>
>
W powyższym kodzie wykonaliśmy żądanie HTTP Post i dodaliśmy nowy post do bazy danych. Zdarzenie onChange wyzwala metodę handleChange() i aktualizuje żądanie, gdy żądanie API pomyślnie zwróci dane.
Usuń żądanie za pomocą Axios:
Do wysłania żądania usunięcia do serwera używany jest plik axios.delete. Podczas tworzenia tego adresu URL żądania i opcjonalnej konfiguracji musisz określić dwa parametry.
axios.delete(url, { data: { foo: 'bar' }, headers: { 'Authorization': '******' } });> Wysyłając żądanie usunięcia, będziesz musiał ustawić treść żądania i nagłówki. W tym celu użyj pliku config.data. W powyższym żądaniu POST zmodyfikuj kod jak podano poniżej…
JavaScript
handleSubmit = event =>{> >event.preventDefault();> >axios.>delete>(> >`https:>//jsonplaceholder.typicode.com/posts/${this.state.postName}`)> >.then(res =>{> >console.log(res);> >console.log(res.data);> >})> }> |
>
>
Obiekty odpowiedzi w Axios:
Kiedy wysyłasz żądanie do serwera, otrzymujesz z serwera obiekt odpowiedzi o właściwościach podanych poniżej…
- dane: Otrzymujesz dane z serwera w formie ładunku. Dane te są zwracane w formie JSON i ponownie przetwarzane w obiekt JavaScript.
- status: Otrzymasz kod HTTP zwrócony z serwera.
- tekst statusu: Komunikat o stanie HTTP zwrócony przez serwer.
- nagłówki: Wszystkie nagłówki są odsyłane przez serwer.
- konfiguracja: pierwotna konfiguracja żądania.
- wniosek: rzeczywisty obiekt XMLHttpRequest.
Obiekt błędu:
Jeśli wystąpi problem z żądaniem, otrzymasz obiekt błędu. Obietnica zostanie odrzucona z obiektem błędu o podanych właściwościach
- wiadomość: Tekst komunikatu o błędzie.
- odpowiedź: Obiekt odpowiedzi (jeśli otrzymano).
- wniosek: Rzeczywisty obiekt XMLHttpRequest (podczas działania w przeglądarce).
- konfiguracja: Oryginalna konfiguracja żądania.
Funkcje biblioteki Axios
- Dane JSON są przekształcane automatycznie.
- Przekształca dane żądania i odpowiedzi.
- Przydatne przy tworzeniu żądań HTTP z Node.js
- Tworzy XMLHttpRequests z przeglądarki.
- Zapewnij wsparcie po stronie klienta w zakresie ochrony przed XSRF.
- Obsługuje obietnicę API.
- Możliwość anulowania żądania.
Metody skrócone w Axios:
Poniżej znajduje się kilka skróconych metod Axios…
- axios.request(config)
- axios.head(url[, konfiguracja])
- axios.get(url[, konfiguracja])
- axios.post(url[, dane[, konfiguracja]])
- axios.put(url[, dane[, konfiguracja]])
- axios.delete(url[, konfiguracja])
- axios.options(url[, konfiguracja])
- axios.patch(url[, dane[, konfiguracja]])
Wniosek
W tym artykule wyjaśniono wszystko na temat biblioteki Axios. Omówiliśmy kilka przydatnych operacji, takich jak pobieranie danych, wysyłanie danych, aktualizacja danych lub usuwanie danych w Axios. Gdy zaczniesz pracować nad Reactem, będziesz musiał używać tej biblioteki do komunikacji z serwerem bazy danych. Dlatego ważne jest, aby to przećwiczyć i zrozumieć, jak wszystko działa w Axios.