Mockjs的理解与简单使用

迷南。 2022-12-29 02:25 291阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70]

感觉在实际前后台联调的过程中，主要有以下几个用到Mockjs的时机：

*  开发新功能，后台接口以及相关的字段已经定义了，但还并没有写实现，也就是无法访问，这时候就可以使用Mockjs，来模拟数据的返回。
 *  后台返回的数据不足以模拟某些场景，比如你想看一下分页的效果，但数据太少。

Mockjs就可以满足上面的需求：

*  简单方便的生成随机数据
 *  拦截Ajax请求

其实这也是其官网上自己对自己定义

> 生成随机数据，拦截 Ajax 请求

Mockjs做的事情很简单，但他实现的很优雅，下面我先举一个简单例子：

import Mock from 'mockjs'
    import axios from 'axios'
    export default { 
      name: 'App',
      mounted() { 
      // 拦截请求
        Mock.mock(/test/, { 
        	// 模拟数据 
          'list|1-10': [{ 
              'id|+1': 1,
              'email': '@EMAIL'
          }]
        })
        axios({ method:'GET', url: '/url/test'}).then(res => { 
          console.log(res);
        })
      }
    }

以上，其实mock的语法，可以看成一种json的增强型语法。就是把普通json的key扩展一下，语法是：

> // 属性名 name  
> // 生成规则 rule  
> // 属性值 value  
> ‘name|rule’: value

比如上文中生成数据使用的语法：

{ 
       'list|1-10': [{ 
           'id|+1': 1,
           'email': '@EMAIL'
    	}]
    }

最终就会生成一下的数据  
![在这里插入图片描述][20201219192152948.png]  
mock的语法生成规则非常强大，更多还是参考官方文档吧 http://mockjs.com/

最后，mockjs是实现原理是重写了xhr对象，在引入了mockjs的网站上，直接控制台输入`XMLHttpRequest`，可以看到返回的对象就是Mock的对象。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70 1]  
所以浏览器中使用axios是可以被mock的，而使用fetch是不可以的，这点还是值得注意的。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70]: /images/20221120/585742b16d274a7fa6b8e6455606b704.png
[20201219192152948.png]: /images/20221120/82f66d70a426447392a6dbf6751a994b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70 1]: /images/20221120/030edc108af84395a1df19ee2de4ada1.png