2016-09-24 87 views
1

我试图快速测试ng 2 http以返回实际数据。我知道有一个更好/更长的方法来做到这一点。这意味着快速简单,而不是最佳实践。Angular 2 Http请求承诺返回区域obj而不是实际数据

我知道服务器返回数据,因为我可以在另一个终端窗口中看到它。 json非常简单{a:b},因为它仅仅是一个概念证明。

我不在乎它是一个承诺还是一个可观察的东西,只要它挂在那里就可以返回真实的数据 - 所以我可以发现它实际上是有效的 - 并不是我要编写生产代码就是这样。

//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> 

回答

0

几个问题要解决这个问题,调试了Chrome浏览器的业力测试弹出帮助 -

  • 服务器未返回CORS头
  • 可观察/订阅代码为 不工作
  • json数据是{a:b},当我将其更改为{“a”:“b”}时 result.json()已工作

问题#2以下是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"); 
      } 
     ); 
    }); 
1

在app.data.service.ts

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

在你component.ts调用此方法/订阅它

data:any; 

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

    } 
相关问题