如何在react项目中使用axios和mock数据

如何在react项目中使用axios和mock数据

你好！我们在react项目中需要经常使用axios请求mock模拟数据，本文将简单粗暴介绍如何使用axios请求mock数据。各位看官您往下看。

一、下载

我们需要使用axios和mock模拟数据，首先我们需要先去下载。

1. 下载axios ：npm install --save axios
2. 下载mockjs ：npm install --save mockjs
3. 待下载完毕后我们执行下一步操作。

二、使用

 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现在我们打开浏览器查看
)

这样我们的mock模拟数据就通过axios请求好啦，希望能够帮助到您。