Question

我正在尝试按照this的灵感设置以下模拟环境。

environment.mock.ts

export const environment = {
  production: false,
  PRODUCT_LIST : 'http://localhost:4200/app/mock-json/products.json',
  SAVE_CART : 'http://localhost:4200/app/mock-json/cart.json'
};

environment.ts

export const environment = {
  production: false,
  PRODUCT_LIST : 'http://x.x.x.x:9000/service/products',
  SAVE_CART : 'http://x.x.x.x:9000/service/cart'
};

服务方法

getCartData (request: string):Promise<Cart[]>{
    return this.http.post(environment.SAVE_CART, request)
                .toPromise()
                .then(response => {
                        .....
                })
                .catch(this.handleError);
  }

当我使用ng serve运行时，原始服务端点的一切运行正常。

但是当我使用ng serve --environment=mock时，由于POST调用，Save Cart功能无效。（所有GET电话都正常工作）

实际上我需要以这样的方式设置结构，

使用ng serve。我可以切换到使用原始服务端点的原始实现。
使用ng serve --environment=mock我可以切换到将使用JSON文件的模拟实现。
在切换时我不需要触摸任何代码。对于模拟实现，由于我的JSON文件是硬编码的，因此将始终提供一组预定义数据。

注意： 我已经更新了主要问题，以澄清我正在寻找的背景。我在下面的Plunker中遇到了同样的错误（请查看控制台日志）。但请注意：这个plunker没有实现环境，所以解决这个问题可能无法解决我的问题。

Answer 1

你的json格格不入。检查更新的plunker链接。

plunker here

mymodel.json：

{
  "name" : "Test",
  "value" : "Test"
}

为了发帖，您必须使用将要接收帖子请求的Mockbackend。请检查此answer

Answer 2

我已经能够用以下想法弄明白了。

在模拟环境使用时，如果我们可以继承并覆盖Angular2 Http帖子使用get方法的方法

以下代码解决了我的问题。

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import { RequestOptionsArgs, RequestOptions } from "@angular/http";
import { ConnectionBackend, Http, Request, Response, Headers } from "@angular/http";

@Injectable()
export class MockHttp  extends Http {

    constructor(backend: ConnectionBackend,
        defaultOptions: RequestOptions) {
        super(backend, defaultOptions);
    }

    post(url: string, body: any, options?: RequestOptionsArgs): Observable<Response> {
        console.log('Mock Http POST...');
        return super.get(url, options).catch(err => {
            console.log(err);
            if (err.status === 404) {
                console.log('404 error');
                return Observable.throw(err);
            }
        });
    }
}

我在AppModule中使用了以下提供程序

    { 
        provide: Http, 
        useFactory: (
            backend: XHRBackend,
            defaultOptions: RequestOptions) => {
                if(environment.MOCK){
                    return new MockHttp(backend, defaultOptions)
                }
                else {
                    return new Http(backend, defaultOptions);
                }
        },
        deps: [XHRBackend, RequestOptions]
    }

并在新的环境变量 MOCK 中引入。

export const environment = {
  production: false,
  MOCK : true,
  PRODUCT_LIST : .....
};

使用JSON文件

2 个答案: