如何在Angular中模拟HTTP请求？

我查阅了很多文章和答案，但似乎没有找到正确的方法来模拟我的方法的HTTP请求。我想独立于后端测试我的前端应用程序。以下是我使用的方法类型：

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

---

有什么建议吗？

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

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

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

---

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

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

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

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

---

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

如果我正确理解您的问题，您希望在后端之前创建前端服务，但仍然希望使用承诺/可观察项。 您可以使用的用于：

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));

---

从

如果我正确理解您的问题，您希望在后端之前创建前端服务，但您仍然希望使用承诺/可观察。 您可以使用的用于：

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));

---

从

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

---

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

---

通常我用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');

---

通常我用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');

:

它将为您提供一个模拟服务器，其中包含.json文件中的allGET、POST、PUT、DELETE等rest API…

:

---

它将为您提供一个模拟服务器，其中包含.json文件中的allGET、POST、PUT、DELETE等rest API…

您始终可以自己创建一个模拟方法，并模拟您希望从后端得到的响应。在你的例子中，它可能是

公共静态mockGetProfile{ const response=JSON.parse` 姓名：abc， 主动：对， …您需要的所有其他json字段 `; 让obs=新的Observablesubscriber=>{ 设置超时=>{ subscriber.nextresponse； 订阅者。完成； }, 3000; }; 返回obs； }

---

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

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

公共静态mockGetProfile{ const response=JSON.parse` 姓名：abc， 主动：对， …您需要的所有其他json字段 `; 让obs=新的Observablesubscriber=>{ 设置超时=>{ subscriber.nextresponse； 订阅者。完成； }, 3000; }; 返回obs； } 上述观察将在3秒后或您定义的任何时间段后完成，以某种方式模拟后端服务器的响应，该响应需要一些时间才能可用