Kompletny przewodnik po pracy z Axios

Axios to biblioteka JavaScript, która zapewnia prosty interfejs API do wysyłania żądań HTTP z kodu JavaScript po stronie klienta lub kodu Node.js po stronie serwera. Axios jest zbudowany na JavaScript Promise API, co sprawia, że ​​kod asynchroniczny jest łatwiejszy w utrzymaniu.

Pierwsze kroki z Axiosem

Możesz wykorzystać Axios w swojej aplikacji, korzystając z sieci dostarczania treści (CDN) lub instalując ją w swoim projekcie.

Aby używać Axios bezpośrednio w HTML, skopiuj poniższy link CDN i umieść go w sekcji head swojego pliku HTML:

<scenariuszźródło=" https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">scenariusz>

Dzięki takiemu podejściu możesz używać Axios i jego metody HTTP w treści skryptów HTML. Axios też może korzystaj z interfejsów API REST w frameworku takim jak React.

Aby użyć Axios w projekcie Node.js, zainstaluj go w swoim katalogu projektu za pomocą menedżera pakietów npm lub przędzy:

npm zainstaluj osie
# Lub
przędza dodaj axios

Po instalacji możesz zacząć używać Axios w swoim projekcie JavaScript:

konst osie = wymagać(„osi”);

Korzystając z tego przewodnika, będziesz pracować z wolnymi JSONPlaceholder API. Chociaż ten interfejs API ma zestaw zasobów, będziesz korzystać tylko z /comments I /posts punkty końcowe. Punkty końcowe to określone adresy URL, do których można uzyskać dostęp w celu pobierania danych lub manipulowania nimi.

Wykonywanie żądań GET za pomocą Axios

Istnieje wiele sposobów na wysłanie żądania GET za pomocą Axios. Jednak składnia ogólnie zależy od preferencji.

Jednym ze sposobów wykonania żądania GET jest użycie metody osie() metoda z obiektem, który określa metodę żądania jako Dostawać oraz adres URL, na który ma zostać wysłane żądanie.

Na przykład:

konst osie = wymagać(„osi”);
osie({
 metoda: "Dostawać",
 Adres URL: " https://jsonplaceholder.typicode.com/comments",
})
 .Następnie((rez) => {
konsola.log (dane res.);
 })
 .złapać((błądzić) => {
konsola.błąd (błąd);
 });

Ten przykład tworzy obietnica z wykorzystaniem modelu programowania asynchronicznego łańcuszkiem .Następnie() I .złapać() metody. Obietnica rejestruje odpowiedź w konsoli, gdy żądanie zakończy się pomyślnie, i rejestruje komunikat o błędzie, jeśli żądanie się nie powiedzie.

Axios zapewnia również łatwiejszy sposób wykonywania żądań GET, które eliminują potrzebę przekazywania obiektu przez łączenie .Dostawać() metoda do osie instancja.

Na przykład:

osie
 .Dostawać(" https://jsonplaceholder.typicode.com/comments")
 .Następnie((rez) => {
konsola.log (dane res.);
 })
 .złapać((błądzić) => {
konsola.błąd (błąd);
 });

Wykonywanie żądań POST za pomocą Axios

Wysłanie żądania POST za pomocą Axios jest podobne do żądania GET. Możesz wysłać dane do serwera za pomocą tego żądania.

Poniższy fragment kodu jest przykładem użycia Axios .post() metoda:

osie
 .post(" https://jsonplaceholder.typicode.com/comments", {
 nazwa: „Jackson Smith”,
 e-mail: „[email protected]”,
 ciało: „To jest dzieło sztuki”.,
 })
 .Następnie((rez) => {
konsola.log (dane res.);
 })
 .złapać((błądzić) => {
konsola.błąd (błąd);
 });

Kod wysyła żądanie POST do interfejsu API JSONPlaceholder w celu utworzenia nowego komentarza. The axios.post Metoda wysyła dane do /comments punkt końcowy.

Dane przesłane w żądaniu są obiektem o nazwa, e-mail, I ciało nieruchomość. Jeśli prośba się powiedzie, Następnie metoda rejestruje dane odpowiedzi w konsoli. A jeśli jest błąd, np złapać metoda rejestruje błąd w konsoli.

Wykonywanie żądań PUT/PATCH za pomocą Axios

Możesz użyć żądania PUT lub PATCH, aby zaktualizować istniejący zasób na serwerze. Podczas gdy PUT zastępuje cały zasób, PATCH aktualizuje tylko określone pola.

Aby wykonać żądanie PUT lub PATCH za pomocą Axios, musisz użyć .umieścić() Lub .skrawek() odpowiednio metody.

Oto przykład, jak użyć tych metod do zaktualizowania pliku e-mail właściwość komentarza o id 100:

konst osie = wymagać(„osi”);
osie
 .Dostawać(" https://jsonplaceholder.typicode.com/comments/100")
 .Następnie((rez) => {
konsola.log (res.data.email);
 })
 .złapać((błądzić) => {
konsola.błąd (błąd);
 });
