离子 2 http.get() 问题

Question

我尝试用这两种方法进行 http.get() 调用。

第一个：

getResults(){
    return this.http.get('http://localhost/api.php')
    .toPromise()
    .then( data => data.json() );
}

显示错误：

3     122412   error    EXCEPTION: Uncaught (in promise): Response with status:0  for URL: null
4     122413   error    ORIGINAL STACKTRACE:
5     122413   error    Error: Uncaught (in promise): Response with status: 0  for URL: null
..........

第二个：

getResults(){
    return new Promise((resolve, reject) => {
      this.http.get('http://localhost/api.php')
        .map(res => res.json())
        .subscribe(data => {
          resolve(data);
        }, (err) => {
          reject(err);
        });
    });
}

显示错误：

2     925052   error    EXCEPTION: Uncaught (in promise): Response with status:0  for URL: null
3     925052   error    ORIGINAL STACKTRACE:
4     925053   error    Error: Uncaught (in promise): Response with status: 0  for URL: null
.......

我应该使用哪种方法，可能是什么问题？

Answer 1

Response with status:0 for URL: null

这似乎与 CORS 问题有关...请检查您的后端代码是否启用了 CORS。

Which way should i use?

http.get() return 是一个 Observable，所以使用它的一种方法是

getResults(){
  this.http.get('http://localhost/api.php')
           .map(res => res.json());
}

然后当你调用那个方法时，你需要这样做：

this.yourService.getResults().subscribe((data) => { console.log(data); });

如果你需要return一个承诺，那么你可以这样做：

getResults(){
  this.http.get('http://localhost/api.php')
           .map(res => res.json())
           .toPromise();
}

然后像这样使用它

this.yourService.getResults().then((data) => { console.log(data); });

Answer 2

看起来这是一个 CORS 问题。通常您必须将所有允许访问您的 API 的域列入白名单。但是因为您正在编写一个 Ionic 应用程序，一旦您构建了您的应用程序并运行它在您的设备上，这就不再重要了。这就是为什么我建议安装允许您禁用 CORS 的浏览器插件。

你的两个代码片段都做同样的事情。如果您不想使用可观察对象，我可能会选择第一个选项：

getResults() {
    return this.http.get('http://localhost/api.php')
                    .toPromise();
}

然后：

this.service.getResults().then(data => {
    // Do something with data
});

Answer 3

如果您在浏览器中进行测试并遇到 CORS 问题，ionic 有解决方案您应该在 ionic.config 中放置类似的内容，当运行 ionic serve 时，这将为您代理 API 而无需 CORS。

{
  // ...
  "proxies": [{
    "path": "/api",
    "proxyUrl": "http://xxxxxxxxx"
  }]
}

更多信息在这里：http://blog.ionic.io/handling-cors-issues-in-ionic/

离子 2 http.get() 问题

Ionic 2 http.get() issue

rxjs

typescript

ionic2

ionic3

angular