typescript - example - Angular2: parámetros de solicitud Http POST

post angular 2

Question

Estoy tratando de hacer una solicitud POST pero no puedo hacer que funcione:

testRequest() {
var body = ''username=myusername?password=mypassword'';
var headers = new Headers();
headers.append(''Content-Type'', ''application/x-www-form-urlencoded'');
this.http
.post(''/api'',
body, {
headers: headers
})
.subscribe(data => {
alert(''ok'');
}, error => {
console.log(JSON.stringify(error.json()));
});
}

Básicamente quiero replicar esta solicitud http (no ajax) como si fuera originada por un formulario html:

URL: / api

Parámetros: nombre de usuario y contraseña

Answer 1

Actualización para Angualar 4.3+

Ahora podemos usar HttpClient lugar de Http

La guía está here

Código de muestra

const myheader = new HttpHeaders().set(''Content-Type'', ''application/x-www-form-urlencoded'')
let body = new HttpParams();
body = body.set(''username'', USERNAME);
body = body.set(''password'', PASSWORD);
http
.post(''/api'', body, {
headers: myheader),
})
.subscribe();

Obsoleto

O puedes hacer así:

let urlSearchParams = new URLSearchParams();
urlSearchParams.append(''username'', username);
urlSearchParams.append(''password'', password);
let body = urlSearchParams.toString()

Actualización octubre / 2017

Desde angular4 + , no necesitamos headers o .toString() . En cambio, puedes hacer como el siguiente ejemplo

import { URLSearchParams } from ''@angular/http'';

Método POST / PUT

let urlSearchParams = new URLSearchParams();
urlSearchParams.append(''username'', username);
urlSearchParams.append(''password'', password);
this.http.post(''/api'', urlSearchParams).subscribe(
data => {
alert(''ok'');
},
error => {
console.log(JSON.stringify(error.json()));
}
)

Método GET / DELETE

 let urlSearchParams = new URLSearchParams();
urlSearchParams.append(''username'', username);
urlSearchParams.append(''password'', password);
this.http.get(''/api'', { search: urlSearchParams }).subscribe(
data => {
alert(''ok'');
},
error => {
console.log(JSON.stringify(error.json()));
}
)

Para la application/json JSON application/json Content-Type

this.http.post(''/api'',
JSON.stringify({
username: username,
password: password,
})).subscribe(
data => {
alert(''ok'');
},
error => {
console.log(JSON.stringify(error.json()));
}
)

Answer 2

Aterricé aquí cuando intentaba hacer algo similar. Para un tipo de contenido de aplicación / x-www-form-urlencoded, puede intentar usar esto para el cuerpo:

var body = ''username'' =myusername & ''password''=mypassword;

con lo que intentó hacer, el valor asignado al cuerpo será una cadena.

Answer 3

Creo que el cuerpo no es correcto para un tipo de contenido de application/x-www-form-urlencoded . Podrías intentar usar esto:

var body = ''username=myusername&password=mypassword'';

Espero que te ayude, Thierry

Answer 4

En versiones posteriores de Angular2, no es necesario configurar manualmente el encabezado Content-Type y codificar el cuerpo si pasa un objeto del tipo correcto como body .

Simplemente puedes hacer esto

import { URLSearchParams } from "@angular/http"
testRequest() {
let data = new URLSearchParams();
data.append(''username'', username);
data.append(''password'', password);
this.http
.post(''/api'', data)
.subscribe(data => {
alert(''ok'');
}, error => {
console.log(error.json());
});
}

De esta manera, angular codificará el cuerpo por usted y establecerá el encabezado de Content-Type correcto.

PD: No olvide importar URLSearchParams desde @angular/http o no funcionará.

Answer 5

Estaba teniendo problemas con cada enfoque que usa múltiples parámetros, pero funciona bastante bien con un solo objeto

api:

 [HttpPut]
[Route("addfeeratevalue")]
public object AddFeeRateValue(MyValeObject val)

angular:

var o = {ID:rateId, AMOUNT_TO: amountTo, VALUE: value};
return this.http.put(''/api/ctrl/mymethod'', JSON.stringify(o), this.getPutHeaders());
private getPutHeaders(){
let headers = new Headers();
headers.append(''Content-Type'', ''application/json'');
return new RequestOptions({
headers: headers
, withCredentials: true // optional when using windows auth
});
}

Answer 6

Estas respuestas están desactualizadas para aquellos que utilizan el HttpClient en lugar de Http. Estaba empezando a volverme loco pensando: "He hecho la importación de URLSearchParams pero todavía no funciona sin .toString () y el encabezado explícito".

Con HttpClient, use HttpParams en lugar de URLSearchParams y observe la sintaxis body = body.append() para lograr múltiples parámetros en el cuerpo ya que estamos trabajando con un objeto inmutable:

login(userName: string, password: string): Promise<boolean> {
if (!userName || !password) {
return Promise.resolve(false);
}
let body: HttpParams = new HttpParams();
body = body.append(''grant_type'', ''password'');
body = body.append(''username'', userName);
body = body.append(''password'', password);
return this.http.post(this.url, body)
.map(res => {
if (res) {
return true;
}
return false;
})
.toPromise();
}

Answer 7

Si alguien está luchando con la versión angular 4+ (la mía era 4.3.6) . Este fue el código de muestra que funcionó para mí.

Primero agregue las importaciones requeridas

import { Http, Headers, Response, URLSearchParams } from ''@angular/http'';

Luego para la función api. Es una muestra de inicio de sesión que se puede cambiar según sus necesidades.

login(username: string, password: string) {
var headers = new Headers();
headers.append(''Content-Type'', ''application/x-www-form-urlencoded'');
let urlSearchParams = new URLSearchParams();
urlSearchParams.append(''email'', username);
urlSearchParams.append(''password'', password);
let body = urlSearchParams.toString()
return this.http.post(''http://localhost:3000/api/v1/login'', body, {headers: headers})
.map((response: Response) => {
// login successful if user.status = success in the response
let user = response.json();
console.log(user.status)
if (user && "success" == user.status) {
// store user details and jwt token in local storage to keep user logged in between page refreshes
localStorage.setItem(''currentUser'', JSON.stringify(user.data));
}
});
}

Answer 8

así que para que sea una respuesta completa:

login(username, password) {
var headers = new Headers();
headers.append(''Content-Type'', ''application/x-www-form-urlencoded'');
let urlSearchParams = new URLSearchParams();
urlSearchParams.append(''username'', username);
urlSearchParams.append(''password'', password);
let body = urlSearchParams.toString()
return this.http.post(''http://localHost:3000/users/login'', body, {headers:headers})
.map((response: Response) => {
// login successful if there''s a jwt token in the response
console.log(response);
var body = response.json();
console.log(body);
if (body.response){
let user = response.json();
if (user && user.token) {
// store user details and jwt token in local storage to keep user logged in between page refreshes
localStorage.setItem(''currentUser'', JSON.stringify(user));
}
}
else{
return body;
}
});
}