typescript Angular 4.0 http 放置请求

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/46420078/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 04:55:36  来源:igfitidea点击:

Angular 4.0 http put request

javascriptangularhttptypescript

提问by Leonzen

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:

我编写了一个函数来发送一个 http put 请求来更新一些数据,但它说它没有收到任何数据:

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?

有人可以解释一下,为什么第一个功能不起作用而第二个功能起作用?

回答by KeaganFouche

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

Observable 是惰性的,你需要订阅它们才能工作和检索任何东西。你订阅了你的方法吗?例子:

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

我建议您通读Angular Tour Of Heroes,它基于 angular 2 并且大部分功能在 angular 4 中起作用,有一个部分专门用于 http 请求:https: //angular.io/tutorial/toh-pt6

回答by Ross Scott

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.

可能最好使用 PostMan 之类的东西来测试您的 API,看看您是否可以先使用它。

回答by Krzysztof Raciniewski

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

您错误地使用了 map 方法,请在文档中阅读有关此方法的更多信息: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.):

如果要修改服务器响应(将某些对象映射到其他结构等),可以使用 map 方法:

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

map 方法返回 Observable 对象,因此您可以订阅该对象并等待响应、错误或简单的完成方法(subscribe() 的第三个参数):http: //xgrommx.github.io/rx-book/content/observable/observable_instance_methods/订阅.html