前端模拟数据的4种技术方案

一、模拟死数据

1、写在函数的变量里面或者写在全局变量

let listData = [{id: '001', name: 'banana'},{id: '002', name: 'orange'},{id: '003', name: 'apple'}];

2、写在defaultProps里面，或者this.state里面

如果前端框架用的是react，把假数据写在defaultProps里面，然后解构读取this.props，或者把假数据写在this.state里面，然后解构读取this.state。

// render函数
render() {
    let {data} = this.props;

    return (
      <div>
        <table>
          <tbody>
            <tr><th>id</th><th>name</th></tr>
            {
              data.map((item, i) => {
                return <tr key={i}><td>{item.id}</td><td>{item.name}</td></tr>
              })
            }
          </tbody>
        </table>
      </div>
    );
  }


// defaultprops
FakeData.defaultProps = {
  'data': [
      {
          'id': '001',
          'name': 'banana'
      },
      {
          'id': '002',
          'name': 'orange'
      },
      {
          'id': '003',
          'name': 'apple'
      }
  ]
};

二、模拟异步数据

1、写函数模拟异步

2、从接口读取数据