headers - httpclient angular 6 example

Cuerpo de solicitud Http.DELETE en Angular2

Question

Estoy tratando de hablar con una API algo RESTful desde un frontend de Angular 2.

Para eliminar algún elemento de una colección, debo enviar algunos otros datos además de la ID única removée (que se puede adjuntar a la url), a saber, un token de autenticación, alguna información de colección y algunos datos secundarios.

La forma más sencilla que he encontrado de hacerlo es colocar el token de autenticación en los encabezados de solicitud y otros datos en el cuerpo.

Sin embargo, el módulo Http de Angular 2 no está completamente de acuerdo con una solicitud DELETE con un cuerpo, y tratar de hacer esta solicitud

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

da este error

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

Ahora, ¿estoy haciendo algo mal sintaxis? Estoy bastante seguro de que un cuerpo DELETE es compatible por RFC

¿Hay mejores maneras de enviar esos datos?

¿O debería simplemente tirarlo en los encabezados y llamarlo un día?

Cualquier apreciación sobre este enigma sería apreciada

Answer 1

A continuación se muestra el ejemplo de código relevante para proyectos 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;
});

Tenga en cuenta que el body se pasa a través de RequestOptions

Answer 2

A continuación se muestra un ejemplo de código relevante para Angular 4/5 con el nuevo 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 3

A continuación se muestra un ejemplo para 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);
}

Answer 4

Definición en http.js desde @ angular / http :

eliminar (url, opciones)

La solicitud no acepta un cuerpo, por lo que parece que su única opción es utilizar sus datos en el URI.

Encontré otro tema con referencias que corresponden a RFC, entre otras cosas: Cómo pasar datos en la solicitud DEJATE de ajax que no sean encabezados

Answer 5

El http.delete (url, opciones) acepta un cuerpo. Solo necesitas ponerlo dentro del objeto opciones.

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

Interfaz de opciones de referencia: https://angular.io/api/http/RequestOptions

Answer 6

En Angular 5, tuve que usar el método de solicitud en lugar de eliminar para enviar un cuerpo. La documentación para el método de eliminación no incluye el cuerpo, pero se incluye en el método de solicitud.

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 7

En realidad, puede engañar a Angular2 HTTP para que envíe un body con un DELETE utilizando el método de request . Así es como:

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

Tenga en cuenta que deberá configurar el método de solicitud en RequestOptionsArgs y no en la http.request primer parámetro alternativo de http.request . Eso por alguna razón produce el mismo resultado que usar http.delete

Espero que esto ayude y que no sea demasiado tarde. Creo que los tipos angulares se equivocan aquí al no permitir que se pase un cuerpo con la eliminación, aunque esté desanimado.

Answer 8

La REST no impide la inclusión del cuerpo con la solicitud DELETE, pero es mejor usar la cadena de consulta ya que está más estandarizada (a menos que necesite que los datos estén encriptados)

Lo tengo para trabajar con angular 2 haciendo lo siguiente:

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(...)