Aller au contenu principal

11-5 Configuration globale axios

Nous venons de mettre en place un appel d'API simple et déjà on peut voir que cela nécessitera de répéter à chaque fois beaucoup d'information.

En effet, tout comme nos requêtes Postman, il serait préférable de pouvoir réutiliser à chaque requête les informations suivantes:

  • L'URL de base
  • L'en-tête d'autorisation

Autrement, cela deviendra fastidieux d'apporter des changements, et même sans apporter de changements, ce n'est pas très élégant de devoir répéter toute cette information à chaque fois.

Créer un fichier de configuration pour axios​

Créez un fichier de configuration pour axios qui pourra être réutilisé dans l'application. On mettra ce fichier dans un dossier core/http afin de l'isoler et préciser son rôle.

  1. Créer un dossier http sous src/app/core

  2. Sous ce dossier src/app/core/http, créez un fichier TypeScript et nommez-le api.ts

    img

Configuration de base​

Au fond, on veut en quelque sorte créer un objet représentant notre API et qui sera déjà initialisé à tout de moins avec l'URL de base.

Donc, plutôt que de faire des appels via axios.get et spécifier l'URL complète, il serait bien de pouvoir faire api.get, par exemple, et de ne seulement spécifier la portion changeante de l'URL, comme /projetspar exemple.

Dans votre fichier api.ts, ajoutez le bloc suivant:

src/app/core/http/api.ts
import axios from 'axios';

export const api = axios.create({
  baseURL: 'https://VOTRE_ID_DE_PROJET_SUPABASE.supabase.co/rest/v1',
});
info
  • export const api: la variable (objet) api pourra être utilisée à l'extérieur du fichier, et donc importée ailleurs.
  • axios.create: crée une instance de axios, mais initialisé avec les paramètres de configuration par défaut. Il est possible, entre autres, de spécifié une URL de base qui sera utilisée pour toutes les requêtes (baseUrl).
attention

Assurez-vous de remplacer VOTRE_ID_DE_PROJET_SUPABASE par votre identifiant de projet!

Vous devrez aussi importer axios. Nous avons vu dans les étapes précédentes comment WebStorm peut vous aider pour l'importation de dépendances.

Ajout de la clé d'API​

La procédure est quelque peu différente pour la clé d'API. En effet, il faut plutôt se baser sur le concept de interceptors d'axios.

Au fond, on configure une tâche à exécuter à chaque requête. La requête est ainsi interceptée et nos attributs supplémentaires ajoutés à cette dernière.

On peut ajouter des attributs à l'en-tête, dont notre attribut apiKey dans l'en-tête:

src/app/core/http/api.ts
import axios from 'axios';

export const api = axios.create({
  baseURL: 'https://VOTRE_ID_DE_PROJET_SUPABASE.supabase.co/rest/v1',
});

api.interceptors.request.use((config: any) => {
  config.headers['apiKey'] = 'VOTRE_CLE_API_ICI';

  return config;
});
attention

Remplacez VOTRE_CLE_API_ICI par votre propre clé!

Utilisation de votre version d'axios​

On peut maintenant remplacer l'appel d'API faisant appel directement à axios par un appel utilisant votre version personnalisée.

  1. Premièrement, dans projets-index.ts on change la variable url pour que cette dernière utilise plutôt une URL relative. En effet, nous avons configuré l'URL de base dans api.ts.

    src/app/features/projets/pages/projets-index.ts
    protected async obtenirProjets(){
        let url = "/projets";

        await axios.get(url, {
        headers: {
            'apiKey': '...'
        }
        });
    }

  2. Ensuite, pour faire l'appel, on utilise simplement notre constante api qui constitue la version personnalisée de axios contenant l'URL de base de l'API, ainsi que l'ajout automatique de la clé d'API.

    src/app/features/projets/pages/projets-index.ts
    protected async obtenirProjets(){
        let url = "/projets";

        await api.get(url);
    }

    Beaucoup plus élégant!

    attention

    Vous aurez à importer api du fichier core/http/api. La procédure est la même que précédemment, WebStorm vous aide à le faire automatiquement.

  3. Vérifiez dans le navigateur en rechargeant la page. Via l'onglet Réseau, vous devriez voir la même requête que précédemment à l'API de Supabase. img

Level Up