angular - 如何访问http post响应并解析为json？

Question

I'm trying to send this POST to an API but seems impossible to access response data (which is coming as text and I need to parse as JSON).

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { tap } from 'rxjs/operators';
import { Storage } from '@ionic/storage';
import { EnvService } from './env.service';
import { Injectable } from '@angular/core';
import { map } from "rxjs/operators";

...

login(email: String, password: String) {

  let headers = new HttpHeaders({
    'Accept'       :'*/*',
    'Content-Type' :'text/plain'
  });

  let formData = {
    user       : 'myuser',
    pass       : 'mypass',
    retsession : true
  }

  return this.http.post(this.env.API_URL+'/login', JSON.stringify(formData), {headers:headers}).pipe(
    map((res:Response) => (res.text()))
    .subscribe(data => {console.log(data)})
  );
}

I'm getting this error:

[ng] ERROR in src/app/services/auth.service.ts(42,8): error TS2339: Property 'subscribe' does not exist on type 'OperatorFunction<Response, Promise<string>>'.

Am I doing something wrong?

Answer 1

If you just want to access the response data, you can use then() method.

$http.post('yourURL', formData).then(function (response) {
    console.log("Response");
    console.log(response.data);
});

Answer 2

Why are you mapping in your subscription? All you need to do is display the data.

Just do .subscribe(data => console.log(JSON.stringify(data)) get rid of the map.

Edit: Also your .subscribe needs to be outside your pipe, if you do need to pipe that it. Which you don't in this instance.

return this.http.post(url, JSON.stringify(formData), {headers:headers}).pipe(
    map((res:Response) => (res.text()))).subscribe(data => {console.log(data)}
  );

Answer 3

your subscribe method can't be place inside the pipe

login(email: String, password: String) : void {

 ....

 this.http.post(this.env.API_URL+'/login', JSON.stringify(formData), {headers:headers})
  .pipe(map((res:Response) => (res.text())))
  .subscribe(data => {console.log(data)});
}

you don't need the return statement

the othe case is to return an observable from login method so in this case you can't subscribe inside the login method

login(email: String, password: String) : Observable<any> {

 ....

 return this.http.post(this.env.API_URL+'/login', JSON.stringify(formData), {headers:headers})
  .pipe(map((res:Response) => (res.text()))
}

use login method as observable

  login('example@example.com','123456').subscribe(data => {console.log(data)});

Answer 4

There are multiple issues with your implementation.

I've mentioned all the issues inline in code comments so that they're easy to follow:

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { tap } from 'rxjs/operators';
import { Storage } from '@ionic/storage';
import { EnvService } from './env.service';
import { Injectable } from '@angular/core';
import { map } from "rxjs/operators";

...

login(email: String, password: String) {

  // Issue 1: These headers need not be set explicitly. HttpClient automatically does that for you. So you can get rid of these.
  //let headers = new HttpHeaders({
  //  'Accept': '*/*',
  //  'Content-Type': 'text/plain'
  //});

  let formData = {
    user: 'myuser',
    pass: 'mypass',
    retsession: true
  }

  // Issue 2: You're stringifying the request payload which is supposed to be sent as a JSON Object. So remove the JSON.stringify
  // Remove the headers too as we've gotten rid of them above.

  // Issue 3: I think in the pipe and map you're trying to call .json on the response. Since you're using HttpClient, that also isn't really required as HttpClient does that out of the box for you. So get rid of those.
  return this.http.post(this.env.API_URL + '/login', formData)
    .subscribe(data => console.log(data));
}

Answer 5

As the response coming from server is of type text, have your tried explicitly specifying the response as text in the post request like below,

this.http.post(url, formData, {responseType: 'text' })

By default angular HttpClient tries to process the response as json and fails in parser when a text-based response is received, altough the http request succeeds