En komplett guide till att arbeta med Axios

Axios är ett JavaScript-bibliotek som tillhandahåller ett enkelt API för att skicka HTTP-förfrågningar från JavaScript-kod på klientsidan eller Node.js-kod på serversidan. Axios är byggt på JavaScripts Promise API, vilket gör asynkron kod mer underhållbar.

Komma igång med Axios

Du kan använda Axios i din app med ett Content Delivery Network (CDN) eller installera det i ditt projekt.

För att använda Axios direkt i HTML, kopiera CDN-länken nedan och infoga den i huvuddelen av din HTML-fil:

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

Med detta tillvägagångssätt kan du använda Axios och dess HTTP-metoder i brödtexten i dina HTML-skript. Axios kan också konsumera REST API: er i ett ramverk som React.

För att använda Axios i ett Node.js-projekt, installera det i din projektkatalog med antingen npm eller garnpakethanteraren:

npm installera axios
# eller
garn lägg till axios

Efter installationen kan du börja använda Axios i ditt JavaScript-projekt:

konst axios = behöva("axios");

Längs den här guiden kommer du att arbeta med gratis JSONPlatshållare API. Även om detta API har en uppsättning resurser kommer du bara att använda /comments och /posts slutpunkter. Slutpunkter är specifika webbadresser som kan nås för att hämta eller manipulera data.

Gör GET-förfrågningar med Axios

Det finns flera sätt att göra en GET-förfrågan med Axios. Syntaxen beror dock generellt på preferenser.

Ett av sätten att göra en GET-förfrågan är att använda axios() metod med ett objekt som anger begäranmetoden som skaffa sig och webbadressen att skicka förfrågan till.

Till exempel:

konst axios = behöva("axios");
axios({
 metod: "skaffa sig",
 url: " https://jsonplaceholder.typicode.com/comments",
})
 .sedan((res) => {
trösta.log (res.data);
 })
 .fånga((fela) => {
trösta.error (fel);
 });

Detta exempel skapar ett löfte med den asynkrona programmeringsmodellen genom att kedja .sedan() och .fånga() metoder. Löftet loggar svaret till konsolen när begäran är framgångsrik och loggar felmeddelandet om begäran misslyckas.

Axios ger också ett enklare sätt att göra GET-förfrågningar som eliminerar behovet av att passera ett objekt genom att kedja .skaffa sig() metod för att axios exempel.

Till exempel:

axios
 .skaffa sig(" https://jsonplaceholder.typicode.com/comments")
 .sedan((res) => {
trösta.log (res.data);
 })
 .fånga((fela) => {
trösta.error (fel);
 });

Göra POST-förfrågningar med Axios

Att göra en POST-förfrågan med Axios liknar att göra en GET-förfrågan. Du kan skicka data till en server med denna begäran.

Kodavsnittet nedan är ett exempel på hur man använder Axios' .posta() metod:

axios
 .posta(" https://jsonplaceholder.typicode.com/comments", {
 namn: "Jackson Smith",
 e-post: "[email protected]",
 kropp: "Det här är ett konstverk.",
 })
 .sedan((res) => {
trösta.log (res.data);
 })
 .fånga((fela) => {
trösta.error (fel);
 });

Koden gör en POST-begäran till JSONPlaceholder API för att skapa en ny kommentar. De axios.post metod skickar data till /comments slutpunkt.

Uppgifterna som skickas i begäran är ett objekt med en namn, e-post, och kropp fast egendom. Om begäran godkänns, sedan metod loggar svarsdata till konsolen. Och om det finns ett fel fånga metod loggar felet till konsolen.

Göra PUT/PATCH-förfrågningar med Axios

Du kan använda PUT- eller PATCH-begäran för att uppdatera en befintlig resurs på servern. Medan PUT ersätter hela resursen, uppdaterar PATCH endast de angivna fälten.

För att göra en PUT- eller PATCH-förfrågan med Axios måste du använda .sätta() eller .lappa() metoder respektive.

Här är ett exempel på hur man använder dessa metoder för att uppdatera e-post egenskapen för kommentaren med ett id på 100:

konst axios = behöva("axios");
axios
 .skaffa sig(" https://jsonplaceholder.typicode.com/comments/100")
 .sedan((res) => {
trösta.log (res.data.email);
 })
 .fånga((fela) => {
trösta.error (fel);
 });
