mock 模擬資料以及介面呼叫遇到的 axios的坑
阿新 • • 發佈：2019-02-05
專案用的 react+dva，由於後端介面還沒有好，所以需要用mock創資料，攔載 ajax ，返回 mock 裡面的資料。那麼問題來了，怎麼用 mock 呢？看了官方文件，我表示沒有看明白。問團兒，這個問題，團兒解答：在你現在的裡面寫"get/api":[]，get要大寫，/api就是你的介面地址，上面要引用mock，import mock from ‘mockjs’。下面還記錄了我在 mock 資料，介面中遇到的問題。如何使用 mock.js ? 第一步：安裝 npm install mockjs --save-dev 或者 <script> 標籤引入 
Mock 的地址要跟介面的地址一樣，然後實際傳的時候是用的mock資料，等後端介面好了之後，再把原先介面放出來
程式碼截圖如下：
Mock 的地址要跟介面的地址一樣，然後實際傳的時候是用的mock資料，等後端介面好了之後，再把原先介面放出來
第二種：用 $.ajax() 方法獲取
第三種：用 fetch() 方法獲取資料
第四種：用 ajax 方法獲取
React 如何用 axios 做介面？
我用的 axios 來調介面，用jq的 $.ajax({}) 報錯，顯示 promise 語法不對。我也沒研究，先弄出來一個再說。 axios 的配置： npm install axios --save-dev 在 index.js 頁面中引入 import axios from ‘axios’ 然後開始用 react 的生命週期裡面的函式進行介面呼叫。程式碼如下：然後我在控制檯看到了有data資料，但是頁面上並沒有渲染。在這裡要說明一下，專案原來用的是fetch，然後我用了 axios 。fetch 是自己賦值資料的。但是 axios 是不行的，需要手動賦值。那麼問題來了？怎麼賦值呢？在哪裡賦值呢？
然後得出的結果就是列表顯示出來了。
其實這當中還有一個問題，我在這個const裡面本來是list:dataSource 這樣定義的，但是列表渲染不出來，所以才用的this.state.dataSource 這個方法。
這 react 的工具裡面，我看到了props 裡面的list 是空的，但是 state 裡面已經存了資料。然後我問了魚叔知道了為啥。就是剛才的this.state.dataSource 的問題。
在 ant Design 中 table 元件裡，可以預設顯示一條資料的，然後兩個如果都寫的話會報錯，這裡扯到解構函式的問題。
