本文小编为大家详细介绍“怎么在Angular中引入Mock.js”，内容详细，步骤清晰，细节处理妥当，希望这篇“怎么在Angular中引入Mock.js”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
介绍
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请求则需要手动调用。