Aller au contenu principal

11-4 Requête d'API

Il est maintenant temps de faire la requête!

Nous ne ferons pas cette requête directement dans la fonction ngOnInit, mais plutôt dans une fonction dédiée qui sera appelée par ngOnInit.

attention

Nous modifierons cette façon de faire bientôt afin d'utiliser des services pour les appels d'API, mais commençons par nous familiariser avec une requête simple directement dans le composant.

Ajouter une fonction obtenirProjets()​

Cette fonction sera responsable de faire un appel d'API Supabase.

src/app/features/projets/pages/projets-index.ts
export class ProjetsIndex implements OnInit{
  projets: string[] = [
    "Discreddit",
    "Organisation du Lan Party",
    "Organisation de la soirée jeu vidéo",
  ]

  ngOnInit(): void {
    console.log('Je suis initialisé!');
  }

  protected obtenirProjets(){
    
  }
}

Préparer la requête​

  1. Premièrement, créons une variable url qui contiendra l'URL à contacter pour l'appel d'API.

    export class ProjetsIndex implements OnInit{
      projets: string[] = [
        "Discreddit",
        "Organisation du Lan Party",
        "Organisation de la soirée jeu vidéo",
      ]

      ngOnInit(): void {
        console.log('Je suis initialisé!');
      }

      protected obtenirProjets(){
        const url = "https://zjywabthssmxcftqcyyo.supabase.co/rest/v1/projets"
      }
    }
    attention

    Vous devrez remplacer zjywabthssmxcftqcyyo par votre propre identifiant Supabase!

  2. Commencez à taper axios dans la fonction. Le terme apparaitra en rouge et via Alt+Enter vous pourrez ajouter la référence manquante. Vous pourriez aussi sélectionner Show Context Actions à l'aide d'un clic droit. img

  3. Choisissez Insert 'import axios from "axios"' ou import axios = required(axios).

    Cela ajoutera l'import de axios dans le haut du fichier.

    import {Component, OnInit} from '@angular/core';
    import axios from "axios";
    attention

    Si jamais l'import suggéré a importé en utilisant require:

    import axios = require('axios');

    Remplacez simplement par:

    import axios from 'axios';

  4. Utiliser axios.get pour initier une requête GET

    src/app/features/projets/pages/projets-index.ts
    obtenirProjets(){
      const url = "https://zjywabthssmxcftqcyyo.supabase.co/rest/v1/projets"

      axios.get(url);
    }
    info

    La librairie axios présente plusieurs fonctions, dont une pour chaque action HTTP:

    • axios.get

    • axios.post

    • axios.put

    • axios.patch

    • axios.delete

    • ...

    Chaque appel prenant évidemment des paramètres parfois différents, dans le cas d'un POST par exemple où on enverrait des données avec la requête.

async / await​

Peut-être avez-vous remarqué que get est surligné en jaune, indiquant que Promise returned from get is ignored. Au fond, c'est que la fonction retourne une Promise et donc que la requête est asynchrone.

Pour attendre le retour de façon asynchrone, on peut utiliser le mot clé await avant l'appel d'API et nous assurer que notre fonction obtenirProjets() est asynchrone à l'aide du mot clé async.

src/app/features/projets/pages/projets-index.ts
protected async obtenirProjets(){
  const url = "https://zjywabthssmxcftqcyyo.supabase.co/rest/v1/projets"

  await axios.get(url);
}

Appeler obtenirProjets dans ngOnInit()​

Pour effectuer l'appel, on doit appeler la fonction obtenirProjets qui est responsable de contacter l'API.

Comme il s'agit d'une fonction asynchrone (obtenirProjets), on doit modifier légèrement la signature de ngOnInit() afin que cette dernière soit elle-même asynchrone (async).

src/app/features/projets/pages/projets-index.ts
export class ProjetsIndex implements OnInit{
  projets: string[] = [
    "Discreddit",
    "Organisation du Lan Party",
    "Organisation de la soirée jeu vidéo",
  ]

  async ngOnInit(): Promise<void> {
    await this.obtenirProjets();
  }

  protected async obtenirProjets(){
    const url = "https://zjywabthssmxcftqcyyo.supabase.co/rest/v1/projets"

    await axios.get(url);
  }
}

Vérifier dans la console du navigateur​

Vous pouvez accéder à l'application dans votre navigateur et ouvrir la console. Vous devriez avoir un message d'erreur 401.

http://localhost:4200

img

Un code d'erreur 401 nous indique:

401

Envoyer la clé d'API​

Il nous manque évidemment la clé d'API!

Comme vous avez vu avec les requêtes Postman, on envoie cette dans l'en-tête de la requête. Il faut donc une façon d'ajouter la clé à nos requêtes axios.

axios accepte un second paramètre de requête, soit un objet de configuration. En effet, voici la signature de la fonction get:

Axios.get<any, AxiosResponse<any, any>, any>(url: string, config?: AxiosRequestConfig<any> | undefined): Promise<AxiosResponse<any, any>>

Remarquez que le premier paramètre est url et le second config. Cet objet de configuration peut contenir une propriété headers avec les valeurs à passer en en-tête.

Dans notre cas, l'objet de configuration doit ressembler à ceci, soit un un objet contenant headers qui lui-même contient une propriété apiKey:

{
  headers: {
    apiKey: 'VOTRE_CLE_API'
  }
}

Ainsi, la requête axios devient la suivante:

src/app/features/projets/pages/projets-index.ts
async obtenirProjets(){
  const url = "https://zjywabthssmxcftqcyyo.supabase.co/rest/v1/projets"

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

N'oubliez pas de remplacer VOTRE_CLE_API par votre clé d'API!

Vérifier la requête dans l'onglet Réseau​

Si vous rechargez la page d'accueil /projets dans votre navigateur, vous devriez voir (probablement la dernière dans le bas) une requête GET vers supabase.com avec une réponse contenant les projets!

img

Félicitations, vous venez de compléter votre première requête d'API à l'aide d'Angular! 🎉