MockJs学习&React+Axios+MockJs实战例子

现在都着重于前后端分离以提高工作效率。当前端开发的时候，如果后端的接口没有写完，为了不影响工作效率，可以手动模拟后端接口。现在有许多数据模拟的库，但是许多都有所不足，比如json可以模拟后台数据，但却难以模拟数据的增删改。。。

MockJs

MockJs可以生成随机数据，拦截 Ajax 请求。

MockJs优点

• 前后端分离：让前端攻城师独立于后端进行开发。
• 增加单元测试的真实性：通过随机数据，模拟各种场景。
• 开发无侵入：不需要修改既有代码，就可以拦截Ajax 请求，返回模拟的响应数据。
• 用法简单：符合直觉的接口。
• 数据类型丰富：支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
• 方便扩展：支持支持扩展更多数据类型，支持自定义函数和正则。

Hello MockJs

//新建项目
mkdir mockjs-study
cd mockjs-study

//初始化项目
npm init -y

//安装
npm i mockjs -D

新建index.js文件，当前文件目录结构：

📌入门例子，现在看不懂没关系，继续看下文

// index.js
const Mock = require("mockjs");

let data=Mock.mock({
    //对象有一个list属性，list是一个数组，包含有1到3个元素，每次运行生成的元素个数都在这个范围内
    'list|1-3':[{
        //list数据里面是对象，对象里面有id属性，是一个自增数，起始值为 1，每次增 1
        'id|+1':1
    }]
})

console.log(data);

运行结果：

语法规范

Mock.js 的语法规范包括两部分：

• 数据模板定义规范（Data Template Definition，DTD）
• 数据占位符定义规范（Data Placeholder Definition，DPD）

数据模板定义规范

数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：

// 属性名   name
// 生成规则 rule
// 属性值   value
'name|rule': value

• 属性名 和 生成规则 之间用竖线 | 分隔。

• 生成规则是可选的，默认是'name|1': value 。

• 生成规则有以下格式：（dmin表示小数位最少有几位）

  1. 'name|min-max': value
  2. 'name|count': value
  3. 'name|min-max.dmin-dmax': value
  4. 'name|min-max.dcount': value
  5. 'name|count.dmin-dmax': value
  6. 'name|count.dcount': value
  7. 'name|+step': value

• 生成规则 的 含义 需要依赖 属性值的类型 才能确定。

• 属性值 中可以含有 @占位符。

• 属性值 还指定了最终值的初始值和类型。

属性值是字符串 String

☄ 'name|min-max': string

重复拼接 string 生成一个字符串，min<=重复次数<=max

'name|1-3':'hello' 
// name: 'hello' or name: 'hellohello'  or name: 'hellohellohello'

☄ 'name|count': string

重复拼接 count 次 string 生成一个字符串

'name|2':'hello' 
// name: 'hellohello'

属性值是数字 Number

☄ 'name|+step': number

初始值为 number，下一次该属性值自动加 step。

let data=Mock.mock({
    'list|2':[{
        'id|+2':1,
    }]
})
console.log(data);//{ list: [ { id: 1 }, { id: 3 } ] }

☄ 'name|min-max': number

生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定数据类型。

'name|1-3':10  //你可以写其他数字 效果都一样
//name: 1 or name: 2  or name: 3

☄ 'name|min-max.dmin-dmax': number

生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位。

'name|1-2.1-2':10
//name: 1.1 or name: 1.2 or name: 2.1 or name: 2.2

属性值是布尔型 Boolean

☄ 'name|count': boolean

随机生成一个布尔值，值为 boolean 的概率是 count/(count+1)，值为 !boolean 的概率是 1/(count+1)。

let data=Mock.mock({
    'list|10':[{
        'name|4':false
    }]
})

console.log(data);

生成false值的概率是4/5 生成true值的概率是1/5

☄ 'name|min-max': value

随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)。

let data=Mock.mock({
    'list|10':[{
        'name|1-5':false
    }]
})

属性值是对象 Object

☄ 'name|count': object

从属性值 object 中随机选取 count 个属性。

let data=Mock.mock({
    'list|2':[{
        'name|2':{a:1,b:2,c:3}
    }]
})

console.log(JSON.stringify(data));
//{"list":[{"name":{"c":3,"b":2}},{"name":{"b":2,"a":1}}]}

☄ 'name|min-max': object