// Utdata:
// '[email protected]'
axios
 .lappa(" https://jsonplaceholder.typicode.com/comments/100", {
 e-post: "[email protected]",
 })
 .sedan((res) => {
trösta.log (res.data.email);
 })
 .fånga((fela) => {
trösta.error (fel);
 });
// Utdata:
// '[email protected]',

Detta program gör först en GET-begäran till slutpunkten " https://jsonplaceholder.typicode.com/comments/100". Den loggar sedan e-post egenskapen för kommentaren med ett ID på 100 till konsolen. Vi gör en GET-förfrågan så att du kan se vad som ändrades efter att ha gjort PATCH-förfrågan.

Den andra begäran är en PATCH-begäran till samma slutpunkt. Den här koden uppdaterar e-postadressen för kommentaren till [email protected].

Gör DELETE-förfrågningar med Axios

Du kan använda RADERA begäran om att ta bort en resurs på servern.

Ta följande exempel på hur man använder .radera() metod för att ta bort en resurs från servern:

axios
 .radera(" https://jsonplaceholder.typicode.com/comments/10")
 .sedan((res) => {
trösta.log (res.data);
 })
 .fånga((fela) => {
trösta.error (fel);
 });
//Output:
// {}

Genom att logga ett tomt objekt till konsolen visar koden ovan att den raderade kommentaren med ID 10.

Göra samtidiga förfrågningar med Axios

Du kan hämta data från flera slutpunkter samtidigt med Axios. För att göra detta måste du använda .Allt() metod. Den här metoden accepterar en rad förfrågningar som parameter och löser sig först när du får alla svar.

I följande exempel är .Allt() metoden hämtar data från två slutpunkter samtidigt:

axios
 .Allt([
 axios.get(" https://jsonplaceholder.typicode.com/comments? _limit=2"),
 axios.get(" https://jsonplaceholder.typicode.com/posts? _limit=2"),
 ])
 .sedan(
 axios.spread((kommentarer, inlägg) => {
trösta.log (kommentarer.data);
trösta.log (posts.data);
 })
 )
 .fånga((fela) =>trösta.error (fel));

Ovanstående kodblock skickar förfrågningar samtidigt och skickar sedan svaren till .sedan() metod. Axios .sprida() metoden separerar svaren och tilldelar varje svar till dess variabel.

Slutligen loggar konsolen data egenskapen för de två svaren: kommentarer och inlägg.

Avlyssning av förfrågningar med Axios

Ibland kan du behöva avlyssna en begäran innan den når servern. Du kan använda Axios' interceptors.request.use() metod för att avlyssna förfrågningar.

I följande exempel loggar metoden typen av begäran till konsolen för varje begäran som görs:

axios.interceptors.request.use(
 (config) => {
trösta.logga(`${config.method} framställd begäran".);
lämna tillbaka config;
 },
 (fel) => {
lämna tillbakaLöfte.avvisa (fel);
 }
);
axios
 .skaffa sig(" https://jsonplaceholder.typicode.com/comments? _limit=2")
 .sedan((res) =>trösta.log (res.data))
 .fånga((fela) =>trösta.error (fel));

Programmet definierar en Axios interceptor med hjälp av axios.interceptors.request.användning metod. Denna metod tar config och fel objekt som argument. De config objektet innehåller information om begäran, inklusive förfrågningsmetoden (config.method) och webbadressen för begäran (config.url).

Interceptor-funktionen returnerar config objekt, vilket gör att begäran kan fortsätta normalt. Om det finns ett fel returnerar funktionen det avvisade Löfte objekt.

Slutligen gör programmet en begäran om att testa interceptorn. Konsolen kommer att logga typen av begäran som gjorts, i detta fall en GET-förfrågan.

Det finns mer i Axios

Du lärde dig hur du gör och avlyssnar förfrågningar i dina projekt med hjälp av Axios. Många andra funktioner, som att transformera förfrågningar och använda Axios-instanser är tillgängliga för dig som JavaScript-utvecklare att utforska. Axios är fortfarande ett föredraget alternativ för att göra HTTP-förfrågningar i dina JavaScript-applikationer. Men Fetch API är ett annat bra alternativ som du kan utforska.