Axios to popularna biblioteka JavaScript służąca do wykonywania żądań HTTP. Jest to klient HTTP oparty na obietnicach (promise), używany w języku JavaScript lub z innymi bibliotekami JavaScript, takimi jak Vue.js czy React.js. Ze względu na swoją izomorficzną naturę, Axios może działać jednocześnie po stronie klienta i serwera, korzystając z tej samej bazy kodu. Ponadto jest to potężne narzędzie używane wspólnie z async w celu stworzenia przyjaznego dla użytkownika API. Przede wszystkim Axios ma możliwość automatycznego anulowania żądania, co w innym przypadku byłoby trudnym zadaniem.
Jak działa Axios?
Axios używa domyślnych obietnic ustawień, aby działać równolegle w przeglądarce i Node.js przy użyciu tego samego kodu. Korzystając z funkcji HTTP opartej na obietnicach, Axios wykonuje CRUD operacje i wysyła żądania HTTP do REST punktów końcowych. W tym samouczku przeprowadzimy Cię przez kroki konfiguracji REST API z użyciem Axios w Vue.js.
Zaczynajmy!
Wymagania wstępne
Aby móc ukończyć ten samouczek, musisz posiadać następujące elementy:
- Zainstalowany Node.js i skonfigurowany w systemie Ubuntu.
- Jeśli używasz systemu CentOS, możesz skorzystać z tego przewodnika, aby zainstalować Node.js na CentOS 8.
- Podstawy JavaScript.
Krok 1: Instalacja Axios
Przed zainstalowaniem Axios ważne jest, aby zaktualizować repozytoria systemowe, aby uniknąć błędów lub niepowodzenia instalacji:
|
1 |
sudo apt-get update |
Następnie zainstaluj Axios za pomocą pakietu oprogramowania npm :
|
1 |
npm install axios --save |
Alternatywnie możesz zainstalować Axios za pomocą menedżera pakietów yarn :
|
1 |
yarn add axios |
Następnie utwórz projekt Vue.js i zaimportuj do niego Axios:
|
1 |
import axios from ‘axios’; |
W kolejnym kroku użyjemy metody axios.get() do pobierania żądań.
Krok 2: Pobieranie danych za pomocą żądania GET
Tutaj pobierzemy dane za pomocą żądania GET . Zobacz, jak używamy metody axios.get() do pobierania danych bezpośrednio z metody:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<template> <div> <ul v-if="posts && posts.length"> <li v-for="post of posts"> <p><strong>{{post.title}}</strong></p> <p>{{post.body}}</p> </li> </ul> <ul v-if="errors && errors.length"> <li v-for="error of errors"> {{error.message}} </li> </ul> </div> </template> <script> import axios from "axios"; export default { data() { return { posts: [], errors: [], }; }, // Pobiera posty, gdy komponent zostanie utworzony. created() { axios .get(`http://jsonplaceholder.typicode.com/posts`) .then((response) => { // Odpowiedzi JSON są automatycznie parsowane. this.posts = response.data; }) .catch((e) => { this.errors.push(e); }); } }; </script> |
Zobaczysz wersję async lub await :
Powyższy kod pobierze posty z JSONPlaceholder i rozmieści dane w sposób nieuporządkowany. Wszelkie napotkane błędy pojawią się na innej nieuporządkowanej liście.
Krok 3: Przesyłanie danych za pomocą żądania POST
W przeciwieństwie do metody axios.get() , użyjemy teraz metody axios.post() do wykonania żądania POST. Zobacz, jak zastosować metodę axios.post() do pobrania danych:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<template> <div> <input type="text" v-model="postBody" @change="postPost()" /> <ul v-if="errors && errors.length"> <li v-for="error of errors"> {{error.message}} </li> </ul> </div> </template> <script> import axios from "axios"; export default { data() { return { postBody: "", errors: [] } }, methods: { // Przesyła posty na serwer po wywołaniu. postPost() { axios .post(`http://jsonplaceholder.typicode.com/posts`, { body: this.postBody }) .then((response) => {}) .catch((e) => { this.errors.push(e) }) } } } </script> |
Zobaczysz wersję async lub await :
Powyższy kod utworzy pole wprowadzania, które przesyła zawartość do JSONPlaceholder. Wszelkie napotkane błędy pojawią się na innej liście nieuporządkowanej.
Krok 4: Skonfiguruj wspólną instancję bazową
W tym kroku utworzymy wspólną instancję bazową za pomocą metody axios.create() . Celem skonfigurowania wspólnej instancji bazowej jest współdzielenie bazowego adresu URL we wszystkich instancjach.
Wspólna instancja bazowa jest przydatna, jeśli wszystkie Twoje wywołania korzystają ze wspólnego serwera lub nagłówka, takiego jak Authorization :
|
1 2 3 4 5 6 7 8 |
import axios from "axios"; export const HTTP = axios.create({ baseURL: `http://jsonplaceholder.typicode.com/`, headers: { Authorization: "Bearer {token}" } }) |
Na koniec wszystko jest gotowe, aby użyć HTTP w swoim komponencie:
Po skonfigurowaniu wszystkiego, nasze http-demo.js zostało ustanowione. Teraz Axios łączy się z JSONPlaceholder oraz nagłówkiem Authorization w tym samym czasie, korzystając z tej samej bazy kodu. Najlepsze jest to, że Axios pobiera posty, identyfikuje błędy i wyświetla je na liście nieuporządkowanej.
Podsumowanie
W tym samouczku poznaliśmy podstawy wysyłania i pobierania danych za pomocą Axios. Ponadto utworzyliśmy wspólną instancję bazową, aby współdzielić wspólny adres URL. Jednak to nie może być koniec Twojej nauki Axios. Zachęcamy do przećwiczenia innych metod Axios w celu wysyłania POST, PUT, PATCH i DELETE żądań. Zanurz się w dokumentacji Axios, aby zgłębić temat i spróbować samodzielnie tworzyć projekty.
Aby dowiedzieć się więcej na temat Axios i Vue.js, sprawdź te zasoby z naszego bloga:
- Używanie klienta HTTP Axios w aplikacji React: Samouczek
- Używanie Vue i Axios do wyświetlania danych z API
Miłego kodowania!
Komentarze
Brak komentarzy. Bądź pierwszy.