Corps de la requête Http.DELETE en Angular2

Question

J'essaie de parler à une API un peu RESTful à partir d'un frontal Angular 2.

Pour retirer un élément d'une collection, j'ai besoin d'envoyer d'autres données en plus de l'identifiant unique retiré (qui peut être ajouté à l'url), à savoir un jeton d'authentification, des informations sur la collection et des données auxiliaires.

La méthode la plus simple que j'ai trouvée consiste à placer le jeton d'authentification dans les en-têtes de la demande, et les autres données dans le corps de la demande.

Cependant, le module Http d'Angular 2 n'approuve pas vraiment une requête DELETE avec un corps, et en essayant de faire cette requête

let headers= new Headers();
headers.append('access-token', token);

let body= JSON.stringify({
    target: targetId,
    subset: "fruits",
    reason: "rotten"
});

let options= new RequestOptions({headers:headers});
this.http.delete('http://testAPI:3000/stuff', body,options).subscribe((ok)=>{console.log(ok)}); <------line 67

donne cette erreur

app/services/test.service.ts(67,4): error TS2346: Supplied parameters do not match any signature of call target.

Est-ce que je fais quelque chose de mal au niveau de la syntaxe ? Je suis presque sûr qu'un corps DELETE est pris en charge par la RFC.

Y a-t-il de meilleures façons d'envoyer ces données ?

Ou est-ce que je dois juste le mettre dans les en-têtes et l'appeler un jour ?

Nous vous remercions de bien vouloir nous éclairer sur cette énigme.

Answer 1

Le site http.delete(url, options) accepte un corps. Il suffit de le placer dans l'objet options.

http.delete('/api/something', new RequestOptions({
   headers: headers,
   body: anyObject
}))

Interface des options de référence : https://angular.io/api/http/RequestOptions

UPDATE :

L'extrait ci-dessus ne fonctionne que pour Angular 2.x, 4.x et 5.x.

À partir de la version 6.x, Angular propose 15 surcharges différentes. Consultez toutes les surcharges ici : https://angular.io/api/common/http/HttpClient#delete

Exemple d'utilisation :

const options = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json',
  }),
  body: {
    id: 1,
    name: 'test',
  },
};

this.httpClient
  .delete('http://localhost:8080/something', options)
  .subscribe((s) => {
    console.log(s);
  });

Answer 2

Dans Angular 5, j'ai dû utiliser la méthode request au lieu de delete pour envoyer un corps. La documentation de la méthode delete n'inclut pas le corps, mais il est inclus dans la méthode request.

import { HttpClient } from '@angular/common/http';
import { HttpHeaders } from '@angular/common/http';

this.http.request('DELETE', url, {
    headers: new HttpHeaders({
        'Content-Type': 'application/json',
    }),
    body: { foo: bar }
});

Answer 3

Vous êtes en fait capable de tromper Angular2 HTTP en envoyant un body avec un DELETE en utilisant le request méthode. Voici comment :

let body = {
    target: targetId,
    subset: "fruits",
    reason: "rotten"
};

let options = new RequestOptionsArgs({ 
    body: body,
    method: RequestMethod.Delete
  });

this.http.request('http://testAPI:3000/stuff', options)
    .subscribe((ok)=>{console.log(ok)});

Notez que vous devrez définir la méthode de requête dans le champ RequestOptionsArgs et non dans http.request Le premier paramètre alternatif de l Request . Pour une raison quelconque, cela donne le même résultat qu'en utilisant http.delete

J'espère que cela vous aidera et que je ne suis pas trop en retard. Je pense que les gars d'Angular ont tort de ne pas permettre qu'un corps soit passé avec delete, même si c'est déconseillé.

Answer 4

Vous trouverez ci-dessous un exemple de code pertinent pour Angular 4/5 avec le nouveau HttpClient.

import { HttpClient } from '@angular/common/http';
import { HttpHeaders } from '@angular/common/http';

public removeItem(item) {
    let options = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
      }),
      body: item,
    };

    return this._http
      .delete('/api/menu-items', options)
      .map((response: Response) => response)
      .toPromise()
      .catch(this.handleError);
  }

Answer 5

Définition dans le fichier http.js de la section @angular/http :

delete(url, options)

La requête n'accepte pas de corps, il semble donc que votre seule option soit de placer vos données dans l'URI.

J'ai trouvé un autre sujet avec des références à la RFC correspondante, entre autres choses : Comment transmettre des données autres que des en-têtes dans la demande DELETE d'ajax ?