27-5 Paramètre de requête

Imaginons que plutôt que d'afficher simplement Hello World, nous voulions avoir la possibilité de personnaliser le message pour y faire mention d'un nom. Par exemple, Hello {votre nom}.

Pour ce faire, il nous faut modifier le contrôleur afin que l'action GET / qui est connectée à la fonction getHello() puisse recevoir un paramètre dans son URL.

Quelque chose comme: GET /hello/benoit.

1. Définir une nouvelle action de contrôleur getHelloNom responsable de répondre à la requête HTTP.

src/app.controller.ts

getHelloNom(): string {
}

2. Définir le type d'action HTTP à laquelle la méthode sera responsable de répondre, soit GET.

src/app.controller.ts

@Get()
getHelloNom(): string {
}

info

Il existe un décorateur pour chaque action HTTP. Ici on utilise @Get pour une requête GET. Vous devrez ajouter l'importation.

3. Définir l'URL à laquelle la fonction sera responsable de répondre.

src/app.controller.ts

@Get('/hello/:nom')
  getHelloNom(): string {
}

info

Via le décorateur de méthode HTTP, il est possible de préciser l'URL associée à la fonction. Ici /hello/:nom. :nom est un paramètre dynamique, comme dans Angular.

4. Récupérer le paramètre dynamique et le passer à la fonction en paramètre via le décorateur @Param().

src/app.controller.ts

@Get('/hello/:nom')
getHelloNom(@Param('nom') nom: string): string {
}

info

Le décorateur Param() permet de récupérer un paramètre d'URL. Comme ici on a un paramètre dynamique (:nom), on peut le récupérer via @Param('nom'). On l'assigne au paramètre de fonction nom: string simplement en le mettant à l'avant de ce dernier.

5. Retourner le résultat

src/app.controller.ts

@Get('/hello/:nom')
getHelloNom(@Param('nom') nom: string): string {
  return `Hello ${nom}!`;
}

Maintenant, en accédant à l'adresse au format http://localhost:3000/hello/benoit (vous pouvez remplacer le nom, vous obtiendrez) une réponse dynamique en fonction du paramètre.

Utiliser le service

On peut évidemment aussi utiliser le service AppService afin de séparer le traitement de la requête de la logique applicative.

Une façon simple est de modifier la fonction getHello du service afin que cette dernière accepte un paramètre optionnel pour le nom.

src/app.service.ts

export class AppService {
  getHello(nom?: string): string {
    if (nom) {
      return `Hello ${nom}!`;
    }
    return 'Hello World!';
  }
}

Permettant maintenant d'appeler getHello de cette façon dans l'action du contrôleur.

src/app.controller.ts

@Get('/hello/:nom')
getHelloNom(@Param('nom') nom: string): string {
  return this.appService.getHello(nom);
}