угловой http получить данные

Question

Я просматриваю, как использовать метод get HttpClient, и не вижу, как передать данные в моем запросе 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_of_api"), а что если мне нужно передать json в мой запрос?

Answer 1

Настройка HttpClient:

Перед началом работы с HttpClient в Angular. Вам необходимо импортировать 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, вам нужно ввести его в constructor

constructor(private http: HttpClient) {}

ПОЛУЧИТЬ:

Для get метод может выглядеть примерно так. В этом примере URL-адрес запроса будет выглядеть так: http://127.0.0.1:5000/get_nodes?username="jack_list"&nodename="nodeToFind"

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);

Answer 2

Высокий уровень HttpClient.get() не предлагает параметр тела запроса, потому что GET с телом не является стандартным, вы можете использовать HttpClient.request().Обратите внимание, что вам, возможно, придется также обернуть data в 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
});

update:

Кажется, браузер не позволит вам сделать это.
асинхронный запрос GET с телом из браузера https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET

Так что мой обновленный ответ - это невозможно.

Answer 3

GET-запросы обычно не содержат тела запроса. Вы должны закодировать их в URL.

Например:

JSON-представление запроса "data":

{
    "baz": "qux",
    "wotsit": [
       1,2,'three',
    ]
}

Эквивалентный запрос GET:

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

Я реализовал вспомогательную функцию в своем ответе здесь , которая закодирует ваш сложный объект в серию параметров GET.