如何在react项目中使用axios和mock数据
你好!我们在react项目中需要经常使用axios请求mock模拟数据,本文将简单粗暴介绍如何使用axios请求mock数据。各位看官您往下看。
一、下载
我们需要使用axios和mock模拟数据,首先我们需要先去下载。
- 下载axios :npm install --save axios
- 下载mockjs :npm install --save mockjs
- 待下载完毕后我们执行下一步操作。
二、使用
1.在需要的页面中引入axios import axios from 'axios'
2.mock模拟数据的操作:
2.1在src文件夹下建mock文件夹和index.js文件
2.2mock文件夹下建立json文件夹里面建立data.json
3.在刚才建好的文件夹中的index.js中引入mock
(注意:mock的格式为Mock.mock(设置的请求地址,post/get,返回的数据))
import Mock from ‘mockjs’
export default Mock.mock('/infor','get',require('./json/data'))
4.创建data.json数据(这里需要注意啦!我是将图片放在了脚手架public文件夹里面!!!)
[
{"imgurl":"/img1.webp","title":"第二件半价!日系爆款5双装纯棉中筒袜","price":18.9},
{"imgurl":"/img2.webp","title":"【啄木鸟】加绒加厚针织衫毛衣","price":59},
{"imgurl":"/img3.webp","title":"爆款!滋色联名大英博物馆埃及限量款蜜粉饼","price":49.9},
{"imgurl":"/img4.webp","title":"冬季爆款!新款加厚羊羔毛羽绒棉服女","price":69},
{"imgurl":"/img5.webp","title":"【拍3件】156颗立白洗衣凝珠","price":94},
{"imgurl":"/img6.webp","title":"【李子柒】桂花坚果藕粉羹350g","price":49.7}
]
5.好啦!我们的mock模拟数据创建好了,现在我们就需要去请求编辑好的mock数据了
5.1因为刚才已经在我们所需的页面内引用过axios了,React 组件的数据可以通过 componentDidMount 方法来获取数据。
5.2创建axios请求
componentWillMount() {
axios({
url:"/infor",
method:"get"
}).then((ok)=>{
console.log(ok.data)
})
}
5.3现在我们打开浏览器查看
)