web-dev-qa-db-fra.com

Corps de la requête Http.DELETE dans Angular2

J'essaie de parler d'une API quelque peu reposante à partir d'une interface angulaire 2.

Pour supprimer un élément d'une collection, je dois envoyer d'autres données en plus de l'identifiant unique removée (pouvant être ajouté à l'URL), à savoir un jeton d'authentification, des informations de 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 d'autres données dans le corps.

Cependant, le module Http de Angular 2 n'approuve pas vraiment une requête DELETE avec un corps et tente 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.

Maintenant, est-ce que je fais quelque chose de mal en termes de syntaxe? Je suis presque sûr qu'un corps DELETE est pris en charge par RFC

Existe-t-il de meilleurs moyens d’envoyer ces données?

Ou devrais-je simplement le jeter dans les en-têtes et l'appeler un jour?

Toute idée sur cette énigme serait appréciée

angularresthttp-delete
32
TriTap

Définition dans http.js du @ angular/http:

supprimer (url, options)

La demande n'accepte pas de corps, il semble donc que votre seule option est de saisir vos données dans l'URI.

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

4
AndreasV

Le http.delete (url, options) accepte un corps. Vous avez juste besoin de le mettre 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

METTRE À JOUR: 

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

Pour les versions 6.x et 7.x, Angular offre différentes surcharges selon vos besoins. Vérifiez toutes les surcharges ici: https://angular.io/api/common/http/HttpClient#delete

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);
  });
78
n4nd0_o

Vous êtes en mesure de tromper Angular2 HTTP en envoyant une body avec une DELETE en utilisant la méthode request. C'est ainsi:

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 la variable RequestOptionsArgs et non dans le premier paramètre alternatif de http.request, Request. Pour une raison quelconque, le résultat est identique à celui obtenu avec http.delete

J'espère que cela aide et que je ne suis pas en retard. Je pense que les gars angulaires ont tort de ne pas laisser passer un corps avec delete, même s'il est découragé.

15
Hampus

Dans Angular 5, je devais utiliser la méthode de la requête au lieu de delete pour envoyer un corps. La documentation de la méthode delete n'inclut pas body, mais elle est incluse 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 }
});
8
Jeff Cross

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);
  }
7
Garrett Sanderson

Ci-dessous un exemple pour Angular 6 

deleteAccount(email) {
            const header: HttpHeaders = new HttpHeaders()
                .append('Content-Type', 'application/json; charset=UTF-8')
                .append('Authorization', 'Bearer ' + sessionStorage.getItem('accessToken'));
            const httpOptions = {
                headers: header,
                body: { Email: email }
            };
            return this.http.delete<any>(AppSettings.API_ENDPOINT + '/api/Account/DeleteAccount', httpOptions);
        }
4
unknow27

Si vous utilisez Angular 6, nous pouvons mettre body dans la méthode http.request.

Référence de github

Vous pouvez essayer ça, ça fonctionne pour moi.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {

  constructor(
    private http: HttpClient
  ) {
    http.request('delete', url, {body: body}).subscribe();
  }
}
2
Druta Ruslan

Le REST n'empêche pas l'inclusion de corps dans la requête DELETE mais il est préférable d'utiliser la chaîne de requête car elle est la plus standardisée (à moins que vous n'ayez besoin de chiffrer les données)

Je l’ai fait fonctionner avec angular 2 en faisant comme suit:

let options:any = {}
option.header = new Headers({
    'header_name':'value'
});

options.search = new URLSearchParams();
options.search.set("query_string_key", "query_string_value");

this.http.delete("/your/url", options).subscribe(...)
1
mbryja

Vous trouverez ci-dessous l'exemple de code correspondant aux projets Angular 2/4/5:

let headers = new Headers({
  'Content-Type': 'application/json'
});

let options = new RequestOptions({
  headers: headers,
  body: {
    id: 123
  }
});

return this.http.delete("http//delete.example.com/delete", options)
  .map((response: Response) => {
    return response.json()
  })
  .catch(err => {
    return err;
  });

Notez que body est passé à travers RequestOptions

0
student