详解如何在Angular中引入Mock.js_AngularJs

介绍

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 --save-dev

创建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请求则需要手动调用。