Uncaught (in promise): Response with status: 0 for URL: null

Question

I am trying to use the ionic framework and parse json from an API I created, then populate the html in my ionic app with it. When I go to my all-patients page I get the following error:

Error: Uncaught (in promise): Response with status: 0  for URL: null
    at c (http://130.215.45.72:8102/build/polyfills.js:3:19752)
    at c (http://130.215.45.72:8102/build/polyfills.js:3:19461)
    at http://130.215.45.72:8102/build/polyfills.js:3:20233

My all-patients.ts:

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';
import { RestService } from '../../providers/rest-service/rest-service';

@Component({
  selector: 'page-all-patients',
  templateUrl: 'all-patients.html',
  providers: [RestService]
})
export class AllPatientsPage {
  public data: any;

  constructor(public navCtrl: NavController, public restService: RestService){
    this.loadPeople();
  }

  loadPeople(){
    this.restService.load()
    .then(data => {
      this.data = data;
    });
  }
}

rest-services.ts:

import { Http } from '@angular/http';
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';

/*
  Generated class for the RestServiceProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/

@Injectable()
export class RestService {

  constructor(public http: Http) {
    console.log('Hello RestServiceProvider Provider');
  }

  load() {
  if (this.data) {
    // already loaded data
    return Promise.resolve(this.data);
  }

  // don't have the data yet
  return new Promise(resolve => {
    this.http.get('url')
      .map(res => res.json())
      .subscribe(data => {
         this.data = data.results;
         resolve(this.data);
       });
  });
}
}

When I go to the page that the error is on it crashes altogether, but nothing is printed out in the console. I am unsure if this is an error with the parsing of the data in the API or something else. I have go to the page for the api manually and the data shows up as expected.

Possible duplicate of [Angular 2: EXCEPTION: Response with status: 0 for URL: null](https://stackoverflow.com/questions/39520209/angular-2-exception-response-with-status-0-for-url-null) — Obsidian Age, Nov 26 '17 at 21:37
@ObsidianAge my endpoint for my API i built on the same server, just different port. Is it still possible that it could be a CORS issue? — Drew, Nov 27 '17 at 01:21

Ricardo Ferreira · Answer 1 · 2017-11-26T23:14:18.290

2

I guess that obsidian age already gave you the possible core issue, but nevertheless you should handle promises rejection no matter what. So in that case you should change your code accordingly:

My all-patients.ts:

...
loadPeople(){
  this.restService.load()
  .then(data => {
    this.data = data;
  })
  .catch(e => console.error); // change this line according to your debugging/logging needs
}
...

rest-services.ts:

...
import 'rxjs/add/operator/toPromise';
...
return this.http.get('url')
  .map(res => res.json())
  .subscribe(data => {
    this.data = data.results;
    return this.data
  })
  .toPromise();
...

Hopefully this clarifies the actual error that you reported but also give you more insight on what is going on as you won't be loosing any important information about the error(s).

edited Nov 26 '17 at 23:14

answered Nov 26 '17 at 22:01

Ricardo Ferreira

186
1
9

Avoid the [`Promise` constructor antipattern](https://stackoverflow.com/q/23803743/1048572?What-is-the-promise-construction-antipattern-and-how-to-avoid-it) and rather use `.toPromise()`. – Bergi Nov 26 '17 at 22:40
@Bergi can you explain why? As far as I can see avoiding a promise constructor will not allow the `load()` method to properly handle the data object, leading to have to do all the work on the upper `.then` call (after `this.restService.load()`). – Ricardo Ferreira Nov 26 '17 at 23:00
What do you mean by "not allow the method to properly handle the data object"? Afaik `http.get` returns an Observable, which can easily be consumed as a promise without using a `new Promise` wrapper. – Bergi Nov 26 '17 at 23:04
@Bergi sorry you're right, I didn't read the code correctly initially. I'll update my response according to your comment. I think now looks better, right? – Ricardo Ferreira Nov 26 '17 at 23:07
OK I'm not that familiar with observables actually I think you still need an explicit `.toPromise()` there. But yes, that's the idea. – Bergi Nov 26 '17 at 23:11
Yeah me neither, but looking at some documentation it seems you're right, a `.toPromise()` call is required. Thanks for your help! – Ricardo Ferreira Nov 26 '17 at 23:15

Uncaught (in promise): Response with status: 0 for URL: null

1 Answers1

Linked