mockjs拦截ajax请求，生成伪数据(模拟接口)：

我爱加班、、

已于 2024-04-11 16:11:07 修改

阅读量467

点赞数 8

CC 4.0 BY-SA版权

分类专栏：前端开发利器文章标签： ajax 前端 javascript vue.js ecmascript

于 2024-04-11 16:03:55 首次发布

本文链接：https://blog.csdn.net/weixin_48420104/article/details/137642250

前端开发利器专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何在项目中使用Mock.js进行API接口的模拟，包括安装、在`mock.js`中定义mock规则，以及通过模块化结构实现不同功能的复用。通过`home.js`文件，可以生成随机数据并返回给请求，方便开发和测试阶段的接口模拟。

1、官网：mockjs.com

2、安装：npm install mockjs

3、在api文件夹下新建mock.js文件，并引入使用：

//引入和使用：
import Mock from 'mockjs'
import home from './mockServeData/home'
export default Mock.mock('/api/home/getData', function(){
    console.log('mock拦截');
    return 1
})

4、在main.js中引入：import './api/mock'

5、模块化：新建mockServeData文件夹，新建home.js文件，在home.js中引入和定义方法，模拟边界返回的数据：

import Mock from 'mockjs'
// 图表数据
let List = []
export default {
   getStatisticalData: () => {
     //Mock.Random.float 产生随机数100到8000之间 保留小数 最小0位 最大0位
     for (let i = 0; i < 7; i++) {
         List.push(
            Mock.mock({
               苹果: Mock.Random.float(100, 8000, 0, 0),
               vivo: Mock.Random.float(100, 8000, 0, 0),
               oppo: Mock.Random.float(100, 8000, 0, 0),
               魅族: Mock.Random.float(100, 8000, 0, 0),
               三星: Mock.Random.float(100, 8000, 0, 0),
               小米: Mock.Random.float(100, 8000, 0, 0)
            })
         )
      }
    return {
      code: 20000,
      data: {
         // 饼图
         videoData: [
           {
              name: '小米',
              value: 2999
           },
           {}
         ]
      }
    }
   }
}

6、更改mock.js中的使用方式:

直接通过 home.getStatisticalData 的方式使用方法

export default Mock.mock('/api/home/getData', home.getStatisticalData)

这样子就可以拦截模拟接口啦，在返回里面可以随意定义返回的数据。在控制台可以打印看到返回的数据。