在react中使用mockjs的方法你知道吗

当我们需要模拟一个后端API接口，来测试前端代码的时候，可以使用mockjs这个库进行模拟数据。下面是在React中使用mockjs的方法：

1. 安装mockjs

npm install mockjs --save-dev

2. 创建mock数据

我们可以在src目录下新建一个mock目录，然后在这个目录下再新建一个data.js文件。在这个文件中，就可以编写我们需要模拟的数据了。

下面是一个示例：

import Mock from 'mockjs';

Mock.mock('/api/data', 'get', {
  'list|1-10': [{
    'id|+1': 1,
    'name': '@name',
    'age': '@integer(18, 60)'
  }]
});

这个意思是我们模拟了一个接口地址是/api/data，请求类型是GET，返回的数据格式是一个数组，数组中的每一项都是一个对象，对象中包括id、name和age三个属性。其中，id的值从1开始，每次增加1，name使用随机名字，age是18到60之间的随机数。

3. 使用mock数据

我们可以在原项目的/src/app.js中使用axios来请求模拟数据。代码如下：

import React from 'react';
import axios from 'axios';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: []
    }
  }

  componentDidMount() {
    axios.get('/api/data')
      .then(function (response) {
        this.setState({list: response.data.list});
      }.bind(this))
      .catch(function (error) {
        console.log(error);
      });
  }

  render() {
    return (
      <div>
        {this.state.list.map(function(item, index) {
          return (
            <div key={index}>
              <span>{item.id}</span>
              <span>{item.name}</span>
              <span>{item.age}</span>
            </div>
          )
        })}
      </div>
    )
  }
}

export default App;

这里的axios.get('/api/data')就是我们模拟的数据接口地址。然后我们在componentDidMount方法中请求数据，请求回来后把数据保存到state中，然后在render方法中展示列表内容。

示例说明1：

我们可以模拟一个登录接口，返回的数据格式为：

{
  "code": 0,
  "message": "登录成功"
}

mock的代码如下：

import Mock from 'mockjs';

Mock.mock('/api/login', 'post', {
  'code|0-1': 1,
  'message': '@string(5, 10)'
});

在React中调用login接口的代码如下：

import axios from 'axios';

axios.post('/api/login', {
  username: 'admin',
  password: '123456'
}).then(function (response) {
  if (response.data.code === 0) {
    alert(response.data.message);
  } else {
    alert('登录失败');
  }
}).catch(function (error) {
  console.log(error);
});

示例说明2：

我们可以模拟一个订单列表接口，返回的数据格式为：

{
  "list": [
    {"id": 1, "name": "手机", "price": 1999},
    {"id": 2, "name": "电脑", "price": 5999},
    {"id": 3, "name": "平板电脑", "price": 2999},
    {"id": 4, "name": "电视", "price": 4999}
  ]
}

mock的代码如下：

import Mock from 'mockjs';

Mock.mock('/api/orders', 'get', {
  'list|4': [{
    'id|+1': 1,
    'name|+1': ['手机', '电脑', '平板电脑', '电视'],
    'price|1000-10000': 1
  }]
});

在React中调用orders接口的代码如下：

import axios from 'axios';

axios.get('/api/orders')
  .then(function (response) {
    if (response.data.list) {
      this.setState({list: response.data.list});
    } else {
      console.log('数据获取失败');
    }
  }.bind(this))
  .catch(function (error) {
    console.log(error);
  });

这里的setState方法可以把请求回来的数据保存到组件的state中，然后在render方法中展示列表内容。