我有一个调用真实 HTTP 请求的简单代码:
@Component({
selector: 'my-app',
template: `
<div>
<h2>Hello {{person?.id}}</h2>
</div>
`,
})
export class App {
name:string;
constructor(public http: Http) {
this.http.get('https://jsonplaceholder.typicode.com/posts/1')
.map(res => res.json()).subscribe(res => {
this.person = res;
},()=>{},()=>console.log('complete'));
}
}
但现在我想模拟请求,以便它从包含以下内容的文件中获取数据:
export arrFakeData:any = {id:1};
我不想使用服务。我想模拟请求。
一些示例展示了如何使用 XHRBackend
,一些展示了如何使用 extend HTTP 类,但他们没有说明我如何强制检索数据
我知道我应该使用
providers:[ /*{ provide: XHRBackend, useClass: MockBackend }*/]
但是我不知道怎么办。
问题:
我如何模拟 http 请求并从 arrFakeData
返回(对于 GET)数组?
最佳答案
就我个人而言,我会将 this.http.get
方法调用替换为 Observable.of
,这样您就可以继续针对同一接口(interface)(Observable
) 而不会影响组件的开发。
但是,如果你真的想这样做,那么你将不得不创建一个服务,将一个监听器附加到所有传入的请求,并使用 @angular/http/testing 提供的工具返回一个适当的模拟响应
模块。
服务看起来像这样:
import {Injectable} from "@angular/core";
import {MockBackend, MockConnection} from "@angular/http/testing";
import {arrFakeData} from "./fakeData";
import {ResponseOptions, Response} from "@angular/http";
@Injectable()
export class MockBackendService {
constructor(
private backend: MockBackend
) {}
start(): void {
this.backend.connections.subscribe((c: MockConnection) => {
const URL = "https://jsonplaceholder.typicode.com/posts/1";
if (c.request.url === URL) { // You can also check the method
c.mockRespond(new Response(new ResponseOptions({
body: JSON.stringify(arrFakeData)
})));
}
});
}
}
完成此操作后,您需要注册所有服务并确保 Http
模块使用 MockBackend
而不是 XHRBackend
.
@NgModule({
imports: [BrowserModule, HttpModule,],
declarations: [App],
providers: [
MockBackend,
MockBackendService,
BaseRequestOptions,
{
provide: Http,
deps: [MockBackend, BaseRequestOptions],
useFactory: (backend: MockBackend, options: BaseRequestOptions) => {
return new Http(backend, options);
}
}
],
bootstrap: [App]
})
export class AppModule {
}
最后但同样重要的是,您必须实际调用 start
方法,这将确保您实际从 MockBackend
接收模拟数据。在您的 AppComponent
中,您可以执行以下操作。
constructor(public http: Http, public mockBackendService: MockBackendService) {
this.mockBackendService.start();
this.http.get('https://jsonplaceholder.typicode.com/posts/1')
.map(res => res.json())
.subscribe(res => {
this.person = res;
});
}
希望对您有所帮助!有关完整示例,请参阅 plunker。 https://plnkr.co/edit/h111to5PxbI97FIyKGJZ?p=preview
关于javascript - Angular - 如何模拟 HTTP 请求?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44998050/