从属性值 object 中随机选取 min 到 max 个属性。

let data=Mock.mock({
    'list|2':[{
        'name|2':{a:1,b:2,c:3}
    }]
})

console.log(JSON.stringify(data));
//{"list":[{"name":{"a":1,"b":2}},{"name":{"b":2,"a":1}}]}

属性值是数组 Array

☄ 'name|count': array

从属性值 array 中随机选取 count 个元素，作为最终值。

'name|1':[1,2,3,4]
// name: 1 or name: 2 or name: 3 or name: 4

☄ 'name|+step': array

下一个属性从 array 当前 index 按顺序走 step 位，取该元素，作为下一个属性值。

let data=Mock.mock({
    'list|4':[{
        'name|+3':[1,2,3,4]
    }]
})

console.log(data);
//{ list: [ { name: 1 }, { name: 4 }, { name: 3 }, { name: 2 } ] }

☄ 'name|min-max': array

重复拼接 min-max 次 array 生成一个新数组

let data=Mock.mock({
    'list|4':[{
        'name|1-3':[1,2,3,4]
    }]
})

console.log(JSON.stringify(data));
//{"list":[{"name":[1,2,3,4]},{"name":[1,2,3,4]},{"name":[1,2,3,4,1,2,3,4]},{"name":[1,2,3,4,1,2,3,4]}]}

☄'name|count': array

重复拼接 count 次 array 生成一个新数组

let data=Mock.mock({
    'list':[{
        'name|2':[1,2,3,4]
    }]
})

console.log(JSON.stringify(data));
//{"list":[{"name":[1,2,3,4,1,2,3,4]}]}

属性值是函数 Function

☄ 'name': function

执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 ‘name’ 所在的对象。

function foo(){
    return {a:1,b:2,c:3}
}

let data=Mock.mock({
    'list|2':[{
        'name|2':foo()
    }]
})

console.log(JSON.stringify(data));
//{"list":[{"name":{"b":2,"c":3}},{"name":{"b":2,"a":1}}]}

属性值是正则表达式 RegExp

☄ 'name': regexp

根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。

let data=Mock.mock({
    'regexp1': /[a-z][A-Z][0-9]/,
    'regexp2': /\w\W\s\S\d\D/,
    'regexp3': /\d{5,10}/ 
})

console.log(JSON.stringify(data));
//{"regexp1":"dT8","regexp2":"i:\t68;","regexp3":"817374"}

数据占位符定义规范

@占位符
@占位符(参数 [, 参数])

• 用 @ 来标识其后的字符串是 占位符。
• 占位符 引用的是 Mock.Random 中的方法。@占位符
• 通过 Mock.Random.extend() 来扩展自定义占位符。@占位符(参数 [, 参数])
• 占位符 可以且优先引用 数据模板 中的属性。
• 占位符 支持 相对路径 和 绝对路径。

let data=Mock.mock({
    name: {
        first: '@FIRST',
        middle: '@FIRST',
        last: '@LAST',
        full: '@first @middle @last'
    }
})

console.log(data);

// {
//   name: {
//     first: 'Paul',
//     middle: 'David',
//     last: 'Johnson',
//     full: 'Paul David Johnson'
//   }
// }

Mock.Random

Mock.Random 是一个工具类，用于生成各种随机数据。不必刻意学习，具体案例使用 官网案例 都有。
Mock.Random 的方法在数据模板中称为『占位符』，书写格式为 @占位符(参数 [, 参数]) 。

var Random = Mock.Random
// Random.city()
Random.city()//"铁岭市"
Mock.mock('@city')//"宝鸡市"
Mock.mock('@city()')//"澳门半岛"
// Random.city( prefix )
Random.city(true)//"江西省 鹰潭市"
Mock.mock('@city(true)')//"甘肃省 兰州市"

Mock.Random 提供的完整方法（占位符）如下：

Type	Method
Basic	boolean, natural, integer, float, character, string, range,
Date	date ,time, datetime, now
Image	image, dataImage
Color	color, hex, rgb, rgba, hsl
Text	paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle
Name	first, last, name, cfirst, clast, cname
Web	url, domain, email, ip, tld,protocol
Address	region ,province, city, county
Helper	capitalize, upper, lower, pick, shuffle,zip
Miscellaneous	guid, id,increment

Mock.Random.extend

Mock.Random 扩展方法，然后在数据模板中通过 @扩展方法 引用。例如：

