使用Easy Mock模擬數(shù)據(jù)，ajax請(qǐng)求數(shù)據(jù)小例子

Corwien 發(fā)布于2019-08-21 17:39 / 2876人閱讀

摘要：學(xué)習(xí)小問題和小理解解決異步處理的問題實(shí)際應(yīng)用中有很多問題消耗時(shí)間，比如傳輸，數(shù)據(jù)庫(kù)處理，文件的讀寫消耗時(shí)間等，通過回調(diào)，當(dāng)成功返回時(shí)執(zhí)行，可以減少頁(yè)面更新時(shí)間。

最近學(xué)習(xí)了一下用Easy Mock模擬數(shù)據(jù)，然后通過ajax請(qǐng)求數(shù)據(jù)返回顯示到頁(yè)面上，完成一個(gè)請(qǐng)求數(shù)據(jù)和顯示的過程，下面通過一個(gè)獲取用戶信息例子來說明一下：

1. 使用Easy Mock模擬數(shù)據(jù)

在Easy Mock上新建一個(gè)項(xiàng)目，項(xiàng)目基礎(chǔ)url為ajaxData，打開項(xiàng)目，創(chuàng)建接口

將獲取方式為get，接口的url設(shè)為getUserInfo

添加用戶信息數(shù)據(jù)：用戶頭像 avator，姓名 nickname，性別 sex

2. 請(qǐng)求獲取數(shù)據(jù)，更新頁(yè)面

ajax主動(dòng)向后端請(qǐng)求，使用jQuery中的getJSON()函數(shù)，從服務(wù)器加載json編碼的數(shù)據(jù)，更新dom

3. 學(xué)習(xí)函數(shù)式編程的一些想法

數(shù)據(jù)通信和渲染頁(yè)面是兩件事，我們要將它們放開來做，將之前更新dom的代碼封裝成一個(gè)renderUserInfo()函數(shù)，只需要傳一個(gè)參數(shù)data就可以實(shí)現(xiàn)渲染頁(yè)面

如何實(shí)現(xiàn)數(shù)據(jù)通信？
通過異步回調(diào)函數(shù)，先請(qǐng)求這個(gè)鏈接，請(qǐng)求傳輸數(shù)據(jù)需要時(shí)間，此時(shí)會(huì)先執(zhí)行下面的getUserInfo(renderUserInfo)渲染頁(yè)面，當(dāng)獲取數(shù)據(jù)成功是返回執(zhí)行callback(data)，完成更新頁(yè)面。

學(xué)習(xí)小問題和小理解：
js解決異步處理的問題實(shí)際應(yīng)用？
js中有很多問題消耗時(shí)間，比如傳輸ajax，數(shù)據(jù)庫(kù)處理，文件的讀寫消耗時(shí)間等，通過callback回調(diào)，當(dāng)成功返回時(shí)執(zhí)行，可以減少頁(yè)面更新時(shí)間。