react中使用mock.js模拟接口数据

原本从接口获取到数据的流程

（完整例子在笔记“redux进阶（1）”中）

1. 在组件中创建一个生命周期函数componentDidMount()。引用 axios 模块，在componentDidMount函数中借助 axios 模块发送ajax请求，使用axios.get("接口路径")来获取某个接口路径下的数据,请求成功后执行then()的回调函数（接收一个参数res表示接收到的数据），请求失败后执行catch()的回调函数
2. 桌面创建list.json文件，并在其中放入一个数组
3. 使用接口地址在**Charles中模拟接口数据，使得发送请求到接口路径时调用我们桌面的list.json文件【使用Charles抓取localhost包需要注意更换url：需要使用http://localhost.charlesproxy.com:3000/访问**】
4. then()的回调函数中打印出的res中的内容，可得到 res中的data是我们需要的数组，那么我们可以在ajax请求成功时通过then()获取data数据

   // 生命周期函数
   componentDidMount() {
     // 借助 `axios` 模块发送`ajax`请求,通过`get()`获取接口路径下的数据
     axios.get("/list.json").then((res) => {
       const data = res.data;
       const action=initListAction(data);
       // console.log(action);
       store.dispatch(action);
     }).catch(() => {
       alert("失败");
     })
   }

---

使用mock.js后的流程

• 方法1是直接在react项目中使用的，优点是好理解，缺点是真正上线时删除起来比较麻烦。
• 方法2则是直接模拟了一个后端项目，上线时直接将设置的axios.defaults.baseURL改成真正的后端地址或者删掉即可。

方法1

1. 在组件中创建一个生命周期函数componentDidMount()。引用 axios 模块，在componentDidMount函数中借助 axios 模块发送ajax请求，使用axios.get("接口路径")来获取某个接口路径下的数据,请求成功后执行then()的回调函数（接收一个参数res表示接收到的数据），请求失败后执行catch()的回调函数
2. 在 src目录 下创建 mock文件夹 用于存放我们的 mock数据 的js文件，在TodoListMock.js中引入mockjs并写入我们的模拟数据。
3. 在需要发出 AJAX请求 的文件中引入我们写好的mock组件，那么接下来只要正常书写AJAX请求即可，一旦对应的请求发出，Mock就会拦截并返回数据。

在项目中安装mock.js

npm install mockjs

创建mock文件夹

在 src目录 下创建 mock文件夹 用于存放我们的 mock数据 的js文件。

写入mock数据

TodoListMock.js:

import Mock from "mockjs"//引入Mock

export default Mock.mock("/list.json",{
  // 随机生成长度为3的list数组，数组元素是3-10个字范围内的中文单词
  "list|3":["@cword(3,10)"]
})

引入mock文件

模拟数据完成后，我们得在 需要发出AJAX请求的页面中 引入mock文件:

import "./mock/TodoListMock";

然后修改原代码，现在我们拿到的res.data中就会有list数组了：

// 生命周期函数
componentDidMount() {
  // 借助 `axios` 模块发送`ajax`请求,通过`get()`获取接口路径下的数据
  axios.get("/list.json").then((res) => {
    const data = res.data.list;
    const action=initListAction(data);
    // console.log(action);
    store.dispatch(action);
  }).catch(() => {
    alert("失败");
  })
}

---

方法2

1. 另外创建一个服务器专门用于放置mock文件夹，将模拟接口的数据都放在这个服务器内。
   • 正常的后端服务器是接受到前端的ajax请求后返回处理后的数据，而mock服务器是接受到前端的ajax请求后返回模拟的数据。
   • 假设创建mock服务器时设置的监听端口是8000，假设服务器是用node写的。
2. 在react中发送ajax请求之前，先使用axios插件的baseURL来设置默认URL为mock服务器的地址：axios.defaults.baseURL = 'http://localhost:8000';
3. 同时运行react项目和mock服务器，此时**react项目中如果发送/list.json的ajax请求，那么实际上发送的是http://localhost:8000/list.json**，那么mock服务器就会拦截到并返回模拟数据。（注意：react项目是3000端口的，不将axios.defaults.baseURL改成8000则不会请求到mock服务器）

---

总结

• 比起原本使用的Charles，使用Mock.js不仅可以省去我们书写模拟数据的麻烦，还可以解决Charles抓包中的麻烦。
• 方法1是直接在react项目中使用的，优点是好理解，缺点是真正上线时删除起来比较麻烦。
• 方法2则是直接模拟了一个后端项目，上线时直接将设置的axios.defaults.baseURL改成真正的后端地址或者删掉即可。

---

使用axios与jquery的区别

在上一篇笔记中，我的例子是使用jquery发起AJAX请求的，那个时候拿到的数据是 字符串 ，如果想要方便后续操作就需要使用JSON.parse()将其转换为JS对象。
但在react中，我们通过axios发起 AJAX请求 拿到的数据直接就是对象，不需要进行转换(后端传JSON对象到前端，通过axios也会直接获取到JS对象，不需额外转换)：

---