create-react-app项目使用假数据

做新项目的时候，前端每次要等后端接口准备好再开始，就会延期，等后端接口准备好了，前端这边的项目又会相互紧张，如果前端跟后端同时进行，前期将框架，基础做好，定好接口文档，前端在后端没准备好接口的时候使用假数据，等后端接口准备好，前端项目也已经完成的差不多，就剩下联调，这样一个工程完成，大大减少了时间

接入假数据，两个方向，如果需要假数据，走假数据，不需要，走真实路径，首先需要一个配置文件

/**
 * 用假数据还是真实数据的配置
 * isMock 配置是否使用假数据，true表示使用家数据，false表示不使用假数据
 */
let mockPort = 3000;
export default {
    isMock: true,
    mockHost: 'http://localhost:' + mockPort,
    mockPort: mockPort
};

后期是走假数据还是真实数据，只要在这里配置就好了

然后在请求页面做区分

import ApiList from './api.js';
import config from './config.js';

const isMock = !!config.isMock;

//api的请求
let apiCall = (api, params, success, fail) => {
    let options = ApiList[api];
    fetch(isMock ? '../mock_ajax/'+api+'.json': options.url).then((res) => {
        success(res);
    }).catch(function(error){
        fail(error);
    });
}

这里看到，如果是假数据，走mock_ajax文件加里面的json文件，如果是真实，走真实网路请求

 

这里遇到一个坑，假数据里面的json文件等静态资源需要放在public文件夹里面才能访问

上面的apilist是集合所有api的地方，根据业务的api传递，配置请求参数