const Mock = require("mockjs");
var Random = Mock.Random

Random.extend({
    product:function (index){
        const types = ['products', 'industryApp', 'solution', 'experts'];
        if(typeof index == 'number'){
            if(index>=types.length){
                index=types.length-1
            }
            return this.pick(types[index])
        }
        return this.pick(types)
    }
})

Random.product()
Random.product(5)
console.log(Mock.mock('@product'));

Mock.setup( settings )

配置拦截 Ajax 请求时的行为。目前支持的配置项有：timeout

settings，必选，配置项集合

timeout，可选，指定被拦截的 Ajax 请求的响应时间，单位是毫秒。值可以是正整数，例如 400，表示 400 毫秒 后才会返回响应内容；也可以是横杠 ‘-’ 风格的字符串，例如 ‘200-600’，表示响应时间介于 200 和 600 毫秒之间。默认值是’10-100’。

Mock.setup({
    timeout: 400
})
Mock.setup({
    timeout: '200-600'
})

目前，接口 Mock.setup( settings ) 仅用于配置 Ajax 请求，将来可能用于配置 Mock 的其他行为。

Mock.mock

Mock.js 通过覆盖和模拟原生 XMLHttpRequest 的行为来拦截 Ajax 请求

• rURL（Redirective Uniform Resource Locator）【可选】:重定向统一资源定位符,表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。

• rtype【可选】：表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。

• template【可选】：表示数据模板，可以是对象或字符串。

• function(options)【可选】：表示用于生成响应数据的函数。

Mock.mock( template )

根据数据模板生成模拟数据

const Mock = require("mockjs");

const template={
  'name':'@first',
  'age':'@integer(20, 30)',
  'city':'@city(true)'
}

let data= Mock.mock(template);
console.log(data);
//{ name: 'Linda', age: 27, city: '台湾 嘉义县' }

Mock.mock( rURL, template)

使用Mock拦截请求，当拦截到匹配 rURL 的请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。

// Mock.mock(rurl, template)
Mock.mock(/\.json/, {
    'list|1-10': [{
        'id|+1': 1,//属性 id 是一个自增数，起始值为 1，每次增 1
        'email': '@EMAIL'//随机邮箱地址
    }]
})
$.ajax({
    url: 'hello.json',
    dataType: 'json'
}).done(function(data, status, jqXHR){
    $('<pre>').text(JSON.stringify(data, null, 4))
        .appendTo('body')
})

Mock.mock( rURL, function( options ) )

当拦截到匹配 rurl 的请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。

// Mock.mock(rurl, function(options))
Mock.mock(/\.json/, function(options) {
    return options
})
$.ajax({
    url: 'hello.json',
    dataType: 'json'
}).done(function(data, status, jqXHR) {
    $('<pre>').text(JSON.stringify(data, null, 4))
        .appendTo('body')
})
$.ajax({
    url: 'hello.json',
    dataType: 'json',
    data: {
        foo: 1,
        bar: 2,
        faz: 3
    }
}).done(function(data, status, jqXHR) {
    $('<pre>').text(JSON.stringify(data, null, 4))
        .appendTo('body')
})
$.ajax({
    url: 'hello.json',
    type: 'post',
    dataType: 'json',
    data: {
        foo: 1,
        bar: 2,
        faz: 3
    }
}).done(function(data, status, jqXHR) {
    $('<pre>').text(JSON.stringify(data, null, 4))
        .appendTo('body')
})

Mock.mock( rURL, rtype, template)

当拦截到匹配 rurl 和 rtype 的请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。

// Mock.mock( rurl, rtype, template )
Mock.mock(/\.json/, 'get', {
    type: 'get'
})
Mock.mock(/\.json/, 'post', {
    type: 'post'
})

$.ajax({
    url: 'hello.json',
    type: 'get',
    dataType: 'json'
}).done(function (data, status, jqXHR) {
    $('<pre>').text(JSON.stringify(data, null, 4))
        .appendTo('body')
})

$.ajax({
    url: 'hello.json',
    type: 'post',
    dataType: 'json'
}).done(function (data, status, jqXHR) {
    $('<pre>').text(JSON.stringify(data, null, 4))
        .appendTo('body')
})

Mock.mock( rURL, rtype, function( options ))

当拦截到匹配 rurl 和 rtype 的请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。

