react + fetch + mockjs

浏览器使用 mockjss

<head>
  <script src="http://mockjs.com/dist/mock.js" charset="utf-8"></script>
</head>

<script type="text/javascript">
Mock.mock({
  'list|1-10': [{
      'id|+1': 1,
      'name': '@string',
      'age|1-100': 100,
      'skill|1-2':[
        'Soccer',
        'Volleyball',
        'Swimming',
        'Hiking'
      ]
  }]
});
</script>

环境准备

mockjs 生成随机数据、拦截 Ajax 请求。文档见

安装

npm install –save-dev mockjs

fetch http 请求方式，是 XMLHttpRequest 的一种替代方案，它的 api 是基于 Promise 设计的 nodejs 中使用需要引入 node-fetch.
fetch-mock 拦截 fetch 请求

安装

npm install –save-dev fetch-mock

搭建

目录结构按照以上目录结构整理代码，以下是 demo

/index.js

1 2	import mock from './mock/index' mock.start();

/mock/index.js

1 2	import mock from './mock' export default mock

/mock/mock.js

import fetchMock from 'fetch-mock';
import {agents} from './data/agentList'

export default {
  start() {
    fetch.get('/agentList', ()=>{
      return agents
    })
  }
}

data 中 mock 假数据 /mock/data/index.js

import mock from 'mockjs';
const Random = mock.Random;
let agents = []
for (let i=0; i<10; i++) {
  agents.push(Mock.mock{
    key: Random.guid()
  })
}
export { agents }

fetch 调用 api /api/agentList.js

export const getAgentList = () => {
  return fetch('/agentList').then(response => {
    return response.json();
  })
}

组件中调用 /app.js

// 省略其它代码
componentDitMount() {
  getAgentList().then(data => {
    this.setState({
      data
    })
  })
}

浏览器使用 mockjss

环境准备

搭建