Angular 2 Http請求承諾返回區域obj而不是實際數據

我試圖快速測試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>

來源

2016-09-24 DFBerry

幾個問題要解決這個問題，調試了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"); 
      } 
     ); 
    });

來源

2016-09-25 05:31:59 DFBerry

在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)); 

    }

來源

2016-09-25 05:51:38 Manish

Angular 2 Http請求承諾返回區域obj而不是實際數據

回答

相關問題