【React自制全家桶】七、React實現ajax請求以及本地數據mock


一、下載axios插件

yarn add axios

  

二、React的ajax請求代碼如何放置

建議放置在生命周期函數之componentDidMount()中

 

三、ajax之get請求

        axios.get('url')
            .then(()=>{
                // 成功
            alert('success');
        })
            .catch(()=>{
            // 失敗
            alert('false');
        })

  解析:get內放置url,then后是請求成功的回調函數,catch是請求失敗的回調函數

 

四、本地mock(模擬)請求

web開發時,一般都是前后端分離。因而前端開發時常常需要進行模擬請求(即mock)來檢測數據渲染情況。

推薦mock工具: charles。

 

五、下載安裝charles

網址:https://www.charlesproxy.com/download/

 

六、寫入模擬數據

新建json文件:app.json(建議將文件放在你的React項目同級目錄)

寫入

["Dell","Odhle","paiobodewu"]

 

七、打開charles修改端口

1、打開charles

2、點擊菜單欄的tools

3、選擇Map local...

4、新建:

只需要修改

(1)Path修改為你的ajax請求的url地址

(2)Location path修改為你的json文件地址


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM