Angular 4.0 http put请求

Question

I've written a function to send a http put request to update some data but it says, that it is not recieving any data:

updateHuman(human: Human) {
    const url = `${this.url}/${human.id}`;
    const data = JSON.stringify(human);
    return this.http.put(url, data).map(
        response => response.json().data as Human,
        error => console.log(error)
    );
}

After I've changed my function to the following, it is working:

updateHuman(human: Human) {
    const url = `${this.url}/${human.id}`;
    const data = JSON.stringify(human);
    return this.http.put(url, data).map(() => human);
}

Could someone explain me, why the first function is not working but second is working?

Answer 1

Observables are lazy, you need to be subscribed to them for them to work and retrieve anything. Did you subscribe to your method? Example:

methodToUpdateHuman(human): void{
...
this.updateHuman(human).subscribe((response) => {
   //do something with the response
   console.log.("Response is: ", response);
},
(error) => {
   //catch the error
   console.error("An error occurred, ", error);
});
}

I suggest you read through the Angular Tour Of Heroses , it's based in angular 2 and most of the functionality is functional in angular 4, there is a section dedicated to http requests: https://angular.io/tutorial/toh-pt6

Answer 2

In the second example you are not returning the response within the map, you are returning the human that was originally passed in.

So, basically you are creating an illusion that it is working, when it isn't.

Probably best to test your API with something like PostMan, to see if you can get it working with that first.

Answer 3

You use map method incorrectly, read more about this method in documentation: http://xgrommx.github.io/rx-book/content/observable/observable_instance_methods/map.html

If you want receive response from server your code should look like that:

updateHuman(human: Human) {
    const url = `${this.url}/${human.id}`;
    const data = JSON.stringify(human);
    return this.http.put(url, data).subscribe(
        response => response.json().data as Human,
        error => console.log(error)
    );
}

You can use map method if you want to modify server response(map some objects to other structures etc.):

updateHuman(human: Human) {
    const url = `${this.url}/${human.id}`;
    const data = JSON.stringify(human);
    return this.http.put(url, data)
    .map(response => { return response.json() }) // you can get json response here 
    .subscribe(
        response => response.data as Human, // -- change here --
        error => console.log(error)
    );
}

map method returns Observable object, so you can subscribe that and wait for response, error or simple complete method(third parameter of subscribe()): http://xgrommx.github.io/rx-book/content/observable/observable_instance_methods/subscribe.html