Angular 2 Http Request to Promise 返回 zone obj 而不是实际数据

Question

I'm trying to have quick test of ng 2 http to return real data. I know there is a better/longer way to do it. This is meant to be quick and simple, not best practices.

I know the server returns data because I can see it in another terminal window. The json is very simple {a:b} because it is just a proof of concept.

I don't care if it is a promise or an observable as long as it hangs around to return the real data right there -- so I can figure out that it actually works -- not that I want to write production code that way.

//app.data.service.ts
import { Injectable }     from '@angular/core';
import { Http, Response} from '@angular/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/toPromise';

@Injectable() export class DataService {
    constructor(private http: Http) { 
    }
    public getItems(){
       return this.http.get('http://localhost:8090/data/config.txt')
           .toPromise()
           .then(data => Promise.resolve(data.json()));
    }
}

// app.data.service.spec.ts
/* tslint:disable:no-unused-variable */
import { AppComponent } from './app.component';
import { TestBed, inject, fakeAsync } from '@angular/core/testing';
import { MockBackend, MockConnection } from '@angular/http/testing';
import { By } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { DataService } from './app.data.service';
describe('DataService', function () {
  let dataService: DataService;
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpModule],
      declarations: [AppComponent],
      providers: [DataService]
    });
    dataService = TestBed.get(DataService);
  });
  it('should be instantiated by the testbed', () => {
    expect(dataService).toBeDefined();
  });
  it('should return get', () => {
    let data = dataService.getItems();
    console.log('test data= ' + data);
    console.log('test string(data)= ' + JSON.stringify(data));
  });
});

//tail end of tests.html
      <tr class="system-out">
        <td colspan="3"><strong>System output:</strong><br />Chrome 53.0.2785 (Mac OS X 10.11.6) LOG: 'WARNING: System.import could not load "systemjs.config.extras.js"; continuing without it.'
<br />Chrome 53.0.2785 (Mac OS X 10.11.6) LOG: Error{originalErr: Error{}}
<br />Chrome 53.0.2785 (Mac OS X 10.11.6) LOG: 'test data= [object Object]'
<br />Chrome 53.0.2785 (Mac OS X 10.11.6) LOG: 'test string(data)= {"__zone_symbol__state":null,"__zone_symbol__value":[]}'
</td>

Answer 1

In app.data.service.ts

public getItems(){
   return this.http.get("http://......")
       .toPromise()
       .then(res => res.json())
       .catch(this.handleError);
}

In your component.ts call this method/subscribe to it

  data:any;

  ngOnInit() {
    this.appService.getItems()
        .then(data => console.log(data));

  }

Answer 2

Several issues to fix this, debugging the chrome browser that the karma test popped up helped -

• server wasn't returning CORS headers
• observable/subscribe code was not working
• json data was {a:b}, when I changed it to {"a":"b"} - the result.json() worked

For issue #2 the following is the code for getItems:

//app.data.service.ts
getItems(url:string) : Observable<Response> {
        return this._http.get(url)
            .map((response: Response) => {
                return response;     
            }).catch(this.handleError);
};

//app.data.service.spec.ts
it('should return {a:b}', () => {

    let data: string;

    dataService.getItems("http://localhost:8090/data/config.json")
           .subscribe(
            (response) => {
                //Here you can map the response to a type
                console.log("test getItems returned");
                data = JSON.stringify(response.json());
                console.log("data = " + data);
            },
            (err) => {
                //Here you can catch the error
                console.log("test getItems returned err");
            }
        );
  });