Wie man mehrere Anfragen mit Axios stellt

Na, da! Wenn Sie ein Entwickler sind, hatten Sie wahrscheinlich schon diese Momente, in denen Sie in Ihren Projekten mehrere API-Aufrufe tätigen müssen. Es ist nicht der glamouröseste Teil des Codierens, aber es ist unerlässlich. Heute tauchen wir tief in Axios-Mehrfachanfragen ein, eine leistungsstarke Möglichkeit, diese Aufgabe effizient zu bewältigen.

Aber warten Sie, bevor wir anfangen, hier ein schneller Tipp: Wenn Sie nach einem leistungsstarken API-Tool suchen, um Ihren Entwicklungsprozess zu optimieren, schauen Sie sich Apidog an. Es ist kostenlos und vollgepackt mit Funktionen, die Ihnen das Leben erheblich erleichtern werden.

Lassen Sie uns jetzt die Ärmel hochkrempeln und uns mit den Einzelheiten der Durchführung mehrerer Anfragen mit Axios befassen!

Was ist Axios?

Zuerst einmal wollen wir darüber sprechen, was Axios ist. Axios ist ein beliebter, auf Promises basierender HTTP-Client für JavaScript. Er wird verwendet, um HTTP-Anfragen vom Browser und Node.js aus zu stellen, und er wird besonders für seine Benutzerfreundlichkeit und Flexibilität geschätzt. Mit Axios können Sie problemlos asynchrone HTTP-Anfragen an REST-Endpunkte senden und CRUD-Operationen durchführen.

Warum Axios für mehrere Anfragen verwenden?

Beim Erstellen moderner Webanwendungen gibt es oft Szenarien, in denen Sie Daten aus mehreren Quellen abrufen müssen. Dies kann dazu dienen, ein Dashboard mit verschiedenen Datensätzen zu füllen, eine Reihe abhängiger Operationen durchzuführen oder einfach alle notwendigen Informationen zu sammeln, um eine einzelne Seite anzuzeigen.

Die Handhabung mehrerer API-Anfragen kann knifflig sein. Sie müssen mehrere asynchrone Operationen verwalten, Fehler auf elegante Weise behandeln und sicherstellen, dass Ihre Anwendung nicht überlastet wird. Hier glänzt Axios. Es bietet eine elegante und unkomplizierte Möglichkeit, mehrere Anfragen mit Funktionen wie den folgenden zu verwalten:

• Promise-basierte API: Macht die Handhabung asynchroner Anfragen zum Kinderspiel.
• Integrierte Unterstützung für gleichzeitige Anfragen: Verwendung von axios.all und axios.spread.
• Interceptors: Zur Handhabung von Anfrage- und Antworttransformationen.
• Fehlerbehandlung: Vereinfacht die Verwaltung verschiedener Arten von Fehlern.

Erste Schritte mit Axios

Bevor wir uns mit mehreren Anfragen befassen, wollen wir sicherstellen, dass wir uns mit den Grundlagen von Axios einig sind.

Axios installieren

Zuerst müssen Sie Axios installieren. Wenn Sie npm verwenden, können Sie dies mit Folgendem tun:

npm install axios

Oder, wenn Sie yarn bevorzugen:

yarn add axios

Einfache Axios-Anfrage

Hier ist ein kurzes Beispiel für eine einfache GET-Anfrage mit Axios:

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

Dieses einfache Snippet ruft Daten von der angegebenen URL ab und protokolliert sie in der Konsole. Wenn ein Fehler auftritt, protokolliert es die Fehlermeldung.

Mehrere Anfragen mit Axios stellen

Kommen wir nun zum Hauptthema: dem Stellen mehrerer Anfragen mit Axios. Es gibt verschiedene Möglichkeiten, dies zu handhaben, je nach Ihren Anforderungen.

Verwendung von axios.all und axios.spread

Die gebräuchlichste Methode zur Handhabung mehrerer Anfragen ist die Verwendung von axios.all und axios.spread. Diese Funktionen helfen Ihnen, gleichzeitige Anfragen zu verwalten und deren Antworten auf saubere und organisierte Weise zu verarbeiten.

Hier ist ein Beispiel:

import axios from 'axios';

function getData() {
  const requestOne = axios.get('https://api.example.com/data1');
  const requestTwo = axios.get('https://api.example.com/data2');

  axios.all([requestOne, requestTwo])
    .then(axios.spread((responseOne, responseTwo) => {
      console.log('Data from first request:', responseOne.data);
      console.log('Data from second request:', responseTwo.data);
    }))
    .catch(errors => {
      console.error('Error fetching data:', errors);
    });
}

getData();

