前端模拟接口返回数据

2021-11-30

字数统计: 1.1k字 | 阅读时长≈ 4分

Mock.js 是一个用于模拟数据的 JavaScript 库，常常被用于前端开发和单元测试。在进行 Angular 项目开发时，经常需要与后端 API 进行交互，但是由于后端开发进度可能不同步，或者接口还未完成，需要模拟数据来进行前端开发或者测试。这个时候，我们可以使用 Mock.js 来解决这个问题。

为什么使用 Mock.js

解耦：在前端开发过程中，我们往往需要依赖后端接口进行开发，但是后端接口可能还没有开发完成，或者有一些状态码（如 404、500）无法通过正常访问。如果不使用 Mock.js 模拟数据，那么就会出现很多问题，开发工作量也会增加。使用 Mock.js 可以解耦前后端，即使后端接口还没有开发完成，也可以继续进行前端开发。
省时间：使用 Mock.js 可以快速生成数据，提高前端开发效率。
测试：使用 Mock.js 可以方便地进行单元测试和功能测试。

如何使用 Mock.js 模拟 API 请求

安装 Mock.js

$ npm install mockjs
# 不安装ts中会报错
$ npm install @types/mockjs

创建 mock 数据文件

在项目根目录下创建mock文件夹，在该文件夹下创建data.js文件：

import Mock from "mockjs";

// GET请求
Mock.mock("/api/getData", "get", () => {
  return Mock.mock({
    "data|10": [
      {
        name: "@cname",
        "age|20-30": 1,
        "id|+1": 1,
      },
    ],
  });
});

// POST请求
Mock.mock("/api/postData", "post", (options) => {
  const { body } = options;
  return Mock.mock({
    data: `hello, ${JSON.parse(body).name}!`,
  });
});

在上面的代码中，我们分别对/api/getData和/api/postData进行了 GET 和 POST 请求的模拟。其中，Mock.mock方法可以用来生成符合指定格式的随机数据。

在 Angular 中使用 Mock.js

我们可以在app.module.ts文件中创建一个HttpInterceptor来拦截 API 请求，并通过 Mock.js 返回模拟数据。

import { Injectable } from "@angular/core";
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from "@angular/common/http";
import { Observable } from "rxjs";
import { environment } from "../environments/environment";
import { MockService } from "./mock.service";

@Injectable()
export class MockInterceptor implements HttpInterceptor {
  constructor(private mockService: MockService) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (environment.useMock) {
      // 判断是否开启Mock.js
      const mockData = this.mockService.getMockData(req);
      if (mockData) {
        const response = new ResponseOptions({ body: mockData });
        return Observable.of(new HttpResponse(response));
      }
    }
    return next.handle(req);
  }
}

在上述代码中，我们通过MockService来获取 Mock.js 返回的数据，并将其返回给前端。

接下来，在app.module.ts文件中引入该HttpInterceptor：

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";
import { AppComponent } from "./app.component";
import { MockService } from "./mock.service";
import { MockInterceptor } from "./mock.interceptor";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule],
  providers: [
    MockService,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MockInterceptor,
      multi: true,
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

在上述代码中，我们将MockService和MockInterceptor作为提供者，并将MockInterceptor注册为全局的拦截器。

示例

我们可以在app.component.ts文件中进行 API 请求的测试：

import { Component, OnInit } from "@angular/core";
import { HttpClient } from "@angular/common/http";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent implements OnInit {
  title = "Mock.js Demo";
  data: any;
  name: string;

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.http.get("/api/getData").subscribe((res) => {
      this.data = res["data"];
    });
  }

  postData() {
    this.http.post("/api/postData", { name: this.name }).subscribe((res) => {
      alert(res["data"]);
    });
  }
}

在上述代码中，我们通过HttpClient进行 API 请求，分别请求了/api/getData和/api/postData。其中，GET 请求会在页面初始化时自动发送，而 POST 请求则需要手动调用。

总结

通过引入 Mock.js，我们可以轻松地模拟后端 API 接口的请求与响应，从而提高前端开发效率。在使用 Angular 开发的过程中，我们可以通过创建HttpInterceptor拦截 API 请求，并使用 Mock.js 返回模拟数据的方式来实现该功能。

本文作者： luckyship
本文链接： https://luckyship.github.io/2021/11/30/2021-11-30-mock/
版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！