javascript - Angular - 如何模拟 HTTP 请求？

Question

我有一个调用真实 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)数组？

PLUNKER

Answer 1

就我个人而言，我会将 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