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 ，一些示例显示如何扩展 HTTP类，但他们没有说我如何强制数据检索

我知道我应该用

  providers:[ /*{ provide: XHRBackend, useClass: MockBackend }*/]

但我不知道怎么做。

题：

如何模拟http请求并从arrFakeData返回（用于GET）数组？

PLUNKER

Answer 1

就个人而言，我将使用Observable.of替换this.http.get方法调用，以便您可以继续针对相同的接口（ 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

Answer 2

您可以将http端点设为包含所需数据的JSON文件。 这正是我们上一次谷歌项目的方式，以及我如何在自己的项目中做到这一点。 我们没有打扰模拟http服务等等，我们只是指向一个json文件并将其他所有内容保持不变。