react怎么mock数据-js教程-PHP中文网

react怎么mock数据

coldplay.xixi

发布： 2020-12-03 17:05:55

原创

6627人浏览过

react mock数据的方法：首先在public目录下建立【/api/headerList.json】文件；然后加入相关代码【axios.get('/api/headerList.json')】。

react怎么mock数据

本教程操作环境：windows7系统、React17版、thinkpad t480电脑。

react mock数据的方法：

如下代码，在input获得焦点时调用getList()方法。

const mapDispathToProps = (dispatch) => {
    return {
        handleInputFocus() {
            dispatch(actionCreators.getList())
        }
    }
}

登录后复制

getList()方法是通过Ajax获取数据，此时后端并没有写好，所以自己mock一个数据。

export const getList = () => {
    return (dispatch) => {
        axios.get('/api/headerList.json').then((res) => {
            const data = res.data;
            console.log(data)
        }).catch(() => {
            console.log('error')
        })
    }
}

登录后复制

axios.get('/api/headerList.json')这句代码，计算机会首先去src目录下寻找/api/headerList.json，没有找到然后去public目录下找，此时我们在public目录下建立/api/headerList.json文件，文件如下：

YXPHP企业网站管理系统4.0

支持静态模板,支持动态模板标签,支持图片.SWF.FLV系列广告标签.支持百万级海量数据,绑定内置URL伪装策略(URL后缀名随你怎么写)，绑定内置系统升级策略(暂不开放升级),绑定内置模板付费升级策略(暂不开放更新)。支持标签容错处理,绑定内置攻击防御策略,绑定内置服务器优化策略(系统内存释放的干干净净)。支持离线运行,支持次目录,兼容U主机。支持会员功能,支持文章版块权限阅读,支持会员自主注册

查看详情

{
    "success":true,
    "data":["微信","支付宝","蚂蚁金服","被骗","借呗","诈骗","盗窃","pandas","TensorFlow","PyTorch","Caffe","scikit-learn","Python","Keras","pyecharts","ggplot","Matplotlib","Gensim","Bokeh","Theano","Scrapy","SciPy","Plotly","NumPy","XGBoost","是","他","有","光大永明","我","要","人","Android","女","大","不","着","男","它","二","于","中","java","把","上","这","下","的","了","来"]
}

登录后复制

此时返回的数据就是以上数据，通过console.log(res.data)打印数据如下图：