(SEO排名嘗試)
最近筆者在一個項目中用ng去接后台的接口。因為前后端都是新手,前端的不懂后台,且沒有經驗;后端的不懂前端,也沒有經驗,然后接口bug百出,文檔寫得亂。一個接口,后台改了三次,我也是寸步難行。
首先來看看接口文檔,開始這次的異步坑話題:
① ②
③
可以看到圖③是頁面中要提供后端數據的四個下拉框,圖②是提供給圖③中學校下拉框的數據(當然接口文檔數據只是提供參考的,真正數據在sql中,所以顯示在視圖中的數據和接口文檔中的數據不大一樣),圖①是提供用戶的默認數據的接口。
看完這些,在這方面稍有經驗的前端都會知道接口文檔中的school/campus/grade/department這四個數據應該是以json格式提供,即{id:"name"}的格式,這樣才是正確的,為什么呢?我是掉進了這個大坑之后才醒目過來的:
ng中使下拉框提供默認數據是要ng-model中的值等於x.id,如圖(至於基礎性的問題比如ng-options為什么這樣寫,不懂的朋友就去翻翻《angularjs權威指南》啦,一本好書來的):
按照后端給的接口,沒有經驗的我傻乎乎地做了一次轉換:
controller.js:
service.js:
原本筆者以為只要用一個函數,將圖①的中文(等價於圖②中的name)轉換為圖②中的id即可。是的,這樣是可以,但是會出現每次刷新的時候在圖③的下拉框位置顯示的默認值時有時無,為什么呢? 那是因為我忽略了ng中$http請求時異步的,我們來看官網API:
當我的頁面中有多個$http請求的時候,每次刷新,因為請求時異步的,所以沒法控制哪個請求先,哪個請求后,這樣的話,就造成了service.js圖中分別提供nameList和changeObj數據的接口有可能有一個已經得到相應數據了,並且執行changeAsId函數了,但是另一個接口的數據還沒響應回來,所以會出現無法提供ng-model的值的情況;
當然啦,如果項目中用到了ng,是新手的前端和后端在做交互的時候都應該注意到這個問題,因為筆者飽受此痛苦。
這幾天遇到太多bug,因為是都是新手,知識面都還不全。 不過,希望這次的分享能夠幫助到你們,祝學習愉快!