Beskrivning
Axios är ett Promised-baserat JavaScript-bibliotek som används för att skicka HTTP-förfrågningar. Du kan se det som ett alternativ till JavaScript nativ fetch() funktion.
Vi kommer att använda funktioner som löften, async/await, och andra moderna JavaScript-designmönster i denna handledning. Om du vill få upp farten eller fräscha upp ditt minne är du intresserad av att läsa dessa artiklar innan du fortsätter:
- Den här artikeln använder pilnotationen som introducerades i ES2015 för att definiera funktioner. Du kan läsa mer om det på Pilfunktioner i JavaScript artikel.
- Axios är ett Promised-baserat bibliotek. Om du behöver lära dig mer om Promises kan du läsa vår Löften i Node.js guide.
- För att förbättra vår upplevelse av Promises kommer vi att använda Node.js
async/awaitsyntax. Du kan läsa vår Node.js Async Await i ES7 artikel för att bemästra denna funktion!
I den här handledningen kommer vi att göra GET, POST, PUToch DELETE förfrågningar till ett REST API med Axios. Låt oss lära oss lite mer om det här biblioteket.
Vad är Axios?
Axios är ett modernt, Promise-baserat HTTP-klientbibliotek. Detta innebär att Axios används för att skicka en HTTP-förfrågan och hantera deras svar, allt med hjälp av JavaScripts löften. Axios stöder både Node.js och JavaScript i webbläsaren.
Axios är också gratis och öppen källkod. Du kan besöka den GitHub Repository för att se dess kod och dokumentation.
Den kommer inbyggd med viss webbsäkerhet genom att skydda användare mot attacker som t.ex Cross-Site Request Forgery (CSRF).
Som ett resultat av dess funktioner och användarvänlighet har det blivit ett populärt val för JavaScript-utvecklare att använda när de gör HTTP-anrop. Låt oss komma igång med att ställa in Axios.
Ställa in Axios
Låt oss först skapa en ny mapp och initiera NPM med standardinställningarna:
$ mkdir axios-tutorial
$ cd axios-tutorial
$ npm init -y
Därefter kan vi använda NPM för att installera biblioteket:
$ npm i --save axios
Anmärkningar: Om du använder TypeScript i ditt projekt (till exempel med en Angular-app), kommer Axios-biblioteket med sina typdefinitioner. Du behöver inte ta ett extra steg för att installera typer!
Om du är på webbläsaren kan du använda ett CDN för att importera skriptet också.
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
Den här handledningen använder Node.js med CommonJS för att ladda våra bibliotek. CommonJS är en standard för att ladda moduler, i synnerhet specificerar den require() nyckelord för att göra det. Exemplen ska fungera oavsett plattform utan några ändringar.
Nu när vi har ställt in Axios i vår utvecklingsmiljö, låt oss gå direkt till att göra HTTP-förfrågningar.
Skriva asynkrona förfrågningar med Axios
I Node.js görs in- och utdataaktiviteter som nätverksbegäranden asynkront. Eftersom Axios använder Promises för att göra nätverksbegäranden är återuppringningar inte ett alternativ när du använder det här biblioteket. Vi interagerar med Axios med hjälp av Promises, eller async/await nyckelord som är en alternativ syntax för att använda Promises.
Importera Axios
Om du använder CommonJS finns det två metoder i Node.js för att importera biblioteket.
Du kan importera modulen i din kod så här:
const axios = require('axios')
Men många IDE- och kodredigerare kan erbjuda bättre autokomplettering vid import så här:
const axios = require('axios').default;
Detta fungerar när du använder CommonJS för att importera moduler. Vi rekommenderar att du använder den andra metoden eftersom autokomplettering och att se koddokumentation i din IDE kan göra utvecklingsprocessen enklare.
Med biblioteket importerat kan vi börja göra HTTP-förfrågningar.
Skickar GET-förfrågningar
Låt oss skicka vår första förfrågan med Axios! Det kommer vara GET begäran, som vanligtvis används för att hämta data.
Vi kommer att göra en HTTP-förfrågan till ett externt API som skickar oss en lista med blogginlägg. När vi tar emot data loggar vi dess innehåll till konsolen. Om vi stöter på ett fel loggar vi det också.
Låt oss se hur man gör en med standardsyntaxen Promise. I en ny fil som heter getRequestPromise.js, lägg till följande kod:
const axios = require('axios').default; axios.get('https://jsonplaceholder.typicode.com/posts') .then(resp => { console.log(resp.data); }) .catch(err => { // Handle Error Here console.error(err); });
Att göra en GET begäran skickar vi resursens URL som argument i axios.get() metod.
Om du kör den här koden med node getRequestPromise.js, skulle du se följande utdata:
[ { userId: 1, id: 1, title: 'sunt aut facere repellat provident occaecati excepturi optio reprehenderit', body: 'quia et suscipitnsuscipit recusandae consequuntur expedita et cumnreprehenderit molestiae ut ut quas totamnnostrum rerum est autem sunt rem eveniet architecto' }, { userId: 1, id: 2, title: 'qui est esse', body: 'est rerum tempore vitaensequi sint nihil reprehenderit dolor beatae ea dolores nequenfugiat blanditiis voluptate porro ve
l nihil molestiae ut reiciendisnqui aperiam non debitis possimus qui neque nisi nulla' },
...
Låt oss nu se hur vi kan skriva om samma kod som den här async/await nyckelord. I en ny fil getRequestAsyncAwait.js, lägg till följande kod:
const axios = require('axios'); const sendGetRequest = async () => { try { const resp = await axios.get('https://jsonplaceholder.typicode.com/posts'); console.log(resp.data); } catch (err) { // Handle Error Here console.error(err); }
}; sendGetRequest();
Att använda async/await syntax måste vi slå in axios.get() funktionsanrop inom en async fungera. Vi inkapslar metodanropet med en try...catch blockera så att vi kan fånga eventuella fel, liknande catch() metod som vi använde i Promise-versionen. Variabeln som tog emot HTTP-data var tvungen att använda await nyckelord för att säkerställa att asynkron data togs emot innan du fortsätter. Från och med nu kommer vi bara att använda async/await syntax i våra exempel.
Att köra den här koden kommer att skriva ut samma utdata till konsolen som det ursprungliga Promise-exemplet.
Ett Axios-svar för en HTTP-begäran (den resp objekt i exemplet) kommer att innehålla följande information om HTTP-svaret:
data– Svarstexten från servern. Om svaret från servern är en JSON kommer Axios automatiskt att analysera data till ett JavaScript-objekt.status– HTTP-statuskoden från svaret, t.ex200,400,404.statusText– HTTP-statusmeddelandet från serversvaret, t.exOK,Bad Request,Not Found.headers– HTTP-huvudena som medföljer svaret.config– Konfigurationen som tillhandahölls till Axios API för begäran.request– Den ursprungliga begäran som genererade svaret. I Node.js kommer detta att vara enClientRequestobjekt. I webbläsaren kommer detta att vara enXMLHTTPRequestobjekt.
Nu när vi har sett hur man gör en GET förfrågan med Axios, låt oss titta på hur man gör en POST begäran.
Skickar POST-förfrågningar
Vi skickar POST begär att skapa en ny resurs i ett REST API. I det här fallet kommer vi att göra en POST begära med Axios att göra ett nytt blogginlägg för en användare.
Skapa en ny fil som heter postRequest.js och ange följande kod:
const axios = require('axios').default; const newPost = { userId: 1, title: 'A new post', body: 'This is the body of the new post'
}; const sendPostRequest = async () => { try { const resp = await axios.post('https://jsonplaceholder.typicode.com/posts', newPost); console.log(resp.data); } catch (err) { // Handle Error Here console.error(err); }
}; sendPostRequest();
Att skicka en POST med axios.post() du måste först ange URL:en och sedan ange begäran om data i det andra argumentet. I det här fallet skickar vi data i newPost variabel, som kommer att skickas till vårt API som JSON.
Kör detta med node postRequest.js ger följande framgångsrika resultat:
{ userId: 1, title: 'A new post', body: 'This is the body of the new post', id: 101 }
Låt oss gå vidare för att se hur vi kan skicka PUT förfrågningar.
Skickar PUT-förfrågningar
PUT förfrågningar används för att ersätta data vid en slutpunkt. Du kan använda axios.put() sätt att skicka en PUT begäran på liknande sätt som vi skickar POST förfrågningar.
För att se det i aktion, låt oss skapa en PUT begäran som uppdaterar egenskaperna för det första blogginlägget. Skapa en ny fil som heter putRequest.js med koden nedan:
const axios = require('axios').default; const updatedPost = { id: 1, userId: 1, title: 'A new title', body: 'Update this post'
}; const sendPutRequest = async () => { try { const resp = await axios.put('https://jsonplaceholder.typicode.com/posts/1', updatedPost); console.log(resp.data); } catch (err) { // Handle Error Here console.error(err); }
}; sendPutRequest();
Som med POST, tillhandahåller vi webbadressen och den data vi vill ska laddas upp. Kör detta med node putRequest.js ger oss:
{ id: 1, userId: 1, title: 'A new title', body: 'Update this post' }
Nu när vi har täckt två sätt att ladda upp data, låt oss titta på hur vi kan ta bort data.
Skickar DELETE-förfrågningar
Du kan skicka en HTTP DELETE begära med hjälp av axios.delete() metod för att ta bort data från ett RESTful API.
Låt oss ta bort ett blogginlägg genom att skicka ett DELETE förfrågan med Axios. I en ny fil som heter deleteRequest.js, Skriv följande:
const axios = require('axios').default; const sendDeleteRequest = async () => { try { const resp = await axios.delete('https://jsonplaceholder.typicode.com/posts/1') console.log(resp.data); } catch (err) { // Handle Error Here console.error(err); }
}; sendDeleteRequest();
Smakämnen axios.delete() funktion behöver bara URL:en till resursen vi vill ta bort. Utför detta program med node putRequest.js visar detta i terminalen:
{}
Det betyder att ingen data returnerades, vilket är bra när en resurs tas bort. Men eftersom inget fel kastades av Axios, är vi ganska säkra på att det bearbetades korrekt.
Låt oss ta en titt på ett alternativt sätt att skicka Axios-förfrågningar med hjälp av konfigurationer,
Konfigurera förfrågningar
Som ett alternativ till att specificera funktionen för att göra begäran kan vi tillhandahålla ett JavaScript-objekt som konfigurerar hur Axios skickar en begäran. Om jag till exempel vill skicka en PUT begära utan att använda axios.put(), kan vi konfigurera Axios som:
const axios = require('axios').default; const sendRequest = async () => { try { const resp = await axios({ method: 'PUT', url: 'https://jsonplaceholder.typicode.com/posts/1', data: { id: 1, userId: 1, title: 'A new title', body: 'Update this post' } }); console.log(resp.data); } catch (err) { // Handle Error Here console.error(err); }
} sendRequest();
I det här fallet använder vi axios som en funktion direkt. Vi skickar det en JavaScript-funktion som innehåller HTTP-metoden som används i method, API-slutpunkten i url och eventuella uppgifter i begäran i data fast egendom.
Slutresultatet är detsamma, så du kan använda det här sättet att göra förfrågningar om det tilltalar dig mer.
Nu när vi har koll på att skicka förfrågningar, låt oss ändra dem genom att ställa in anpassade rubriker.
För vissa API:er måste en råförfrågan ha ytterligare data i rubriker för att kunna bearbetas. Ett vanligt exempel skulle vara att ställa in rubriker som autentiserar HTTP-förfrågan.
Om vi använde JWT för autentisering och auktorisering, måste vi lägga till det i våra förfrågningar så att det inte avvisas av API-servern.
Låt oss se hur vi kan lägga till anpassade rubriker till en axios.get() metodanrop:
const axios = require('axios').default; const sendGetRequest = async () => { try { const resp = await axios.get('https://jsonplaceholder.typicode.com/posts', { headers: { 'authorization': 'Bearer YOUR_JWT_TOKEN_HERE' } }); console.log(resp.data); } catch (err) { // Handle Error Here console.error(err); }
}; sendGetRequest();
Som du kan se i detta kodexempel kan vi skicka konfigurationen med headers egenskap för att ställa in anpassade rubriker för begäran. De headers egenskap är ett JavaScript-objekt med strängnycklar och värden.
Du kan lägga till den här egenskapen till de andra Axios-metoderna som t.ex axios.post(), axios.put(), axios.delete(). De headers egendom ska föras in efter d data objekt i axios.post() och axios.put().
Låt oss sedan se hur vi kan ställa in en anpassad rubrik med hjälp av Axios API-konfiguration:
const axios = require('axios').default; axios({ method: 'GET', url: 'https://jsonplaceholder.typicode.com/posts', headers: { 'authorization': 'Bearer YOUR_JWT_TOKEN_HERE' }
}).then(resp => { console.log(resp.data);
}).catch(err => { // Handle Error Here console.error(err);
});
I det här fallet är rubrikerna bara en annan egenskap hos JavaScript-objektet!
Slutsats
I den här artikeln lärde du dig hur du skapar asynkrona HTTP-förfrågningar med Axios i Node.js och webbläsarens JavaScript. Du gjorde förfrågningar med Axios metoder – axios.get(), axios.post(), axios.put() och axios.delete(). Du använde också Axios API för att skicka HTTP-förfrågningar genom att konfigurera ett JavaScript-objekt med förfrågningsdetaljerna. Slutligen har du lagt till anpassade rubriker i dina förfrågningar.
Vi hoppas att du nu har en god förståelse för hur du använder Axios för din nästa app! Vad är nästa sak du ska bygga?
Källkoden för den här artikeln finns tillgänglig på GitHub.
Källa: https://stackabuse.com/making-asynchronous-http-requests-in-javascript-with-axios/
