Mock的基本使用以及使用场景 |
您所在的位置：网站首页 › mockup怎么用 › Mock的基本使用以及使用场景 |
Mock的基本使用以及使用场景
|
目录 序言： 文章目录 一、为什么要使用mock? 二、mock的基本使用 1.下载依赖包 2.定义mock规则 3.使用axios测试接口 序言：最近在写一个vue的demo，但是又没有后端的接口，在写首页三级分类列表的时候，并没有把三级分类列表写成静态的，而是使用mock模拟了假的接口，然后通过axios发送GET请求获取到了这个模拟的数据并渲染到页面上。 文章目录 一、为什么要使用mock? 二、mock的基本使用下载依赖包 定义mock规则 使用axios测试接口 一、为什么要使用mock?最主要的原因是在开发中，前后端开发的进度并不一定是同步的，如果前端开发的小伙伴想要后端接口数据进行测试，刚好后端还没有这个接口数据，那么这个时候前端的小伙伴就可以使用mock模拟接口数据。这样，我们就可以在没有真实数据的情况下测试我们的代码。 其它原因： 提高测试覆盖率：Mock可以帮助我们测试一些难以在真实数据源中复现的情况，这样就可以提高测试覆盖率并发现代码中的潜在问题。 快速测试反馈：使用Mock可以在不用等待真实数据源响应的情况下快速得到测试反馈。这有助于加速我们的开发和测试过程。 模拟错误情况：Mock可以模拟各种错误情况，比如网络错误，数据格式错误等，以测试我们的代码在这些情况下的表现。 方便调试：使用Mock可以方便地模拟各种数据源的响应，以便进行调试。这可以让我们更快地发现和解决问题。 二、mock的基本使用官网：Mock.js (mockjs.com) （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: ['数据', '数据', '数据'，...] }) 3.使用axios测试接口（1）新建一个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（2）使用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 }, }(3)在需要使用这个接口数据的组件中的mounted钩子中分发这个异步action mounted(){ // 1.分发请求获取三级分类列表的异步action this.$store.dispatch('getCategoryList') } computed:{ //从vuex中取出数据 ...mapState({ BaseCategoryList:state=>state.home.BaseCategoryList //函数形式 }) },（4）在Vue DevTools中差查看请求数据
|
http://mockjs.com/
【本文地址】
今日新闻 |
推荐新闻 |