0
votes

Angular 7 - Comment capturer une erreur de serveur 500 sur http.post lors du retour d'une nouvelle promesse?

J'obtiens une erreur de serveur 500 (ce que j'attends) mais mon implémentation actuelle ne capture pas l'erreur. Au lieu de capturer l'erreur dans le composant et de la gérer, l'application génère une erreur de serveur 500 dans la console du navigateur et l'exécution est interrompue et le spinner de chargement reste. J'ai du mal à comprendre ça. J'ai restructuré la promesse de différentes manières sans succès.

** Mise à jour **

J'ai mis à jour le service pour utiliser le rejet dans la promesse, mais cela ne fonctionnait toujours pas.

Code du composant

updateItems(items:Item[], companyId) {
    let headers = new HttpHeaders()
      .set("Content-Type", "application/json")
      .set("CompanyId", companyId);

    return new Promise((resolve, reject) => {
      this.http.post(`${this._config.API_URL}`, items, { headers }).subscribe(
        data => {
          resolve(data);
        },
        err => {
          console.log('Error updating items', err);
          reject(err);
        }
      );
    });
  }

Code du service

save() {
    this.loading = true;  this.itemService.updateItems(this.updatedItems, this.activeCompanyId).then(() => {
       this.loading = false;
     }).catch((err) => {
       console.log("Error updating items", err);
     });
  }

angular http-post promise

2 commentaires

Juste une question, il y a une raison pour laquelle vous utilisez des promesses au lieu de travailler avec des observables qui sont nativement utilisés dans Angular?

Aucune raison particulière autre que d'utiliser ce que je savais déjà. Je suis plus qu'heureux de re-factoriser pour utiliser un observable au lieu de ne pas savoir comment le faire correctement. À l'origine, lorsque j'ai choisi d'utiliser Promises, j'ai choisi ce que je pensais à l'époque être l'option la plus sûre pour que les demandes se comportent comme prévu.

3 Réponses :

1
votes

En cas d'erreur, vous souhaitez rejeter la promesse:

updateItems(items:Item[], companyId) {
    let headers = new HttpHeaders()
      .set("Content-Type", "application/json")
      .set("CompanyId", companyId);

    return new Promise((resolve, reject) => {
      this.http.post(`${this._config.API_URL}`, items, { headers }).subscribe(
        data => {
          resolve(data);
        },
        err => {
          console.log('Error updating items', err);
          reject(err);
        }
      );
    });
  }

1 commentaires

J'ai essayé cela et cela n'a pas fonctionné: (J'ai mis à jour la question pour refléter l'utilisation du rejet dans la promesse. Rien n'est déconnecté sauf l'erreur de serveur 500 dans la console du navigateur et le spinner reste.

0
votes

Je pense que la solution à votre problème pourrait être l'intercepteur http: https: // angular. io / api / common / http / HttpInterceptor

créez un fichier (par exemple error-interceptor.ts et ajoutez ce qui suit à l'intérieur (assurez-vous d'ajouter cette classe aux fournisseurs de votre module)

errorResponse.error.message;

}

res.status(500).json({ message: "Server Boo-Boo" });

Comme son nom l'indique, vous pouvez désormais "intercepter" toutes les réponses http entrantes et rechercher une erreur. En fonction de ce que vous vous utilisez pour renvoyer votre réponse au verso, votre réponse après une erreur (c'est express).

providers: [
    { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }
],

Ensuite, vous pouvez accéder au message avec:

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
constructor() {}

intercept(req: HttpRequest<any>, next: HttpHandler) {
    return next.handle(req).pipe(
        catchError((errorResponse: HttpErrorResponse) => {              
            console.error(errorResponse.error);             
        })
    );
}

3 commentaires

Le HttpInterceptor captera chaque réponse, ce n'est pas la question ici.

Il ne les attrapera tous que si vous le souhaitez. Ils peuvent facilement être filtrés en fonction du code de réponse, du message ou de toute autre chose.

J'avais déjà un intercepteur en place pour l'authentification, je l'ai donc filtré en fonction du code de réponse 500

0
votes

J'ai pu résoudre le problème en utilisant un HttpIntercepter

import { Injectable } from "@angular/core";
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor,
  HttpErrorResponse
} from "@angular/common/http";
import { Observable, of, throwError } from "rxjs";
import { catchError } from 'rxjs/operators';


@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor(public auth: AuthService, public navService: NavService) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    let request = req.clone({
      withCredentials: true
    });

    return next.handle(request).pipe(catchError((err, caught) => {
      if (err instanceof HttpErrorResponse) {
        if (err.status === 500) {
          return throwError(err)
        }
      }
      return of(err);
    }) as any);
  }
}

0 commentaires