做新項目的時候，前端每次要等后端接口準備好再開始，就會延期，等后端接口準備好了，前端這邊的項目又會相互緊張，如果前端跟后端同時進行，前期將框架，基礎做好，定好接口文檔，前端在后端沒準備好接口的時候使用假數據，等后端接口準備好，前端項目也已經完成的差不多，就剩下聯調，這樣一個工程完成，大大減少了時間

接入假數據，兩個方向，如果需要假數據，走假數據，不需要，走真實路徑，首先需要一個配置文件

/*** 用假數據還是真實數據的配置* 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傳遞，配置請求參數

?

轉載于:https://www.cnblogs.com/wzndkj/p/9022788.html

總結

以上是生活随笔為你收集整理的create-react-app项目使用假数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。