Question

我检查了很多文章和答案，但似乎找不到为我的方法模拟HTTP Requests的正确方法。我想独立于frontend测试backend应用程序。这是我使用的方法的类型：

 private getProfile() {
    this.http
      .get('go/profile/get', {withCredentials: true})
      .subscribe((profile: Profile) => {
        this.user.profile = profile;
        this.updateLineMsgs();
      });
  }

有什么建议吗？

Answer 1

您可以将响应json放在资产文件夹中并进行测试。

例如，在assets / json下创建一个test.json文件，并相应地更改您的网址

private getProfile() {
    this.http
      .get('assets/json/test.json', {withCredentials: true})
      .subscribe((profile: Profile) => {
        this.user.profile = profile;
        this.updateLineMsgs();
      });
  }

您还可以根据环境变量配置要选择的url，以便在prod中构建实际的url，在dev中构建虚拟的url。

Answer 2

如果我正确理解了您的问题，那么您想在后端之前创建前端服务，但是您仍然希望使用Promise / Observables。您可以为此使用of

：

import { of } from 'rxjs';
//emits any number of provided values in sequence
const source = of(1, 2, 3, 4, 5);
//output: 1,2,3,4,5
const subscribe = source.subscribe(val => console.log(val));

来自https://www.learnrxjs.io/operators/creation/of.html

Answer 3

为了伪造后端服务器响应，您需要创建一个实现HttpInterceptor接口的服务

https://medium.com/@lanoTechno/intro-to-angular-http-interceptors-and-how-to-create-backendless-app-with-them-3593f6552b3a

Answer 4

通常，我使用HttpClientTestingModule模拟我的Http请求：

import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';

export class TestService {
    constructor(private http: HttpClient) {}
}

describe('AppInterceptor', () => {
    let service: TestService;
    let httpMock: HttpTestingController;

    beforeEach(() => {
        TestBed.configureTestingModule({
            imports: [HttpClientTestingModule],
            providers: [
                TestService
            ]
        });
        service = TestBed.get(TestService);
        httpMock = TestBed.get(HttpTestingController);
    });

....
const httpRequest = httpMock.expectOne('any-url');

Answer 5

JSON-Server：https://www.npmjs.com/package/json-server

它将为您提供一个模拟服务器，该服务器具有.json文件中的所有其余API（GET，POST，PUT，DELETE等）...

Answer 6

您始终可以自己创建一个模拟方法，并模拟您期望从后端获得的响应。在您的示例中，可能是

 public static mockGetProfile(){
    const response = JSON.parse(`
     "name": "abc",
     "active": true,
     ...all other json fields that you want
     `);

    let obs = new Observable((subscriber) => {
        setTimeout(()=>{
            subscriber.next(response);
            subscriber.complete();
        }, 3000);
    });
    return obs;
}

以上可观察对象将在3秒钟或您定义的任何时间段后完成，以某种方式模拟来自后端服务器的响应，这需要一些时间才能使用。

如何在Angular中模拟HTTP请求？

6 个答案: