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

【问题标题】：Angular 4 backendless development with the new HttpClientAngular 4 使用新的 HttpClient 进行后端开发
【发布时间】：2017-08-18 03:51:12
【问题描述】：

在从 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 放在“提供者”部分。

这将允许我非常快速地模拟 json 响应，并且我可以设置它以根据环境变量切换此提供程序。

当我切换到使用 HttpClient...它不再直接接受后端参数，因为它使用了接受后端的 HttpHandler，但我似乎无法让它接受 MockBackend。

我不相信我当前的设置可以使用 HttpClient 来完成，我可以接受，但我不知道如何使用新模块设置后端流程。

我们将非常感谢任何和所有帮助！如果您需要查看更多代码，请告诉我。

【问题讨论】：

你好，肖恩，你在这方面有什么进展吗？我只找到了如何在测试中做到这一点的资源，但没有找到如何在后端进行的。理想情况下，我想使用enviroment 设置在生产、开发模拟和开发与后端之间切换。
@skofgar 我刚刚发布了我的解决方案作为答案。查看我的示例。我很乐意回答有关我的设置的任何问题。
谢谢肖恩！我也开始研究拦截器，但没有你做的那么远。感谢您提供解决方案！

标签： angular

【解决方案1】：

我已经通过使用拦截器解决了这个问题。

我为任何想了解我的工作原理的人模拟了一个示例： https://github.com/GetDaStick/backendless-example/blob/master/src/app/core/http/mock-http.interceptor.ts

【讨论】：

谢谢！你的例子很有帮助！希望我能投票两次