// Wyjście:
// '[email protected]'
osie
 .skrawek(" https://jsonplaceholder.typicode.com/comments/100", {
 e-mail: "[email protected]",
 })
 .Następnie((rez) => {
konsola.log (res.data.email);
 })
 .złapać((błądzić) => {
konsola.błąd (błąd);
 });
// Wyjście:
// '[email protected]',

Ten program najpierw wysyła żądanie GET do punktu końcowego " https://jsonplaceholder.typicode.com/comments/100". Następnie rejestruje e-mail właściwość komentarza z identyfikatorem 100 do konsoli. Wykonujemy żądanie GET, abyś mógł zobaczyć, co się zmieniło po wykonaniu żądania PATCH.

Drugie żądanie to żądanie PATCH skierowane do tego samego punktu końcowego. Ten kod aktualizuje adres e-mail komentarza do [email protected].

Wykonywanie żądań DELETE za pomocą Axios

Możesz użyć USUWAĆ żądanie usunięcia zasobu z serwera.

Weź następujący przykład użycia .usuwać() metoda usunięcia zasobu z serwera:

osie
 .usuwać(" https://jsonplaceholder.typicode.com/comments/10")
 .Następnie((rez) => {
konsola.log (dane res.);
 })
 .złapać((błądzić) => {
konsola.błąd (błąd);
 });
//Output:
// {}

Logując pusty obiekt do konsoli, powyższy kod pokazuje, że usunął komentarz o identyfikatorze 10.

Wykonywanie jednoczesnych żądań z Axios

Możesz pobierać dane z wielu punktów końcowych jednocześnie za pomocą Axios. Aby to zrobić, musisz użyć tzw .Wszystko() metoda. Ta metoda przyjmuje jako parametr tablicę żądań i rozwiązuje problem dopiero po otrzymaniu wszystkich odpowiedzi.

W poniższym przykładzie .Wszystko() metoda pobiera dane z dwóch punktów końcowych jednocześnie:

osie
 .Wszystko([
 axios.get(" https://jsonplaceholder.typicode.com/comments? _limit=2"),
 axios.get(" https://jsonplaceholder.typicode.com/posts? _limit=2"),
 ])
 .Następnie(
 axios.spread((komentarze, posty) => {
konsola.log (komentarze. dane);
konsola.log (posty. dane);
 })
 )
 .złapać((błądzić) =>konsola.błąd (błąd));

Powyższy blok kodu jednocześnie wysyła żądania, a następnie przekazuje odpowiedzi do .Następnie() metoda. Aksjosa .rozpowszechnianie się() Metoda oddziela odpowiedzi i przypisuje każdą odpowiedź do swojej zmiennej.

Na koniec konsola rejestruje plik dane właściwość dwóch odpowiedzi: komentarzy i postów.

Przechwytywanie żądań za pomocą Axios

Czasami może być konieczne przechwycenie żądania, zanim dotrze ono do serwera. Możesz użyć Axiosa przechwytywacze.żądanie.użyj() metoda przechwytywania żądań.

W poniższym przykładzie metoda rejestruje typ żądania w konsoli dla każdego wykonanego żądania:

axios.interceptors.request.use(
 (konfiguracja) => {
konsola.dziennik(`${konfiguracja.metoda} złożony wniosek`);
powrót konfiguracja;
 },
 (błąd) => {
powrótObietnica.odrzucić (błąd);
 }
);
osie
 .Dostawać(" https://jsonplaceholder.typicode.com/comments? _limit=2")
 .Następnie((rez) =>konsola.log (dane res.))
 .złapać((błądzić) =>konsola.błąd (błąd));

Program definiuje przechwytywacz Axios za pomocą axios.interceptors.request.use metoda. Ta metoda wymaga konfiguracja I błąd obiekty jako argumenty. The konfiguracja obiekt zawiera informacje o żądaniu, w tym metodę żądania (metoda.konfiguracji) i adres URL żądania (adres URL konfiguracji).

Funkcja przechwytująca zwraca konfiguracja obiekt, umożliwiając normalne wykonanie żądania. W przypadku błędu funkcja zwraca wartość odrzuconą Obietnica obiekt.

Na koniec program wysyła żądanie przetestowania przechwytywacza. Konsola zarejestruje typ wykonanego żądania, w tym przypadku żądanie GET.

Axios to coś więcej

Nauczyłeś się, jak tworzyć i przechwytywać żądania w swoich projektach za pomocą Axios. Wiele innych funkcji, takich jak przekształcanie żądań i korzystanie z instancji Axios, jest dostępnych dla programistów JavaScript. Axios pozostaje preferowaną opcją do wysyłania żądań HTTP w aplikacjach JavaScript. Jednak Fetch API to kolejna dobra opcja, którą możesz zbadać.