Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/425.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Angular 2 Http Promise请求返回区域obj,而不是实际数据_Javascript_Angularjs_Unit Testing_Http_Promise - Fatal编程技术网

Javascript Angular 2 Http Promise请求返回区域obj,而不是实际数据

Javascript Angular 2 Http Promise请求返回区域obj,而不是实际数据,javascript,angularjs,unit-testing,http,promise,Javascript,Angularjs,Unit Testing,Http,Promise,我正在尝试对NG2HTTP进行快速测试,以返回真实数据。我知道有更好/更长的方法可以做到这一点。这意味着快速简单,而不是最佳实践 我知道服务器返回数据,因为我可以在另一个终端窗口中看到它。json非常简单{a:b},因为它只是概念的证明 我不在乎它是一个承诺还是一个可观察的,只要它挂在那里返回真实的数据——这样我就可以知道它实际上是有效的——而不是我想用那种方式编写生产代码 //app.data.service.ts import { Injectable } from '@angula

我正在尝试对NG2HTTP进行快速测试,以返回真实数据。我知道有更好/更长的方法可以做到这一点。这意味着快速简单,而不是最佳实践

我知道服务器返回数据,因为我可以在另一个终端窗口中看到它。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>
//app.data.service.ts
从“@angular/core”导入{Injectable};
从'@angular/Http'导入{Http,Response};
从'rxjs/Rx'导入{Observable};
导入“rxjs/add/operator/toPromise”;
@Injectable()导出类数据服务{
构造函数(专用http:http){
}
公共物品(){
返回此.http.get('http://localhost:8090/data/config.txt')
.toPromise()
.then(data=>Promise.resolve(data.json());
}
}
//app.data.service.spec.ts
/*tslint:禁用:没有未使用的变量*/
从“./app.component”导入{AppComponent};
从“@angular/core/testing”导入{TestBed,inject,fakeAsync};
从'@angular/http/testing'导入{MockBackend,MockConnection};
从“@angular/platform browser”导入{By}”;
从'@angular/http'导入{HttpModule};
从“./app.data.service”导入{DataService};
描述('DataService',函数(){
让数据服务:数据服务;
在每个之前(()=>{
TestBed.configureTestingModule({
导入:[HttpModule],
声明:[AppComponent],
提供者:[数据服务]
});
dataService=TestBed.get(dataService);
});
它('应该由测试床实例化',()=>{
expect(dataService).toBeDefined();
});
它('应该返回get',()=>{
让data=dataService.getItems();
log('测试数据='+数据);
log('teststring(data)='+JSON.stringify(data));
});
});
//tests.html的结尾
系统输出:
Chrome 53.0.2785(Mac OS X 10.11.6)日志:“警告:System.import无法加载”systemjs.config.extras.js”;没有它就继续。” chrome53.0.2785(macosx10.11.6)日志:错误{originalErr:Error{} Chrome 53.0.2785(Mac OS X 10.11.6)日志:“测试数据=[对象]” Chrome 53.0.2785(Mac OS X 10.11.6)日志:“测试字符串(数据)={”\uuuuu区域\uu符号\uuuuu状态:null,“\uuuuuu区域\uu符号\uuu值”:[]}”
为了解决这个问题,调试了chrome浏览器,karma测试弹出帮助-

  • 服务器没有返回CORS头
  • 可观察/订阅代码为 不起作用
  • json数据是{a:b},当我将其更改为{“a”:“b”}时 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");
            }
        );
  });
//app.data.service.ts
getItems(url:string):可观察{
返回此。\u http.get(url)
.map((响应:响应)=>{
返回响应;
}).接住(这个.把手错误);
};
//app.data.service.spec.ts
它('应该返回{a:b}',()=>{
let数据:字符串;
dataService.getItems(“http://localhost:8090/data/config.json")
.订阅(
(回应)=>{
//在这里,您可以将响应映射到类型
log(“返回的测试getItems”);
data=JSON.stringify(response.JSON());
console.log(“data=“+data”);
},
(错误)=>{
//在这里您可以捕捉到错误
log(“TestGetItems返回错误”);
}
);
});
在app.data.service.ts中

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

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

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

  }