Een complete gids voor het werken met Axios

Axios is een JavaScript-bibliotheek die een eenvoudige API biedt voor het verzenden van HTTP-verzoeken van JavaScript-code aan clientzijde of Node.js-code aan serverzijde. Axios is gebouwd op de Promise API van JavaScript, waardoor asynchrone code beter te onderhouden is.

Aan de slag met Axios

U kunt Axios in uw app gebruiken met behulp van een Content Delivery Network (CDN) of door het in uw project te installeren.

Om Axios rechtstreeks in HTML te gebruiken, kopieert u de onderstaande CDN-link en plaatst u deze in het hoofdgedeelte van uw HTML-bestand:

<scriptsrc=" https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">script>

Met deze aanpak kunt u Axios en zijn HTTP-methoden in de hoofdtekst van uw HTML-scripts. Axios kan ook REST API's gebruiken in een framework zoals React.

Om Axios in een Node.js-project te gebruiken, installeert u het in uw projectdirectory met behulp van de npm- of garenpakketbeheerder:

npm axios installeren
# of
garen voeg axios toe

Na installatie kunt u Axios gaan gebruiken in uw JavaScript-project:

const axio = vereisen('axios');

Langs deze gids werk je met de gratis JSON Tijdelijke aanduiding API. Hoewel deze API een reeks bronnen heeft, gebruikt u alleen de /comments En /posts eindpunten. Eindpunten zijn specifieke URL's waartoe toegang kan worden verkregen om gegevens op te halen of te manipuleren.

GET-verzoeken maken met Axios

Er zijn meerdere manieren om een ​​GET-verzoek te doen met Axios. De syntaxis hangt echter over het algemeen af ​​van de voorkeur.

Een van de manieren om een ​​GET-verzoek te doen, is door de axio() methode met een object dat de aanvraagmethode specificeert als krijgen en de URL waarnaar het verzoek moet worden verzonden.

Bijvoorbeeld:

const axio = vereisen("axios");
axios({
 methode: "krijgen",
 url: " https://jsonplaceholder.typicode.com/comments",
})
 .Dan((res) => {
troosten.log (res.data);
 })
 .vangst((fout) => {
troosten.fout (fout);
 });

Dit voorbeeld creëert een belofte met behulp van het asynchrone programmeermodel door het ketenen van de .Dan() En .vangst() methoden. De belofte registreert het antwoord op de console wanneer het verzoek succesvol is en registreert het foutbericht als het verzoek mislukt.

Axios biedt ook een eenvoudigere manier om GET-verzoeken te doen die de noodzaak elimineren om een ​​object door te geven door de .krijgen() methode naar de axioma's voorbeeld.

Bijvoorbeeld:

axioma's
 .krijgen(" https://jsonplaceholder.typicode.com/comments")
 .Dan((res) => {
troosten.log (res.data);
 })
 .vangst((fout) => {
troosten.fout (fout);
 });

POST-verzoeken maken met Axios

Het maken van een POST-verzoek met Axios is vergelijkbaar met het maken van een GET-verzoek. Met dit verzoek kunt u gegevens naar een server sturen.

Het onderstaande codefragment is een voorbeeld van het gebruik van Axios' .na() methode:

axioma's
 .na(" https://jsonplaceholder.typicode.com/comments", {
 naam: "Jackson Smith",
 e-mail: "[email protected]",
 lichaam: "Dit is een kunstwerk.",
 })
 .Dan((res) => {
troosten.log (res.data);
 })
 .vangst((fout) => {
troosten.fout (fout);
 });

De code doet een POST-verzoek aan de JSONPlaceholder API om een ​​nieuwe opmerking te maken. De axios.post methode stuurt gegevens naar de /comments eindpunt.

De gegevens die in het verzoek worden verzonden, zijn een object met een naam, e-mailen, En lichaam eigendom. Als het verzoek succesvol is, wordt de Dan methode registreert de responsgegevens naar de console. En als er een fout is, de vangst methode registreert de fout in de console.

PUT/PATCH-verzoeken maken met Axios

U kunt het PUT- of PATCH-verzoek gebruiken om een ​​bestaande bron op de server bij te werken. Terwijl PUT de volledige bron vervangt, werkt PATCH alleen de opgegeven velden bij.

Om een ​​PUT- of PATCH-verzoek met Axios te maken, moet u de .neerzetten() of .lapje() methoden respectievelijk.

Hier is een voorbeeld van hoe u deze methoden kunt gebruiken om het e-mailen eigenschap van de opmerking met een id van 100:

const axio = vereisen("axios");
axioma's
 .krijgen(" https://jsonplaceholder.typicode.com/comments/100")
 .Dan((res) => {
troosten.log (res.data.email);
 })
 .vangst((fout) => {
troosten.fout (fout);
 });
