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傳遞，配置請求參數