react+mock

之前写过一篇react项目添加mock的文章，在文章中说的mock代码是打包配置的时候写入的，这种方式导致每次修改mock数据后都需要重新启动服务才能获取到新的mock数据。

今天使用另外一种方式来实现开发过程中的数据mock。

在项目中安装 axios和mock.js两个框架

然后在webpack配置文件中配置一个环境变量 REACT_APP_MOCK='true'，这个环境变量的目的是为了在业务代码中使用，只有匹配了才使用mock数据，否则使用mock数据。

1、如何添加环境变量

2、新建 src/mocks/apis/hooks.js 文件存放mock数据，文件内容：

import Mock from 'better-mock'

export function hookMock(){
    Mock.mock('/mock/api/hook', {
        success: '@boolean(1, 9, false)',
        errorCode: '@integer(0, 10)',
        message: '@cword(2,10)',
        data: {
            a: '样',
            userName: '@cword(2,4)',
            userId: '@integer(1000, 9999)',
            'list|1-10': [{
                'id|+1': 1,
                'email': '@EMAIL'
            }]
        },
    })
}

 

2、代码中使用mock数据

import React, {useState, useEffect} from 'react'

import axios from 'axios'
import {hookMock} from '@/mocks/apis/hooks'

if(process.env.REACT_APP_MOCK === 'true'){
    hookMock();
}

function Hooks(props){     // 使用一个普通变量存储值，在事件里面获取到的一定不是你想要的值，因为，每次渲染都会重新声明
    useEffect(() => {
        console.log('发起请求---')
        axios.get('/mock/api/hook').then((res)=>{
            console.log('res：', res)
        })
    }, []);
    return <>
        mock数据
    </>
}

export default Hooks;

其中的 @ 是webpack配置的 src目录的别名

 

使用webpack配置实现的mock和业务中引入mock的差别：

1、webpack配置实现的mock每次修改后，都需要重新启动，才能获取到新的数据，而业务中引入的mock则不需要。

2、webpack配置实现的mock会发出ajax请求，而业务中引入的mock不会发起请求。