ng中用$http接後台介面的非同步坑

標籤：

　　最近筆者在一個項目中用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，因為是都是新手，知識面都還不全。 不過，希望這次的分享能夠協助到你們，祝學習愉快！

 

 

 

 

ng中用$http接後台介面的非同步坑