Запрос локального хоста от angular

Question

Здравствуйте, я создал мини-конечную точку во Flask на python, и она работает хорошо.Когда я получаю к нему доступ от Почтальона:

http://127.0.0.1:5000/retrieve_data

, он получает данные в формате JSON.Но когда я называю конечную точку с углового:

export class HomeComponent implements OnInit {
  title = 'angular-demo';
  data = this.getAnnounce();

  getAnnounce() {
    return this.http.get('http://127.0.0.1:5000/retrieve_data');
  }

  constructor(private http: HttpClient) {

  }

Фактический результат:

    {
        "_isScalar": false,
        "source": {
            "_isScalar": false,
            "source": {
                "_isScalar": false,
                "source": {
                    "_isScalar": true,
                    "value": {
                        "url": "http://127.0.0.1:5000/retrieve_data",
                        "body": null,
                        "reportProgress": false,
                        "withCredentials": false,
                        "responseType": "json",
                        "method": "GET",
                        "headers": {
                            "normalizedNames": {},
                            "lazyUp
Canceldate": null,
                            "headers": {}
                        },
                        "params": {
                            "updates": null,
                            "cloneFrom": null,
                            "encoder": {},
                            "map": null
                        },
                        "urlWithParams": "http://127.0.0.1:5000/retrieve_data"
                    }
                },
                "operator": {
                    "concurrent": 1
                }
            },
            "operator": {}
        },
        "operator": {}
    }

PS: я очень нуб в anuglar

Answer 1

Вы должны подписаться на вашу функцию getAnnounce.

Например, вы можете попробовать:

data = this.getAnnounce().subscribe();

Или непосредственно на вашем constructor / ngOnInit:

ngOnInit() {
   this.getAnnounce().subscribe(
     data => this.data = data
   );
}

Answer 2

Отличный вопрос, и, как некоторые другие предложили, может показаться, что вы пропускаете .subscribe() в вашем getAnnounce() методе. В Angular Docs есть руководство по наблюдаемым , которое поможет вам лучше понять.

У меня есть еще несколько советов по улучшению вашего опыта работы с Angular.Воспользуйтесь сервисами для группировки похожих функций.Например, в предоставленном вами коде вы можете переместить getAnnounce() на новый созданный вами сервис;что-то вроде AnnouncementService.Тогда вы можете использовать это во многих местах вашего кода.это также помогает проверить его и позже обнаруживать ошибки, поскольку ваш код более разделен.

Еще одна вещь, которую вы можете сделать, - это перенести адрес API сервера в переменные окружения.По умолчанию, если вы создали свой угловой проект с использованием Angular CLI , вы найдете в нашей папке src папку environments с двумя файлами по умолчанию environment.ts и environment.prod.ts.вы можете получить доступ к этому объекту JSON в любом месте ваших файлов .ts, и когда вы создаете свой код для продукта против локально, он может изменить значения на то, что вы когда-либо устанавливали.В вашем случае вы бы поместили туда свой локальный адрес API http://127.0.0.1:5000.

export const environment = {
  production: false,
  api: 'http://127.0.0.1:5000'
};

Теперь вы можете легко получить к этому доступ и иметь один пункт для изменения, если вы когда-нибудь измените свой номер порта или ваш API будет вреальный сервер.

import {environment} из './environments/environment';

/ * не забудьте импортировать не-prod версию файла среды, angular знает, как переключитьсяих автоматически при сборке для производства или нет.* /

Надеюсь, это поможет вам с кодированием, удачи!

Answer 3

Из документа http-клиента angular тип возвращаемого значения http.get() равен Observable

Поэтому, если вы хотите получить данные, на которые отвечает ваш сервер, вы должныподписаться так:

data = {};

getAnnounce() {
    this.http.get('http://127.0.0.1:5000/retrieve_data')
        .subscribe(result => this.data = result);
}