Een postverzoek indienen in Javascript

| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |

Bij het bouwen van een webtoepassing kan er een moment komen dat u een HTTP-verzoek wilt indienen om toegang te krijgen tot een externe bron. Stel dat u bijvoorbeeld een blog begint. Misschien wil je een API aanroepen om een lijst met reacties op te halen die bij elke blogpost moeten worden weergegeven.

Axios is een populaire JavaScript-bibliotheek die je kunt gebruiken voor het maken van webverzoeken. In deze handleiding laten we u zien hoe u Axios kunt gebruiken om een GET-verzoek in te dienen. We zullen enkele voorbeelden bekijken om te laten zien hoe Axios werkt en hoe u het in uw code kunt gebruiken.

Waarom Axios?

Axios is een op beloften gebaseerde bibliotheek die het gemakkelijk maakt om webverzoeken maken

Je vraagt je misschien af:. Waarom zou ik Axios gebruiken in een van de vele andere webaanvraagbibliotheken die er zijn? Het is waar dat er andere bibliotheken zijn, zoals extract, die u kunt gebruiken om GET-verzoeken in te dienen, maar Axios heeft een aantal voordelen die deze bibliotheken niet hebben.

Axios ondersteunt oudere browsers, waarmee u een meer toegankelijke gebruikerservaring. Axios wordt ook geleverd met ingebouwde CSRF-beveiliging om kwetsbaarheden te voorkomen. Het werkt ook in Node.js, wat het perfect maakt als je zowel front-end als back-end webapplicaties ontwikkelt.

Hoe installeer je Axios

Voordat je een GET-verzoek maakt met Axios , moet u de bibliotheek installeren. U kunt dit doen door het volgende commando te gebruiken:

Deze opdracht zal Axios installeren en opslaan in het lokale bestand package.json. U bent nu klaar om de Axios-bibliotheek te gaan gebruiken.

Axios Help aanvragen

Aan de slag gaan met Axios is eenvoudig. Om een webverzoek te doen, geeft u gewoon de URL op waarvan u de gegevens wilt opvragen en de methode die u wilt gebruiken

Stel dat we een lijst met willekeurige kattenfeiten willen ophalen van chat -Facts We zouden het kunnen doen met deze code:.

deze code retourneert een belofte die een verzoek vertegenwoordigt dat nog niet is voltooid om de gegevens van dit HTTP-verzoek op te halen, u moet gebruik een asynchrone / wacht-functie zoals deze:

De wi-server reageerde met een lijst met chatfeiten.

Als we deze functie aanroepen, wordt een HTTP GET-verzoek verzonden naar de chat-facts API. We gebruiken een asynchrone / wachtfunctie zodat ons programma niet doorgaat totdat de webaanvraag is voltooid. Dit komt omdat Axios eerst een belofte retourneert. Retourneert de gegevens van het verzoek dat is gedaan nadat het verzoek is voltooid

De Axios-bibliotheek bevat verkorte opdrachten die u kunt gebruiken om verzoeken te doen.

In deze tutorial zullen we ons concentreren op axios. get () en axios.post (), die dezelfde basissyntaxis gebruiken als alle andere stenomethoden.

GET-verzoeken maken met Axios

In ons laatste voorbeeld hebben we de mogelijkheid van Axios om een GET-verzoek in te dienen. Maar er is een eenvoudigere manier om een GET-verzoek te doen met Axios:. Met behulp van

axios.get () Stel dat we een lijst met feiten over katten willen ophalen, dan telt deze hoeveel er zijn teruggestuurd. U kunt dit doen met de volgende code:

De code genereerde dit antwoord: 225 chatfeiten werden geretourneerd

Onze code opsplitsen. Eerst hebben we een asynchrone functie gedeclareerd met de naam getCatFacts () waarin we een webverzoek indienen.

>

Vervolgens gebruiken we axios.get ( ) om een lijst met chatfeiten op te halen uit de chat-facts API; "Response.data" bevat de responsobjecten en de hoofdtekst van het verzoek van ons verzoek.

Ten slotte gebruiken we de .length attribuut om te berekenen hoeveel kattenfeiten zijn geretourneerd door ons verzoek. Vervolgens voegen we dat nummer toe aan de tekenreeks " cat facts were geretourneerd.

Koppelingen verzenden met Axios

Bij het maken van een GET-verzoek, moet u mogelijk een aangepaste header verzenden naar de bronwebsite die u bent aanvragen. Een API die siteverificatie vereist. Mogelijk moet u een authenticatieheader opgeven

<. P> Om een header met een Axios-verzoek te specificeren, kunt u de volgende code gebruiken:

Deze code zou de ` header` header-name verzenden " met de "headerwaarde" naar de url die we hebben opgegeven.

Stuur parameters met Axios

Veel API`s stellen u in staat parameters te verzenden in een GET-verzoek. Met een API kunt u bijvoorbeeld het aantal geretourneerde antwoorden beperken door een limietparameter te gebruiken.

Het specificeren van een parameter die moet worden verzonden met een webverzoek, is eenvoudig met Axios. U kunt de parameter opnemen als een querytekenreeks of de eigenschap params gebruiken. Hier is een voorbeeld van hoe Axios een webverzoek doet met behulp van queryreeksen om een parameter op te geven:

u kunt een eigenschap params specificeren in Axios-opties met behulp van deze code:

deze twee voorbeelden sturen een parameter met de naam "date" en de waarde" 15-05-2020 "op de opgegeven URL.

Hoe maak je een POST-verzoek met Axios

De syntaxis voor het maken van een POST-verzoek is hetzelfde als voor een GET-verzoek, het verschil is dat je de code <> axios.post ( ) in plaats van axios.get ().

Stel dat u een verzoek naar een publicatie-API wilt sturen, dan kunt u dit doen met de volgende code:

Je kunt headers en parameters specificeren op dezelfde manier als een GET-verzoek. Laten we zeggen dat je de header "Name" met de waarde "James" met yo wilt verzenden uw POST-verzoek. je kunt het doen met deze code:.

Axios-bericht ("https://urlhere.com", { heads: {"Name": "James "}}) 

Conclusie

De Axios-bibliotheek wordt gebruikt om webverzoeken in JavaScript te doen. Het kan zowel aan de voorkant worden gebruikt met JavaScript als aan de achterkant met behulp van een platform zoals Node.js. In tegenstelling tot andere webquerybibliotheken heeft Axios ingebouwde CSRF-beveiliging, ondersteunt het oudere browsers en gebruikt het een belofteraamwerk. Het is perfect voor het maken van webverzoeken.

U bent nu klaar om GET- en POST-verzoeken te maken Axios gebruiken als een professionele webontwikkelaar.