angular6 使用mockjs模拟后台数据

问题描述

由于后台没有开发完成，因此需要前端根据模拟数据先做界面开发，为了方便http请求异步联调，想使用mockjs的请求功能，方便开发

环境安装

cnpm install -S mockjs

定义mock数据文件

import Mock from "mockjs";

//拦截请求，返回假数据
Mock.mock("http://10.91.7.159:9080/taxloan/productStat?customerId=sdf", {
  message: "调用成功",
  data: [
    { name: "XXXX1", code: "P00003" },
    { name: "XXXX2", code: "P00028" },
    { name: "XXXX3", code: "P00002" },
    { name: "XXXX4", code: "P00003" }
  ],
  rtn: "0"
});

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

// 如果允许mock数据
if (environment.isMock) {
  import('./assets/data/mockData').then(_ => {
    console.log('引入mock数据成功')
  })
}

测试

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

@Component({
  selector: 'app-examination-paper',
  templateUrl: './examination-paper.component.html',
  styleUrls: ['./examination-paper.component.scss']
})
export class ExaminationPaperComponent implements OnInit {

  constructor(public http:HttpClient) { }

  ngOnInit(): void {
    let urlStr:string = 'http://10.91.7.159:9080/taxloan/productStat?customerId=sdf'
    this.http.post(urlStr, {}).subscribe(response => {
      console.log(response);
    });
  }

}