Mock的基本使用以及使用场景

目录

一、为什么要使用mock? 

二、mock的基本使用

(一) 在原生JS中使用mock

 (二) 在vue组件中简单测试mock的使用

(三) 在vuex中使用mock

---

序言：

最近在写一个vue的demo，但是又没有后端的接口，在写首页三级分类列表的时候，并没有把三级分类列表写成静态的，而是使用mock模拟了假的接口，然后通过axios发送GET请求获取到了这个模拟的数据并渲染到页面上。

---

一、为什么要使用mock? 

最主要的原因是在开发中，前后端开发的进度并不一定是同步的，如果前端开发的小伙伴想要后端接口数据进行测试，刚好后端还没有这个接口数据，那么这个时候前端的小伙伴就可以使用mock模拟接口数据。这样，我们就可以在没有真实数据的情况下测试我们的代码。

其它原因：

1. 提高测试覆盖率：Mock可以帮助我们测试一些难以在真实数据源中复现的情况，这样就可以提高测试覆盖率并发现代码中的潜在问题。

2. 快速测试反馈：使用Mock可以在不用等待真实数据源响应的情况下快速得到测试反馈。这有助于加速我们的开发和测试过程。

3. 模拟错误情况：Mock可以模拟各种错误情况，比如网络错误，数据格式错误等，以测试我们的代码在这些情况下的表现。

4. 方便调试：使用Mock可以方便地模拟各种数据源的响应，以便进行调试。这可以让我们更快地发现和解决问题。

二、mock的基本使用

官网：Mock.js (mockjs.com)http://mockjs.com/

(一) 在原生JS中使用mock

1.新建一个mock.html文件

 2.通过在线的方式在mock.html中引入mock-min.js和axios.js

网址：BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务https://www.bootcdn.cn/

<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock-min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script>

3.定义一个数据，并使用mock提供的方法模拟接口，然后使用axios发送请求获取数据。

<script>
      var Random = Mock.Random;
      const mockPersonData = {
        status: 200,
        message: "成功!",
        data: [
          {
            name: "Jack",
            age: 18,
            gender: "男",
            "address|1": {
              310000: "上海市",
              320000: "江苏省",
              330000: "浙江省",
              340000: "安徽省",
            },
          },
          {
            name: Random.cname(),
            age: 18,
            gender: "男",
            address: "上海市",
          },
          {
            name: Random.cname(),
            age: 18,
            gender: "男",
            address: Random.county(),
          },
        ],
      };
      Mock.mock("mock/data", mockPersonData);

      // 获取数据
      axios({
        url: "mock/data",
      }).then((res) => {
        console.log(res);
      });
    </script>

 4.查看接口数据

 (二) 在vue组件中简单测试mock的使用

1.下载依赖包

npm i mockjs --save
npm i axios

2.定义mock规则

    在src文件夹下定义一个mock文件夹并定义一个index.js文件，用来定义mock规则

 

3.设计一个json格式的首页三级分类列表的接口数据BaseCategoryList

 4.定义mock接口，并引入定义的json数据，在main.js文件中引入mock/index.js

import Mock from "mockjs";
import BaseCategoryList from "./BaseCategoryList.json";

// 模拟分类列表数据接口
Mock.mock("/mock/BaseCategoryList", "get", {
  code: 200,
  message: "获取数据成功!",
  data: BaseCategoryList,
});

5.定义一个mockAjax.js文件，对axios进行简单的二次封装，用于发送ajax请求

// mock接口请求的封装 要拦截Ajax请求
import axios from "axios";
const service = axios.create({
  baseURL: "/mock",
  timeout: 20000,
});
service.interceptors.request.use((config) => {
  return config;
});
service.interceptors.response.use(
  (response) => {
    return response.data;
  },
  (error) => {
    alert("请求出错: " + error.message || "未知错误");
    return Promise.reject(error);
  }
);
export default service;

6.在vue组件中引入mockAjax，发送请求获取模拟接口的数据 

<template>
  <el-row>
    <el-button type="success" round @click="getData">获取数据</el-button>
  </el-row>
</template>

<script>
import mockAjax from '../api/mockAjax.js'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods: {
    getData() {
      mockAjax.get('/BaseCategoryList').then(res => {
        console.log(res);
      })
    }
  },
}
</script>

 7.发送请求，查看模拟的接口数据

 

(三) 在vuex中使用mock

        下载依赖包

npm i mockjs --save
npm i axios

（1）定义一个mock文件夹并定义一个mockServer.js文件，用来定义mock规则

（2）设计一个json格式的首页三级分类列表的接口数据BaseCategoryList

 (3)在定义这个接口规则的时候引入自己设计的json格式的接口数据

//使用ES6模块化的方法引入mock模块
import Mock from 'mockjs'
//引入自己设计的json格式的接口数据
import BaseCategoryList from './BaseCategoryList.json'


Mock.mock('/mock/BaseCategoryList',{
    code:200,
    data:BaseCategoryList
    //也可以定义简单的数据
    //data: ['数据', '数据', '数据'，...]
})

（4）新建一个mockAjax.js文件对axios进行简单的二次封装

// mock接口请求的封装 要拦截Ajax请求
import axios from 'axios'
// 引入进度条包
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
// 1. 配置通用的基础路径和超时
// service是一个能发任意ajax请求的函数，当然可以作为对象使用
const service = axios.create({
    baseURL: '/mock',
    timeout: 20000
})
// 定义请求拦截器
service.interceptors.request.use((config) => {
    // 显示进度条: 请求拦截器回调
    NProgress.start()
    return config
})
// 定义响应拦截器
service.interceptors.response.use(
    response => {
        // 结束进度条: 响应拦截器回调
        NProgress.done()
        return response.data  //发送请求时response就可以拿到数据 而不用response.data拿数据了
    },
    error => {
        // 结束进度条: 响应拦截器回调
        NProgress.done()
        // 统一处理请求错误, 具体请求也可以选择处理或不处理
        alert('请求出错: ' + error.message||'未知错误')
        // 将错误向下传递 发起请求时就可以接收到这个错误 可以用catch处理一下，也可以不处理
        return Promise.reject(error) 
    }
)
export default service

（5）使用vuex管理请求到的接口数据

// 1.定义首页三级分类接口请求函数
export const reqBaseCategoryList = () => {
    return mockAjax('/BaseCategoryList')
}

const state = {
    BaseCategoryList: [],  // 3级分类列表
}

const actions = {
    //1.获取三级分类列表的异步action
    async getCategoryList(context) {
        //发异步ajax请求(调用接口请求函数)
        const result = await reqBaseCategoryList()
        //如果请求成功了，得到数据提交给mutation
        if (result.code === 200) {
            const BaseCategoryList = result.data    
            // 把从服务器获取的数据发送到mutations进行处理
            context.commit('RECEIVE_CATEGORY_LIST', BaseCategoryList)
        }
    },
}

const mutations = {
    // 1.获取三级分类列表
    RECEIVE_CATEGORY_LIST(state, BaseCategoryList) {
        // 把获取的数据保存到state
        state.BaseCategoryList = BaseCategoryList
    },
}

(6)在需要使用这个接口数据的组件中的mounted钩子中分发这个异步action

mounted(){
        // 1.分发请求获取三级分类列表的异步action
        this.$store.dispatch('getCategoryList')
}

computed:{
        //从vuex中取出数据
        ...mapState({
            BaseCategoryList:state=>state.home.BaseCategoryList   //函数形式
        })
    },

（4）在Vue DevTools中差查看请求数据