In diesem Beispiel nimmt axios.all ein Array von Promises (unsere HTTP-Anfragen) entgegen und wartet, bis sich alle aufgelöst haben. Die Funktion axios.spread nimmt dann die Antworten entgegen und verteilt sie in einzelne Argumente, wodurch es einfach wird, mit jeder Antwort zu arbeiten.

Dynamische Anfragen verarbeiten

Manchmal wissen Sie nicht im Voraus, wie viele Anfragen Sie stellen müssen. In solchen Fällen können Sie das Array von Promises dynamisch erstellen.

import axios from 'axios';

function fetchData(endpoints) {
  const requests = endpoints.map(endpoint => axios.get(endpoint));

  axios.all(requests)
    .then(axios.spread((...responses) => {
      responses.forEach((response, index) => {
        console.log(`Data from request ${index + 1}:`, response.data);
      });
    }))
    .catch(errors => {
      console.error('Error fetching data:', errors);
    });
}

const apiEndpoints = [
  'https://api.example.com/data1',
  'https://api.example.com/data2',
  'https://api.example.com/data3'
];

fetchData(apiEndpoints);

In diesem Szenario bilden wir das Array der Endpunkte ab, um ein Array von Promises zu erstellen. Dies ist eine leistungsstarke Möglichkeit, dynamische Listen von API-Aufrufen zu verarbeiten.

Sequenzielle Anfragen mit Axios

Es gibt Zeiten, in denen Sie sicherstellen müssen, dass eine Anfrage abgeschlossen ist, bevor Sie mit der nächsten beginnen. Zum Beispiel, wenn die zweite Anfrage vom Ergebnis der ersten abhängt. In solchen Fällen können Sie Ihre Anfragen mithilfe von Promises verketten.

import axios from 'axios';

function fetchSequentialData() {
  axios.get('https://api.example.com/data1')
    .then(response1 => {
      console.log('First request data:', response1.data);
      return axios.get('https://api.example.com/data2');
    })
    .then(response2 => {
      console.log('Second request data:', response2.data);
    })
    .catch(error => {
      console.error('Error fetching data:', error);
    });
}

fetchSequentialData();

Dieser Ansatz stellt sicher, dass die zweite Anfrage erst gestartet wird, nachdem die erste erfolgreich abgeschlossen wurde.

Fehlerbehandlung bei mehreren Anfragen

Die effektive Behandlung von Fehlern ist entscheidend, wenn es um mehrere Anfragen geht. Axios bietet verschiedene Möglichkeiten, Fehler zu verwalten, um sicherzustellen, dass Ihre Anwendung Probleme auf elegante Weise bewältigen kann.

Fehler für einzelne Anfragen abfangen

Sie können Fehler für jede Anfrage einzeln behandeln, indem Sie jedem Promise einen .catch-Block hinzufügen:

import axios from 'axios';

const requestOne = axios.get('https://api.example.com/data1')
  .catch(error => console.error('Error in request one:', error));

const requestTwo = axios.get('https://api.example.com/data2')
  .catch(error => console.error('Error in request two:', error));

axios.all([requestOne, requestTwo])
  .then(axios.spread((responseOne, responseTwo) => {
    if (responseOne) console.log('Data from first request:', responseOne.data);
    if (responseTwo) console.log('Data from second request:', responseTwo.data);
  }));

Alle Fehler zusammen abfangen

Alternativ können Sie alle Fehler am Ende zusammen abfangen:

import axios from 'axios';

const requestOne = axios.get('https://api.example.com/data1');
const requestTwo = axios.get('https://api.example.com/data2');

axios.all([requestOne, requestTwo])
  .then(axios.spread((responseOne, responseTwo) => {
    console.log('Data from first request:', responseOne.data);
    console.log('Data from second request:', responseTwo.data);
  }))
  .catch(error => {
    console.error('Error fetching data:', error);
  });

Dieser Ansatz ist einfacher, aber weniger granular, da er nicht unterscheidet, welche Anfrage fehlgeschlagen ist.

Axios-Anfragen optimieren

Um das Beste aus Axios herauszuholen, hier einige Tipps und Best Practices.

Interceptors verwenden

Mit Interceptors können Sie Ihren Code ausführen oder Anfragen/Antworten ändern, bevor sie von then oder catch verarbeitet werden. Sie eignen sich hervorragend zum Hinzufügen von Headern, Protokollierung, Fehlerbehandlung usw.

import axios from 'axios';

// Add a request interceptor
axios.interceptors.request.use(request => {
  console.log('Starting Request', request);
  return request;
}, error => {
  return Promise.reject(error);
});

// Add a response interceptor
axios.interceptors.response.use(response => {
  console.log('Response:', response);
  return response;
}, error => {
  return Promise.reject(error);
});

Globale Standardwerte festlegen

