Angular 获取数据

我正在查看如何使用

HttpClient

的get方法，但看不到如何在get请求中传递数据。我只知道如何获取url。我的意思是我想做这样的事情：

curl -X GET \
  http://127.0.0.1:5000/get_nodes \
  -H 'Content-Type: application/json' \
  -H 'Postman-Token: 604243c2-f9da-4f71-b356-a8e31608b45d' \
  -H 'cache-control: no-cache' \
  -d '{
    "username" : "jack_list",
    "node_name" : "nodeToFind"
}'

我想将

json

传递给我的请求，如上所示，带有

curl-d

标志。我在网上看到的所有示例都是这样做的：

---

this.http.get（“url\u of\u api”）

，但是如果我需要将json传递到我的请求中怎么办？

get请求通常不包含请求体。您必须将它们编码到URL中

例如：

请求“数据”的JSON表示：

等效GET请求：

GET /foo/bar?baz=qux&wotsit[]=1&wotsit[]=2&wotsit[]=three

---

我已经准备好将复杂对象编码为一系列GET参数。

高级

HttpClient.GET（）

不提供请求主体参数，因为带有主体的

GET

是非标准的，您应该能够使用

HttpClient.request（）

。注意：您可能还必须在

JSON.stringify（）

中包装

数据

const data = {
  "username": "jack_list",
  "node_name": "nodeToFind"
};
const headers = new HttpHeaders();
headers.set('Content-Type', 'application/json ');
headers.set('Postman-Token', '604243c2-f9da-4f71-b356-a8e31608b45d');
headers.set('cache-control', 'no-cache');
const req = new HttpRequest('GET', 'http://127.0.0.1:5000/get_nodes', data, { headers });
this.http.request(req).subscribe(res => {
  // do with res
});

更新：

浏览器似乎不允许您这样做。


所以我的最新答案是这是不可能的。
HttpClient设置：

在您开始使用中的
HttpClient
之前。您需要将
HttpClientModule
导入您的
AppModule

import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {HttpClientModule} from "@angular/common/http";
import {BrowserModule} from "@angular/platform-browser";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
  ],
  bootstrap: [AppComponent],
})
export class AppModule {
}

无论您想在哪里使用
HttpClient
，都需要将其注入
构造函数中

构造函数（私有http:HttpClient）{}

获取：

对于get，方法可以如下所示。在本例中，请求URL如下所示http://127.0.0.1:5000/get_nodes?username=“杰克列表”&nodename=“nodeToFind”

帖子：

对于post，方法将非常类似，您只需在那里添加数据

const data = {
"username" : "jack_list",
"node_name" : "nodeToFind"
};
const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json',
    'Postman-Token': '604243c2-f9da-4f71-b356-a8e31608b45d',
    'Cache-control': 'no-cache'
  });
this.http.post('http://127.0.0.1:5000/get_nodes', data, httpOptions);

---

GET请求通常没有主体。如果需要使用GET发送数据，请使用请求参数。如果它需要放在身体里，你可能需要一个t形贴子或一个PUT。谢谢出于好奇，为什么这是使用GET的非标准方式？从我得到的信息中，我应该使用我的GET请求的url传递参数？与我尝试使用的方式传递参数相比，这给了我们什么好处？好处是它尊重HTTP协议：GET请求不应该有一个主体。有关更详细的答案，请参阅。因此，其优点与不驾驶8米大的汽车相同：道路不是为这类汽车设计的，你应该遵守规则。如果OP显示的curl命令起作用，那么服务器可能会在请求体中期待json数据，即使它是高度非标准的

this.http.get('http://127.0.0.1:5000/get_nodes“，数据，httpOptions）；

生成错误“预期1-2个参数，但得到3个。”很抱歉出现了错误。我已经更新了答案。但现在这是一篇帖子，OP要求获取我认为不可能的信息。我再次更新了它，并添加了使用QueryParams发送数据，这是唯一的方法，如果我没有问题的话。两个示例现在都应该这样做。

const data = {
"username" : "jack_list",
"node_name" : "nodeToFind"
};
const httpOptions = {
  params: data,
  headers: new HttpHeaders({
    'Content-Type':  'application/json',
    'Postman-Token': '604243c2-f9da-4f71-b356-a8e31608b45d',
    'Cache-control': 'no-cache'
  });
this.http.get('http://127.0.0.1:5000/get_nodes', httpOptions);

const data = {
"username" : "jack_list",
"node_name" : "nodeToFind"
};
const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json',
    'Postman-Token': '604243c2-f9da-4f71-b356-a8e31608b45d',
    'Cache-control': 'no-cache'
  });
this.http.post('http://127.0.0.1:5000/get_nodes', data, httpOptions);