// Uitvoer:
// '[email protected]'
axioma's
 .lapje(" https://jsonplaceholder.typicode.com/comments/100", {
 e-mail: "[email protected]",
 })
 .Dan((res) => {
troosten.log (res.data.email);
 })
 .vangst((fout) => {
troosten.fout (fout);
 });
// Uitvoer:
// '[email protected]',

Dit programma doet eerst een GET-verzoek naar het eindpunt " https://jsonplaceholder.typicode.com/comments/100". Het logt vervolgens de e-mailen eigenschap van de opmerking met een ID van 100 naar de console. We doen een GET-verzoek zodat u kunt zien wat er is veranderd na het maken van het PATCH-verzoek.

Het tweede verzoek is een PATCH-verzoek aan hetzelfde eindpunt. Deze code werkt de e-mail van de opmerking bij naar [email protected].

DELETE-aanvragen doen met Axios

U kunt de VERWIJDEREN verzoek om een ​​bron op de server te verwijderen.

Neem het volgende voorbeeld van het gebruik van de .verwijderen() methode om een ​​bron van de server te verwijderen:

axioma's
 .verwijderen(" https://jsonplaceholder.typicode.com/comments/10")
 .Dan((res) => {
troosten.log (res.data);
 })
 .vangst((fout) => {
troosten.fout (fout);
 });
//Output:
// {}

Door een leeg object in de console te loggen, laat de bovenstaande code zien dat het de opmerking met ID 10 heeft verwijderd.

Gelijktijdige verzoeken doen met Axios

Met Axios kunt u gegevens van meerdere eindpunten tegelijk ophalen. Om dit te doen, moet u de .alle() methode. Deze methode accepteert een reeks verzoeken als parameter en lost alleen op wanneer u alle antwoorden ontvangt.

In het volgende voorbeeld is de .alle() methode haalt tegelijkertijd gegevens op van twee eindpunten:

axioma's
 .alle([
 axios.get(" https://jsonplaceholder.typicode.com/comments? _limiet=2"),
 axios.get(" https://jsonplaceholder.typicode.com/posts? _limiet=2"),
 ])
 .Dan(
 axios.spread((opmerkingen, berichten) => {
troosten.log (opmerkingen.gegevens);
troosten.log (berichten.gegevens);
 })
 )
 .vangst((fout) =>troosten.fout (fout));

Het bovenstaande codeblok verzendt verzoeken tegelijkertijd en geeft vervolgens de antwoorden door aan de .Dan() methode. van Axios .spreiding() methode scheidt de antwoorden en wijst elk antwoord toe aan zijn variabele.

Ten slotte registreert de console de gegevens eigenschap van de twee reacties: opmerkingen en berichten.

Verzoeken onderscheppen met Axios

Soms moet u een verzoek onderscheppen voordat het bij de server aankomt. U kunt Axios' interceptors.request.use() methode om verzoeken te onderscheppen.

In het volgende voorbeeld registreert de methode het type verzoek naar de console voor elk verzoek dat wordt gedaan:

axios.interceptors.request.use(
 (configuratie) => {
troosten.log(`${config.methode} verzoek gedaan');
opbrengst configuratie;
 },
 (fout) => {
opbrengstBelofte.weigeren (fout);
 }
);
axioma's
 .krijgen(" https://jsonplaceholder.typicode.com/comments? _limiet=2")
 .Dan((res) =>troosten.log (res.data))
 .vangst((fout) =>troosten.fout (fout));

Het programma definieert een Axios-interceptor met behulp van de axios.interceptors.request.use methode. Deze methode duurt configuratie En fout objecten als argumenten. De configuratie object bevat informatie over het verzoek, inclusief de verzoekmethode (config.methode) en de verzoek-URL (configuratie.url).

De interceptorfunctie retourneert de configuratie object, waardoor het verzoek normaal kan verlopen. Als er een fout is, retourneert de functie de verworpen Belofte voorwerp.

Ten slotte doet het programma een verzoek om de interceptor te testen. De console registreert het type verzoek dat is gedaan, in dit geval een GET-verzoek.

Axios biedt meer

U hebt geleerd hoe u verzoeken in uw projecten kunt maken en onderscheppen met behulp van Axios. Veel andere functies, zoals het transformeren van verzoeken en het gebruik van Axios-instanties, zijn voor u als JavaScript-ontwikkelaar beschikbaar om te verkennen. Axios blijft een voorkeursoptie voor het doen van HTTP-verzoeken in uw JavaScript-toepassingen. Fetch API is echter een andere goede optie die u kunt verkennen.