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

Я просматриваю, как использовать метод get HttpClient, и я не понимаю, как я могу передавать данные в своем запросе на получение. Я только вижу, как ПОЛУЧИТЬ 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 в свой запрос?

Запрос GET обычно не имеет тела. Если вам нужно отправить данные с помощью GET, используйте параметры запроса. Если это должно быть в теле, вы, вероятно, захотите t POST или PUT.

JB Nizet 11.03.2019 23:42

OK. Спасибо. из любопытства, почему это нестандартный способ использования GET? Из того, что я получаю, я должен передать параметр, используя URL-адрес моего запроса GET? Какое преимущество это дает нам по сравнению с использованием параметра в том виде, в котором я пытаюсь это сделать?

matt 12.03.2019 21:42

Преимущество в том, что он соблюдает протокол http: запросы GET не должны иметь тела. См. stackoverflow.com/questions/978061/http-get-with-request-bod‌​y для более подробного ответа. Так что преимущество такое же, как, скажем, не ездить на восьмиметровой машине: дороги не рассчитаны на такие машины, а правила должны соблюдаться.

JB Nizet 12.03.2019 21:56
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
2
3
779
3

Ответы 3

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

Например:

JSON-представление запроса «данные»:

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

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

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

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

Если команда curl, которую показывает OP, работает, сервер может ожидать данные json в теле запроса, даже если они очень нестандартны.

William Lohan 11.03.2019 23:43

Высокий уровень 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
});

Обновить:

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

Итак, мой обновленный ответ: это невозможно.

Настройка HTTP-клиента:

Прежде чем вы начнете работать с 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);
this.http.get('http://127.0.0.1:5000/get_nodes', data, httpOptions); выдает ошибку "Ожидали 1-2 аргумента, а получили 3".
William Lohan 12.03.2019 00:01

Мне жаль, что есть ошибка. Я обновил ответ.

Josef Katič 12.03.2019 00:02

но теперь это POST, OP запрашивает GET, что я не думаю, что это возможно.

William Lohan 12.03.2019 00:16

Я снова обновил его и добавил отправку данных с помощью QueryParams, это единственный способ, если я в порядке. Оба примера теперь должны делать то же самое.

Josef Katič 12.03.2019 00:17

Другие вопросы по теме