使用新的HttpClient进行Angular 4后端开发

Question

在从Http切换到HttpClient之前,我使用MockBacked进行了无后端设置.我有一个名为mock-backend.provider.ts的文件,看起来像:

import {
    Http, BaseRequestOptions, Response, ResponseOptions,
    RequestMethod, XHRBackend, RequestOptions
} from '@angular/http';
import { MockBackend, MockConnection } from '@angular/http/testing';

import { subscribers } from '../jsons/subscribers.json';
import { TokenService } from '../../authentication/token.service';

export function mockBackendFactory(backend: MockBackend, options: BaseRequestOptions,
    realBackend: XHRBackend) {

    // configure fake backend
    backend.connections.subscribe((connection: MockConnection) => {
        // wrap in timeout to simulate server api call
        setTimeout(() => {
            let url = connection.request.url;
            let method = connection.request.method;

                if (url.endsWith('/demographic/subscriber') && method === RequestMethod.Get) {
        let tokenService: TokenService = new TokenService();

        // get username from token
        let username = tokenService.getUsername();

        // find if any subscriber matches login credentials
        let filteredSubscriber = subscribers.filter(subscriber => {
            return subscriber.username === username;
        });

        // check to see if the user exists
        if (filteredSubscriber.length) {
            let subscriber = filteredSubscriber[0];
            connection.mockRespond(new Response(new ResponseOptions({
                status: 200,
                body: {
                    "subscriber": {
                        "id": subscriber.id,
                        "firstName": subscriber.firstName,
                        "lastName": subscriber.lastName,
                        "username": subscriber.username,
                        "preferredEmail": subscriber.preferredEmail
                    }
                }
            })));
        } else {
            // else return 400 bad request
            connection.mockError(new Error('Unauthorized'));
        }

        return;

        }, 500);

    });

    return new Http(backend, options);
}

export let MockBackendProvider = {
    provide: Http,
    useFactory: mockBackendFactory,
    deps: [MockBackend, BaseRequestOptions, XHRBackend]
};

在我的core.module.ts文件中,我将把MockBackendProvider放在"providers"部分.

这将允许我非常快速地模拟json响应,并且我已经设置为基于环境变量切换此提供者.

当我切换到使用HttpClient时...它不再直接使用后端参数,因为它使用HttpHandler确实占用了后端,但我似乎无法让它接受MockBackend.

我不相信我当前的设置可以使用HttpClient完成,我很好,但我不知道如何使用新模块设置后端流程.

任何和所有的帮助将非常感激!如果您需要查看更多代码,请告诉我们.

Answer 1

我通过使用拦截器解决了这个问题.

我已经为任何想看看我如何工作的人嘲笑了一个例子:https: //github.com/GetDaStick/backendless-example/blob/master/src/app/core/http/mock-http.interceptor .TS