react mock_vue mock数据

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46，售后保障稳定

前言

在开发项目时，前端需要和后端对接数据，但有时后端并没有写好数据，前端还需要继续往下开发，这时候就需要mock数据了。

如何mock数据？

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

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

Jetbrains全家桶1年46，售后保障稳定

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文件，文件如下：

{ 
   
    "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)打印数据如下图：

这样mock数据就成功了。