Typescript Rest API POST call with JSON parameter

Question

I'm trying to find a code example to send a POST request to a REST Api with a JSON as parameter and get the response and any exceptions / error codes in Typescript.

I suggest you check the official documentation, which you should do anyway if you're working with Angular: https://angular.io/guide/http#making-a-post-request — Oscar Paz, Apr 24 '18 at 11:50

Mohamed Badr · Accepted Answer · 2018-04-25T09:47:20.523

You could start with something like that

Service

export class MyService{
  constructor(
    private httpClient: HttpClient) {
  }

   getSomethingFromServer():Observable<any>{
       return this.httpClient.get('you_request_url');
   }
}

Component

constructor(
    private myService: MyService) {
  }

  this.myService.getSomethingFromServer().subscribe(response => {
     // do whatever you want with the response
  }, error => {
     // handle error here
     // error.status to get the error code
  });

score 3 · Answer 2 · answered Apr 24 '18 at 13:08

First set the headers as follows, the "userIdAuthToken" should be the token returned from security service

this.httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json',
    'Authorization': 'Bearer ' + this.userIdAuthToken
  })
};

Then make your request,

private _http: HttpClient      // goes in constructor

let saveRequest = this._http.post<Project>(
  this.apiUrl + '/project' + '/post',
  JSON.stringify(data),
  this.httpOptions);

saveRequest will be an observable so you need to subscribe to it in your component

score 2 · Answer 3 · edited Jun 24 '23 at 19:29

2

//Final working code. You should maintain service for api call and call it from Component.ts

public post(a : string, data: string): Observable<any>{

    const options = new RequestOptions({
      headers: this.getAuthorizedHeaders(),
      responseType: ResponseContentType.Json,
      withCredentials: false
    });

    return this.http.post(this.BASE_URL, JSON.stringify({ var: a, data: data}), options)
      .map(this.handleData)
      .catch(this.handleError);
}

edited Jun 24 '23 at 19:29

shA.t

16,580
5
54
111

answered Apr 24 '18 at 11:56

Rohit Rai

31
4

RequestOptions is deprecated. You should use @angular/common/http instead. – Laurent Mouchart Apr 24 '18 at 12:03

score 1 · Answer 4 · answered Apr 24 '18 at 13:16

1

Is a library will do the trick? Worth taking a look at node-fetch, fetch-as, make-fetch-happen, and what not.

answered Apr 24 '18 at 13:16

motss

662
4
6

Typescript Rest API POST call with JSON parameter

4 Answers4

Linked