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

发布时间：2020-12-15 16:20:27 所属栏目：百科来源：网络整理

导读：一、模拟死数据 1、写在函数的变量里面或者写在全局变量 let listData = [{id: ‘001‘,name: ‘banana‘},{id: ‘002‘,name: ‘orange‘},{id: ‘003‘,name: ‘apple‘}]; 2、写在 defaultProps 里面，或者 this.state 里面如果前端框架用的是react，

一、模拟死数据

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、从接口读取数据

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!