Jak składać żądania HTTP w JavaScript za pomocą axios | Wyjaśniono przykładami

Axios to ściśle oparta na obietnicy biblioteka JavaScript, która może być uwzględniona w twoim projekcie za pomocą albo za pomocą Menedżer pakietów węzłów (NPM) Lub Axios hostowane CDN. Służy do tworzenia xmlhttprequest z przeglądarki, a także żądań HTTP o projekty utworzone za pomocą NodeJS. Ponieważ może pracować zarówno z projektami węzłów, jak i dla przeglądarków, jest często określany jako Moduł izomorficzny.

Jest to klient HTTP, co oznacza, że ​​możemy go użyć DOSTAWAĆ, POST, I USUWAĆ Metody interakcji z API

Konfigurowanie axios w swoim projekcie

Jeśli pracujesz z pakietem węzłów, możesz pobrać AXIOS, wpisując następujące polecenie w terminalu edytora kodu:

$ npm instaluj axios

Jeśli pracujesz z waniliowym JavaScript, możesz dołączyć hostowane CDN AXIOS w pliku HTML za pomocą następującego wiersza:

Również do przetestowania AXIOS, będziemy używać próbnego interfejsu API dostarczonego przez Req | Res. A adres URL API to „https: // reqres.in/API/Użytkownicy ”.

Ponieważ jest to samouczek pokazujący, jak pracować z Axios, aby składać żądania HTTP, dlatego nie będziemy manipulować za pomocą elementów HTML. Mamy tylko następujące wiersze na stronie internetowej HTML:

Axios HTTP żądania

Uzyskaj żądanie z Axios

Robić DOSTAWAĆ żądania interfejsu API za pomocą interfejsu API używamy następującej składni:

axios.Get (URL).Następnie (odpowiedź => ).catch (error => ());

Użyjmy tej składni, aby złożyć żądanie GET do REQ | API użytkownika RES:

axios.get ("https: // reqres.in/API/Użytkownicy ”).Następnie ((response) =>
Użytkownicy const = odpowiedź.dane.dane;
konsola.log („zdobądź użytkowników”, użytkownicy);
).Catch ((błąd) => konsola.błąd (błąd));

Ale chcemy owinąć tę metodę GET w funkcji, więc użyj następujących wierszy kodu:

const getusers = () =>
axios
.get ("https: // reqres.in/API/Użytkownicy ”)
.Następnie ((response) =>
Użytkownicy const = odpowiedź.dane.dane;
konsola.log („zdobądź użytkowników”, użytkownicy);
)
.Catch ((błąd) => konsola.błąd (błąd));
;

Teraz wszystko, co musimy zrobić, to wywołać funkcję getuesrs () Z następującym wierszem kodu:

getusers ();

Uruchamiając plik HTML, zobaczysz następujące wyniki:

Jeśli rozszerzymy ten wpis, będziemy mogli zobaczyć odpowiedź API znacznie wyraźniej:

Odnieśliśmy sukces DOSTAWAĆ żądanie za pomocą AXIOS i wydrukowano odpowiedź na konsolę.

Żądanie po AXIOS

Aby złożyć żądanie Post z AXIOS, musisz użyć następującej składni:

axios.Post (URL).Następnie ((response) => ).catch ((błąd));

Aby złożyć wniosek o REQ | RES API, Używamy następujących wierszy kodu, które utworzą nowego użytkownika:

const createuser = (user) =>
axios
.post („https: // reqRes.in/API/Users ”, użytkownik)
.Następnie ((response) =>
const adduser = odpowiedź.dane;
konsola.log ('Post: Użytkownik jest dodawany', dodatek);
)
.Catch ((błąd) => konsola.błąd (błąd));
;

Aby to wywołać Żądanie po, Musimy wywołać tę funkcję Stwórz użytkownika(), Ale zanim to zrobimy. Tak więc na stronie internetowej Req |

To wymaga "nazwa" para wartości kluczowej i para wartości klucza „zadania”. Zadzwońmy Stwórz użytkownika() Funkcja z odpowiednim JSON:

Stwórz użytkownika(
Imię: „John Doe”,
Praca: „Audytor”,
);

Uruchom plik, a zobaczysz następujący wynik na konsoli przeglądarki:

To wszystko, mogliśmy wysłać POST żądanie interfejsu API za pomocą axios.

Usuń żądanie z Axios

Aby usunąć żądania z AXIOS do interfejsu API, musisz użyć następującej składni

axios.Usuń (URL).Następnie ((response) => ).catch ((błąd) => ());

Aby złożyć wniosek o usunięcie do interfejsu API req | RES, użyj następujących wierszy kodu:

const deleteuser = (id) =>
axios
.delete ('https: // reqRes.in/API/Users/$ id ')
.Następnie ((response) =>
konsola.log („Usuń: użytkownik jest usunięty”, id);
)
.Catch ((błąd) => konsola.błąd (błąd));
;

Wszystko, co musimy zrobić, to wywołać deleteSer funkcji za pomocą następującego wiersza:

Deleteuser (2);

Uruchom plik i obserwuj wynik na konsoli przeglądarki:

Proszę bardzo, pomyślnie złożyliśmy prośbę o usunięcie API za pomocą AXIOS.

Wniosek

AXIOS jest klientem HTTP, który może być zawarty w projektach węzłów za pomocą menedżera pakietów węzłów lub w projekcie waniliowym JavaScript za pomocą aksjosów przeżywanych przez CDN. Axios służy do tworzenia xmlhttprequests do interfejsu API i jest to ściśle biblioteka oparta na obietnicy. W tym poście nauczyliśmy się wchodzić w interakcje z zewnętrznym interfejsem API za pomocą AXIOS i uczynić inaczej DOSTAWAĆ, POST I USUWAĆ prośby do API.