Aller au contenu
Angular Tutorials

Ajoutez une tâche avec HTTP Client

Objectifs de ce chapitre

  • ✔️
    Créez une tâche en utilisant HTTP Client
    Ajoutez une tâche dans la liste en réalisant un appel PI au faux serveur.

TaskService

Vous venez de communiquer avec le serveur API pour récupérer une liste de tâches. Mettez à jour la liste stockée dans la fausse API en ajoutant une nouvelle tâche.

Basé sur le protocole HTTP, vous utiliserez la fonction post pour ajouter une tâche à la liste : http.post(). Cette fonction attend 2 paramètres :

  1. L’URL du serveur API
  2. Les données de la tâche à envoyer au serveur
addTask(task: TaskForm) {
  return this.http.post<Task>('http://localhost:3000/tasks', {
      ...task,
      createdAt: new Date()
  });
}

Comme JSON-server est capable de générer un id pour nous, vous n’utiliserez pas le package uuid pour générer un id pour la tâche.

Cette nouvelle fonction addTask définit l’échange avec le serveur API :

  • Il fait une requête POST;
  • Il envoie un objet TaskForm comme corps de requête;
  • Il communique avec le serveur API à l’adresse http://localhost:3000/tasks.

🎓 Instructions

  1. Modifiez le fichier src/app/task.service.ts.

    import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    import { Task, TaskForm } from './task.model';
    

    @Injectable({
      providedIn: 'root'
    })
    export class TaskService {
      constructor(private http: HttpClient) { }
    

      addTask(task: TaskForm) {
        return this.http.post<Task>('http://localhost:3000/tasks', {
          ...task,
          createdAt: new Date()
        });
      }
    }

Modifiez TaskFormComponent

À l’étape précédente, on vous a expliqué que les observables doivent être abonnées pour exécuter la requête. Vous avez pu utiliser le pipe async dans le Template HTML pour vous abonner à l’observable.

Mais dans la situation actuelle, la requête se produit dans le fichier component.ts.

Abonnez-nous à l’observable en utilisant la fonction subscribe.

🎓 Instructions

  1. Modifiez le fichier src/app/task-form/task-form.component.ts.

    import { Component } from '@angular/core';
    import { TaskService } from '../task.service';
    import { TaskForm } from '../task.model';
    

    @Component({
      selector: 'app-task-form',
      templateUrl: './task-form.component.html',
      styleUrls: ['./task-form.component.css']
    })
    export class TaskFormComponent {
      task: TaskForm = {
        title: '',
        description: ''
      };
    

    constructor(private taskService: TaskService) { }
    

    submit() {
        const id = this.route.snapshot.paramMap.get('id');
    

        if (id) {
            const existingTask = this.taskService.getTask(id);
            this.taskService.updateTask({
                ...existingTask,
                ...this.task
            });
        } else {
    

            this.taskService.addTask(this.task).subscribe();
        }
        this.router.navigate(['/']);
        }
    }

Cela fonctionne maintenant, mais pas exactement comme vous le souhaiteriez…

Programmation asynchrone

Vous vous souvenez de l’exemple du journal du chapitre précédent ? Étant donné qu’il s’agit d’un journal physique, sa livraison dans votre boîte aux lettres prend du temps. Un certain temps s’écoule entre le moment où vous vous inscrivez et le moment où vous recevez le journal.

C’est la même chose dans notre situation. En envoyant une requête avec la fonction subscribe(), vous demandez au serveur d’ajouter une tâche à la liste. Mais la navigation vers l’itinéraire ”/” aura lieu immédiatement après l’envoi de la demande, et non une fois la demande terminée.

Passons en revue le code que vous venez de modifier dans la fonction submit de TaskFormComponent :

submit() {
    const id = this.route.snapshot.paramMap.get('id');


    if (id) {
        const existingTask = this.taskService.getTask(id);
        this.taskService.updateTask({
                ...existingTask,
                ...this.task
        });
    } else {
        this.taskService.addTask(this.task).subscribe();
    }
    this.router.navigate(['/']);
}
  1. Vous appelez la fonction addTask depuis TaskService pour ajouter une tâche au serveur API.
  2. Vous naviguez vers l’itinéraire ”/”.

La communication API est asynchrone, ce qui signifie que l’action de la fonction addTask peut ne pas encore être résolue lorsque la fonction router.navigate est appelée. Notre serveur est tourne en locale, donc la requête sera rapide, mais elle reste asynchrone.

Une requête adressée au serveur peut prendre beaucoup de temps si le serveur ou le réseau est lent pour une raison quelconque. Dans cette situation, pendant que la demande est toujours en cours de traitement, la fonction router.navigate sera exécutée.

Ce n’est pas ce que vous souhaitez car en naviguant, vous allez afficher la liste des tâches mise à jour.

Vous devez attendre la réponse du serveur avant de naviguer vers la route ”/”.

L’abonnement

La fonction d’abonnement accepte une fonction de rappel comme paramètre. Cette fonction de rappel sera exécutée lorsque l’observable émettra une valeur.

Utilisez cette fonction de rappel pour naviguer vers la route ”/”.

🎓 Instructions

  1. Modifiez le fichier src/app/task-form/task-form.component.ts.

    import { Component } from '@angular/core';
    import { Router } from '@angular/router';
    import { TaskService } from '../task.service';
    import { TaskForm } from '../task.model';
    

    @Component({
      selector: 'app-task-form',
      templateUrl: './task-form.component.html',
      styleUrls: ['./task-form.component.css']
    })
    export class TaskFormComponent {
      task: TaskForm = {
        title: '',
        description: ''
      };
    

      constructor(private taskService: TaskService, private router: Router) { }
    

      submit() {
          const id = this.route.snapshot.paramMap.get('id');
    

            if (id) {
                const existingTask = this.taskService.getTask(id);
                this.taskService.updateTask({
                    ...existingTask,
                    ...this.task
                });
            } else {
    

                this.taskService.addTask(this.task).subscribe(() => {
                    this.router.navigate(['/']);
                });
            }
      }
    }

✔️ Ce que vous avez appris

Dans ce chapitre, vous avez appris à utiliser HttpClient pour ajouter une tâche à la liste. La communication API étant asynchrone, vous avez appris à utiliser la fonction subscribe pour attendre la réponse du serveur avant de naviguer vers la route ”/”.