Mock.js-拦截Ajax请求

Mock.js-拦截Ajax请求

在团队开发项目时,由于不是一个人去写前端,后端代码,开发进度的不同导致一个团队等待另一个团队的情况,后端人员除了要写接口,还要写接口文档,进度可能比前端人员略慢,前端人员停下来等待接口又十分的不友好,拖慢项目的进度,有的人定义一个json,模拟返回数据,但是这样的话又不够灵活,不能模拟后台返回的不同类型的数据,于是Mock.js就是一个解决这种问题的神器,

Mock的优势

  • 前后端分离—–定义好接口文档之后,前端人员不用再等待后台的接口。
  • 增加测试的真实性—-不同于直接用json返回固定的数据,返回数据更加接近真实环境中的情况
  • 不需要修改代码就能拦截AJax请求,并能返回请求
  • 用法简单
  • 数据类型丰富,支持随即文本,数字,boolean,图片,color,等
  • 支持扩展

安装与使用

安装与使用都十分的简单,这里基于vue-cli写的简单的例子,使用axios发起请求

在项目中直接使用npm安装

npm install mockjs --save-dev

在main.js中引入mock.js

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

// 引入mockjs
require('./mock.js')

new Vue({
    el: '#app',
    router,
    template: '',
    components: {
        App
    }
})

定义一个mock.js

import Mock from "mockjs";
Mock.mock('http://123.com',{   //返回一个json对象
  'name|3':'fei',
  'age|20-30':25,
})

$.ajax({
  url:'http://123.com',
  dataType:'json',
  success:function(e){
    console.log(e)
  }
})

浏览器输出

{
     name:'feifeifei',
     age:26,
}

定义数据

https://www.cnblogs.com/zhenfei-jiang/p/7235339.html

数据模板中每个属性由三部分构成:属性名(name),规则(rule),值(value)

‘name|rule’:value

1 ‘name|min-max’:string,重复str生成随机字符串,重复次数在min到max之间

'name|2-5':abc    随即重复2-5

2 ‘name|count’:str,将str重复count次数

'name|2':abc     //输出abcabc   重复2次

3.‘name|min-max’:num 随机生成min-max之间的一个整数,num只能用来确定类型

'name|2-5':25     //生成2-5之间的随机整数

4 ‘name|+1’:num 递增

'name|+1':2   //从2开始递增 

5.‘name|1’:boolean 随机生成布尔值,二者的类型都是1/2
6 ‘name|count’:obj 从obj中选count个属性

'name|2':obj   //从obj中选择两个属性

'name|2-5':obj   //从obj中选择2-5个属性

7 ‘name|count’:arr 从数组中选count个元素

'name|2':arr   ///从arr中选择2个元素,作为最终值

'name|+1':arr   ///从属性值 array 中顺序选取 1 个元素,作为最终值

你可能感兴趣的:(网络学习日志,前端面试题整理,JavaScript)