// Mock.mock( rurl, rtype, function(options) )
Mock.mock(/\.json/, 'get', function(options) {
    return options.type
})
Mock.mock(/\.json/, 'post', function(options) {
    return options.type
})

$.ajax({
    url: 'hello.json',
    type: 'get',
    dataType: 'json'
}).done(function (data, status, jqXHR) {
    $('<pre>').text(JSON.stringify(data, null, 4))
        .appendTo('body')
})

$.ajax({
    url: 'hello.json',
    type: 'post',
    dataType: 'json'
}).done(function (data, status, jqXHR) {
    $('<pre>').text(JSON.stringify(data, null, 4))
        .appendTo('body')
})

react中使用axios + mockjs模拟后台数据

正常形式

1.初始化项目

//使用react脚手架搭建新项目
npx create-react-app react-axios-mock
cd react-axios-mock

2.安装依赖

npm i axios
npm i mockjs -D

3.配置 axios

request.js

import axios from "axios";

const Axios = axios.create();

Axios.defaults.timeout = 2000;

// 添加请求拦截器
Axios.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    return config;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
Axios.interceptors.response.use(
  function (response) {
    // 对响应数据做点什么
    return response;
  },
  function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

export default Axios;

4.配置 mock

mockUserInfo.js

import Mock from 'mockjs'

const Random=Mock.Random

Mock.setup({
    timeout: '500'
})

function createUsers() {
    let user = [];
    while (true) {
      user.push({
        name: Random.first(),
        sex: Random.boolean(1, 1, true) ? "male" : "female",
        age: Random.integer(20, 50),
      });
      if (user.length === 2) break;
    }
    return user;
  }

  const users=[
    {
        url:'/getUsers',
        type:'get',
        response:()=>{
            return Mock.mock({
                
                'users|3-5':createUsers()
            })
        }
    },
    {
        url:'/addUser',
        type:'post',
        response:(data)=>{
            return Mock.mock({
                data
            })
        }
    }
]

export default users;

mockIndex.js

import Mock from 'mockjs'

import user from './mockUserInfo'

const mocks = [
  ...user
]

// mock请求方法放在这里统一处理,1是简便写法,2是如果请求路径需要加统一前缀或域名,可以在这里处理
for (const i of mocks) {
  Mock.mock(i.url, i.type, i.response)
}

5.后台接口请求路径配置文件

userService.js

import request from './request'

export function getUsers(){
    return request({
        url:'/getUsers',
        method:'get'
    })
}

export function addUser(data){
    return request({
        url:'/addUser',
        method:'post',
        data
    })
}

6.引入mock,在项目的最外层目录index.js里引入,直接引入就可以

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './mockIndex'

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

7.组件中使用

App.js

import React,{useState} from 'react'
import {getUsers} from './userService'

function App() {
  const [users,setUsers]=useState([]);

  const getAllUsers=async()=>{
    const res=await getUsers();
    if(res.status===200)
    setUsers(res.data.users)
  }

  return (
    <>
    <button onClick={getAllUsers}>点击获取最新用户信息</button>
    {users.map((it,index)=>(
      <p key={index}>姓名：{it.name} 性别：{it.sex} 年龄：{it.age}</p>
    ))}
    </>
  );
}

export default App;

8.启动项目

npm run start

react-axios

适用于react框架的Axios 组件， 具有 child function callback.
在render阶段进行异步请求。

在上个例子基础上，

npm i react-axios

修改App.js

import React, { useState } from "react";
import { Request } from "react-axios";
import axios from "axios";

function App() {
  const [users, setUsers] = useState([]);

  return (
    <>
      <Request
        instance={axios.create({})} /* custom instance of axios - optional */
        method="get" /* get, delete, head, post, put and patch - required */
        url="/getUsers" /*  url endpoint to be requested - required */
        onSuccess={(response) => {
          setUsers(response.data.users);
        }} /* called on success of axios request - optional */
      />
      {users.map((it, index) => (
        <p key={index}>
          姓名：{it.name} 性别：{it.sex} 年龄：{it.age}
        </p>
      ))}
    </>
  );
}

export default App;

页面渲染的时候就会去异步加载

更多关于react-axios知识，点此查看

=========================================================================================
行文至此，若有不足，还望指出，多多支持。

=========================================================================================
参考文档：
axios中文文档|axios中文网
react中使用axios + mockjs模拟后台数据
Mock.mock()