来自 Angular 的本地主机请求

Question

你好，我已经在Python的Flask中创建了一个小型端点，并且它正在正常工作。当我从Postman访问它时：

http://127.0.0.1:5000/retrieve_data

它会以json格式检索数据。但是，当我从Angular调用端点时：

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：我对Angular非常菜

- Unknown

---

你使用哪个HTTP客户端？请展示导入。 - Chris

Answer 1

根据Angular的HTTP客户端文档，http.get()的返回值类型为Observable

因此，如果您想获取服务器响应的数据，必须进行订阅，如下所示：

data = {};

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

- Xiwei Wang

Answer 2

非常好的问题，正如其他一些人所建议的那样，似乎你在getAnnounce()方法上缺少了一个.subscribe()。Angular Docs有一个关于observables的指南可以帮助您更好地理解。

我有一些建议，可以改善您在angular方面的体验。利用服务将类似功能分组。例如，在您提供的代码中，您可以将getAnnounce()移动到您创建的新服务中；类似于AnnouncementService。然后，您可以在代码的许多地方使用它。这也有助于测试和以后发现错误，因为您的代码更加分离。

另一件事情是将服务器API地址移动到环境变量中。如果您使用Angular CLI构建了angular项目，默认情况下，您将在src文件夹中找到一个environments文件夹，其中默认有两个文件environment.ts和environment.prod.ts。您可以在.ts文件中的任何位置访问此JSON对象，并且当您为产品与本地构建代码时，它可以更改值为您设置的任何内容。在您的情况下，您应该将本地API地址放在这里http://127.0.0.1:5000。

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

现在您可以轻松访问它，并且有一个更改点，如果您改变端口号或将API放在真实服务器上。

导入{环境}从'./environments/environment';

/*请记住导入环境文件的非生产版本，当构建生产或非生产版本时，Angular会自动切换它们。*/

希望这能帮助您编程，祝你好运！

- Jessy

Answer 3

您需要订阅您的getAnnounce函数。

例如，您可以尝试：

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

或者直接在你的构造函数 / ngOnInit中：

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

- Johan Rin

---

我认为执行 data = this.getAnnounce().subscribe(); 会将 data 设置为订阅而不是返回的数据。这是您可以存储已订阅内容的引用以便稍后取消订阅的方法。有关订阅的更多信息，请参见 https://rxjs-dev.firebaseapp.com/guide/subscription :) - Jessy