§Axios Wrapper

Diese Bibliothek bietet einen praktischen Wrapper für Axios und fügt automatische Abbruchfunktionen für gleichzeitige Anfragen hinzu.

§Installation

npm install --save-dev @gravity-ui/axios-wrapper

§HTTP API

§Konstruktorparameter

§config [optional]

Die Konfiguration einer axios-Instanz.

§collector [optional]

Die Konfiguration des Anfragensammlers ist ein Objekt:

{
    "collectErrors": 10,
    "collectRequests": 10
}

§Grundlegende Methoden

Der Wrapper stellt die HTTP-Methoden get, head, put, post, delete bereit.

Die Methoden get und head haben die Signatur (url, params, options); die Methoden put, post und delete haben die Signatur (url, data, params, options).

Das Argument params steht für Query-String-Parameter, während options eine Anfrageseinstellung ist.

Derzeit werden 4 Anfrageseinstellungen unterstützt:

• concurrentId (string): optionale Anfrage-ID
• collectRequest (bool): optionales Flag, das angibt, ob die Anfrage protokolliert werden soll (Standard true)
• requestConfig (object): optionale Konfiguration mit benutzerdefinierten Anfrageparametern
• headers (object): optionales Objekt mit benutzerdefinierten Anfrageheadern.
• timeout (number): optionales Anfrage-Timeout
• onDownloadProgress (function): optionale Callback-Funktion zur Verarbeitung des Fortschritts beim Herunterladen von Dateien

§Header

Die Methode setDefaultHeader({name (string), value (string), methods (array)}) ermöglicht das Hinzufügen eines Standard-Anfrageheaders.

Die Argumente name und value sind erforderlich. Das optionale Argument methods gibt alle Methoden an, die diese Standardheader erhalten (standardmäßig erhalten alle Methoden diese Header).

§CSRF

Die Methode setCSRFToken ermöglicht die Angabe eines CSRF-Tokens, das zu allen put, post und delete-Anfragen hinzugefügt wird.

§Gleichzeitige Anfragen

Manchmal ist es besser, eine laufende Anfrage abzubrechen, wenn ihre Ergebnisse nicht mehr benötigt werden. Um dies zu erreichen, sollte der options der Anfrage die concurrentId übergeben werden. Wenn eine weitere Anfrage mit derselben concurrentId erfolgt, wird die vorherige Anfrage mit dieser ID abgebrochen.

Eine Anfrage kann auch manuell abgebrochen werden, indem die Methode cancelRequest(concurrentId) aufgerufen wird.

§Sammeln von Anfragen

Es ist möglich, das Sammeln von Anfragen im lokalen Speicher mithilfe der collector-Option einzurichten. Es speichert alle Anfragen und Fehler separat. Die folgende apiInstance behält die 10 letzten Anfragen (sowohl erfolgreiche als auch nicht erfolgreiche) und die 10 letzten fehlerhaften Anfragen.

const apiInstance = new API({
    collector: {
        collectErrors: 10,
        collectRequests: 10
    }
});

Um gespeicherte Anfragen abzurufen, muss die Methode getCollectedRequests aufgerufen werden, die das Objekt {errors: [...], requests: [...]} zurückgibt.

§Verwendung

Die empfohlene Verwendung ist die Ableitung der Basisklasse AxiosWrapper:

export class API extends AxiosWrapper {
    getProjects() {
        return this.get('/projects');
    }
    getSensors({project, selectors}) {
        return this.get(`/projects/${project}/sensors`, {selectors, pageSize: 200});
    }
    getNames({project, selectors}) {
        return this.get(`/projects/${project}/sensors/names`, {selectors});
    }
    getLabels({project, names, selectors}) {
        return this.get(`/projects/${project}/sensors/labels`, {names, selectors});
    }
}

Wenn der Parameter baseURL in der axios-Konfiguration übergeben wird, werden alle angeforderten Pfadnamen daran angehängt.

const apiInstance = new API({
    config: {
        baseURL: '/api/v2'
    }
});