Axios wrapper
<!-- Language options -->
<a href="/en/README.md">English</a>
<a href="/fr/README.md">Français</a>
Axios Wrapper
Cette bibliothèque fournit un wrapper pratique autour d'Axios, ajoutant notamment l'annulation automatique des requêtes concurrentes.
Installation
npm install --save-dev @gravity-ui/axios-wrapper
API HTTP
Paramètres du constructeur
config [optionnel]
La configuration d'une instance axios
.
collector [optionnel]
La configuration du collecteur de requêtes est un objet :
{
"collectErrors": 10,
"collectRequests": 10
}
Méthodes de base
Le wrapper fournit les méthodes HTTP get
, head
, put
, post
, delete
.
Les méthodes get
et head
ont la signature (url, params, options)
; les méthodes put
, post
, ainsi que delete
ont la signature (url, data, params, options)
.
L'argument params
représente les paramètres de la chaîne de requête, tandis que options
sont les paramètres de la requête.
Actuellement, 4 paramètres de requête sont pris en charge :
concurrentId (string)
: identifiant de requête optionnelcollectRequest (bool)
: indicateur optionnel indiquant si la requête doit être enregistrée (par défauttrue
)requestConfig (object)
: configuration optionnelle avec des paramètres de requête personnalisésheaders (object)
: objet optionnel avec des en-têtes de requête personnalisés.timeout (number)
: délai d'attente de requête optionnelonDownloadProgress (function)
: fonction de rappel optionnelle pour le traitement de la progression du téléchargement de fichiers
En-têtes
La méthode setDefaultHeader({name (string), value (string), methods (array)})
permet d'ajouter un en-tête de requête par défaut.
Les arguments name
et value
sont requis, l'argument optionnel methods
spécifie toutes les méthodes qui recevront ces en-têtes par défaut (par défaut, toutes les méthodes recevront ces en-têtes).
CSRF
La méthode setCSRFToken
permet de spécifier un jeton CSRF, qui sera ajouté à toutes les requêtes put
, post
et delete
.
Requêtes concurrentes
Il est parfois préférable d'annuler une requête en cours si ses résultats ne sont plus nécessaires. Pour ce faire, il faut passer un identifiant concurrentId
dans les options
de la requête. Lorsqu'une nouvelle requête avec le même concurrentId
est effectuée, la requête précédente avec cet identifiant sera annulée.
Il est également possible d'annuler une requête manuellement en appelant la méthode cancelRequest(concurrentId)
.
Collecte des requêtes
Il est possible de configurer la collecte des requêtes dans le stockage local en utilisant l'option collector
. Elle stocke toutes les requêtes et les erreurs séparément. L'instance apiInstance
suivante conservera les 10 dernières requêtes (réussies ou non) et les 10 dernières requêtes erronées.
const apiInstance = new API({
collector: {
collectErrors: 10,
collectRequests: 10
}
});
Pour obtenir les requêtes enregistrées, il faut appeler la méthode getCollectedRequests
qui renvoie l'objet {errors: [...], requests: [...]}
.
Utilisation
L'utilisation suggérée est de sous-classer la classe de base 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});
}
}
Lorsque le paramètre baseURL
est passé dans la configuration d'axios
, tous les chemins demandés lui seront ajoutés.
const apiInstance = new API({
config: {
baseURL: '/api/v2'
}
});