example - rest post angular 2

¿Cómo POST JSON en Angular 2?

Question

No entiendo lo que estoy haciendo mal, mi servidor devuelve "indefinido" cuando intento obtener el json.

POST(url, data) {
        var headers = new Headers(), authtoken = localStorage.getItem(''authtoken'');
        headers.append("Content-Type", ''application/json'');

        if (authtoken) {
        headers.append("Authorization", ''Token '' + authtoken)
        }
        headers.append("Accept", ''application/json'');

        var requestoptions = new RequestOptions({
            method: RequestMethod.Post,
            url: this.apiURL + url,
            headers: headers,
            body: data
        })

        return this.http.request(new Request(requestoptions))
        .map((res: Response) => {
            if (res) {
                return { status: res.status, json: res.json() }
            }
        });
    }

Y mi función:

login(username, password) {
        this.POST(''login/'', {test: ''test''}).subscribe(data => {
            console.log(data)
        })
    }

Cuando intento esto, el cuerpo de la solicitud se ve así:

Entonces, en lugar de enviar el json real, solo envía "[objeto Objeto]". En lugar de "Solicitar carga útil" debería ser "JSON". ¿Qué estoy haciendo mal?

Answer 1

El encabezado debe ser

''Content-Type'': ''application/json''

y

 body: data

debiera ser

 body: JSON.stringify(data);

Answer 2

He estado buscando una respuesta visual a la pregunta de publicar datos json en Angular por un tiempo, sin éxito. Ahora que eventualmente tengo algo funcionando, compartamos:

En línea

Supongamos que espera un cuerpo de respuesta json de tipo T

const options = {headers: {''Content-Type'': ''application/json''}};
this.http.post<T>(url, JSON.stringify(data), options).subscribe(
    (t: T) => console.info(JSON.stringify(t))
);

Doc oficial

Clase extensible

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

export class MyHttpService {
  constructor(protected http: HttpClient) {}

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

  postJson<T>(url: string, data: any): Observable<T> {
    return this.http.post<T>(
      url,
      JSON.stringify(data),
      {headers: this.headers}
    )
  }

La esencia

Al principio me perdí esta forma "anidada" de pasar el tipo de contenido:

{headers:{''Content-Type'': ''application/json''}}

Answer 3

Necesitas estrechar la carga útil

var requestoptions = new RequestOptions({
            method: RequestMethod.Post,
            url: this.apiURL + url,
            headers: headers,
            body: JSON.stringify(data)
        })