Sie können Standardkonfigurationsoptionen für Axios festlegen. Dies kann nützlich sein, um Basis-URLs, Header, Timeouts usw. festzulegen.

import axios from 'axios';

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = 'Bearer token';
axios.defaults.timeout = 10000;

Anfragen abbrechen

Manchmal müssen Sie möglicherweise eine Anfrage abbrechen. Axios bietet eine Möglichkeit, Anfragen mithilfe von CancelToken abzubrechen.

import axios from 'axios';

const CancelToken = axios.CancelToken;
let cancel;

axios.get('https://api.example.com/data', {
  cancelToken: new CancelToken(function executor(c) {
    cancel = c;
  })
})
  .then(response => {
    console.log(response.data);
  })
  .catch(thrown => {
    if (axios.isCancel(thrown)) {
      console.log('Request canceled', thrown.message);
    } else {
      console.error('Error fetching data:', thrown);
    }
  });

// To cancel the request
cancel('Operation canceled by the user.');

Beispiel aus der Praxis: Abrufen von Daten von mehreren APIs

Lassen Sie uns alles mit einem Beispiel aus der Praxis zusammenfügen. Angenommen, Sie erstellen ein Dashboard, das Benutzerdaten, Beiträge und Kommentare von verschiedenen Endpunkten abrufen muss.

import axios from 'axios';

async function fetchDashboardData() {
  try {
    const [userData, postsData, commentsData] = await axios.all([
      axios.get('https://api.example.com/users'),
      axios.get('https://api.example.com/posts'),
      axios.get('https://api.example.com/comments')
    ]);

    console.log

('User Data:', userData.data);
    console.log('Posts Data:', postsData.data);
    console.log('Comments Data:', commentsData.data);
  } catch (errors) {
    console.error('Error fetching dashboard data:', errors);
  }
}

fetchDashboardData();

In diesem Beispiel verwenden wir axios.all, um Daten gleichzeitig von drei verschiedenen Endpunkten abzurufen. Anschließend verarbeiten wir die Antworten zusammen und protokollieren die Daten in der Konsole.

Apidog: ein kostenloses Tool zur Generierung Ihres Axios-Codes

Apidog ist eine All-in-One-Plattform für die kollaborative API-Entwicklung, die ein umfassendes Toolkit zum Entwerfen, Debuggen, Testen, Veröffentlichen und Mocken von APIs bietet. Apidog ermöglicht es Ihnen, automatisch Axios-Code zum Erstellen von HTTP-Anfragen zu erstellen.

Hier ist der Prozess zur Verwendung von Apidog zum Generieren von Axios-Code:

Schritt 1: Öffnen Sie Apidog und wählen Sie eine neue Anfrage aus

Schritt 2: Geben Sie die URL des API-Endpunkts ein, an den Sie eine Anfrage senden möchten,geben Sie alle Header oder Abfragezeichenfolgenparameter ein, die Sie in die Anfrage aufnehmen möchten, und klicken Sie dann auf "Design", um zur Designoberfläche von Apidog zu wechseln.

Schritt 3: Wählen Sie "Client-Code generieren", um Ihren Code zu generieren.

Schritt 4: Kopieren Sie den generierten Axios-Code und fügen Sie ihn in Ihr Projekt ein.

Apidog zum Senden von HTTP-Anfragen verwenden

Apidog bietet mehrere erweiterte Funktionen, die seine Fähigkeit zum Testen von HTTP-Anfragen weiter verbessern. Mit diesen Funktionen können Sie Ihre Anfragen anpassen und komplexere Szenarien mühelos bewältigen.

Schritt 1: Öffnen Sie Apidog und erstellen Sie eine neue Anfrage.

Schritt 2: Suchen Sie die API-Details für die POST-Anfrage, die Sie erstellen möchten, oder geben Sie sie manuell ein.

Schritt 3: Füllen Sie die erforderlichen Parameter und alle Daten aus, die Sie in den Anfragetext aufnehmen möchten.

Fazit

Die effiziente Handhabung mehrerer API-Anfragen ist entscheidend für die Erstellung robuster und leistungsstarker Webanwendungen. Axios macht diese Aufgabe mit seinen leistungsstarken Funktionen und seiner Flexibilität unkompliziert und überschaubar. Durch die Nutzung von axios.all, axios.spread, Interceptors und anderen erweiterten Funktionen können Sie nahtlose und effiziente Datenabruf-Workflows in Ihren Anwendungen erstellen.

Vergessen Sie nicht, wenn Sie Ihre API-Entwicklung beschleunigen möchten, Apidog kostenlos herunterzuladen und die umfangreichen Funktionen zu erkunden. Es ist ein Game-Changer für jeden Entwickler, der mit APIs arbeitet.