Angularjs使用mock模拟数据请求接口

一、安装mockjs

yarn add mockjs

二、在src/assets/目录下面新建一个mock文件夹，在mock文件夹下创建一个index.js文件

index.js

import Mock from "mockjs"
// mock/index.js
// mock方法第一个参数是拦截的接口url,第二个参数是请求方式，第三个参数是返回的数据
Mock.mock(/\/getDataList/, "post", {
  'list|1-100': [{
    'name|1-10': 1,
  }]
})

三、在src/enviroments/environment.ts文件中添加mock开关，在开发环境中添加mock开关，防止在正式环境中误用到

environment.ts

// 文件 environment.ts
export const environment = {
	isMock: true
}

四、在main.ts 中引入 mockjs模拟的数据

// main.ts
if (environment.isMock) {
 import('./assets/mock/index.js');
 或者
 import('./assets/data/mockData').then(_ => { console.log('引入mock数据成功') })
}

五、在组件中测试

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

@Component({
 selector: 'app-test',
 templateUrl: './test.component.html',
 styles: []
})
export class TestComponent implements OnInit {

 constructor(private http: HttpClient) { }

 ngOnInit() {

   // const data = Mock.mock({
   //   'list|1-100': [{
   //     'name|1-10': 1,
   //   }]
   // });
   // console.log('mock模拟数据', data);

   this.http.post("/getDataList", {}).subscribe(response => {
     console.log('模拟数据', response);
   });

 }

}