張益銘遇到的ng中用 http接後台介面的非同步坑

2022-07-12 12:39:14 字數 1642 閱讀 8199

(seo排名嘗試)

最近筆者在乙個專案中用ng去接後台的介面。因為前後端都是新手,前端的不懂後台,且沒有經驗;後端的不懂前端,也沒有經驗,然後介面bug百出,文件寫得亂。乙個介面,後台改了三次,我也是寸步難行。

首先來看看介面文件,開始這次的非同步坑話題:

可以看到圖③是頁面中要提供後端資料的四個下拉框,圖②是提供給圖③中學校下拉框的資料(當然介面文件資料只是提供參考的,真正資料在sql中,所以顯示在檢視中的資料和介面文件中的資料不大一樣),圖①是提供使用者的預設資料的介面。

看完這些,在這方面稍有經驗的前端都會知道介面文件中的school/campus/grade/department這四個資料應該是以json格式提供,即的格式,這樣才是正確的,為什麼呢?我是掉進了這個大坑之後才醒目過來的:

ng中使下拉框提供預設資料是要ng-model中的值等於x.id,如圖(至於基礎性的問題比如ng-options為什麼這樣寫,不懂的朋友就去翻翻《angularjs權威指南》啦,一本好書來的):

按照後端給的介面,沒有經驗的我傻乎乎地做了一次轉換:

原本筆者以為只要用乙個函式,將圖①的中文(等價於圖②中的name)轉換為圖②中的id即可。是的,這樣是可以,但是會出現每次重新整理的時候在圖③的下拉框位置顯示的預設值時有時無,為什麼呢? 那是因為我忽略了ng中$http請求時非同步的,我們來看官網api:

當我的頁面中有多個$http請求的時候,每次重新整理,因為請求時非同步的,所以沒法控制哪個請求先,哪個請求後,這樣的話,就造成了service.js圖中分別提供namelist和changeobj資料的介面有可能有乙個已經得到相應資料了,並且執行changeasid函式了,但是另乙個介面的資料還沒響應回來,所以會出現無法提供ng-model的值的情況;

當然啦,如果專案中用到了ng,是新手的前端和後端在做互動的時候都應該注意到這個問題,因為筆者飽受此痛苦。

這幾天遇到太多bug,因為是都是新手,知識面都還不全。 不過,希望這次的分享能夠幫助到你們,祝學習愉快!

失物招領系統遇到的坑 遇到不對勁,權小益來搞定

權益小問題 今天在水果店買了些水果,結果發現 是壞的,這可怎麼辦才好,我這不是 虧了嗎 別著急,這件事你可是找對人了。你先拿著你的付款記錄和水果去水果店,找到負責人協商一下,把壞了的水果換了就行啦 哦哦,原來這麼簡單呀,謝謝你啦 超市小糾紛 益益子來教你 如果遇到貨架上的標價與實際支付 不符而導致的...

何潔赫子銘的「莊園愛情」

2013年9月12日在北京何潔和赫子銘舉行了一場花園式婚禮,出道八年的她終於牽手自己的白馬王子與眾多圈中好友一起迎來了這個屬於自己的日子。從乙個略微豐滿的鄰家女孩到如今亭亭玉立的美麗小女人,從乙個選秀新星到如今颱風成熟 唱功紮實的新一代天後,何潔的付出和努力是任何乙個人都看得出來的。當然,在這些日子...

Windows的墓誌銘 Ubuntu來了!

lzy語 今天是ubuntu 7.10發行的日子,在這個特別的日子裡,我將這篇文章釋放到51cto,以此祝福ubunutu 本文發表於 世界 2007年第十六期。由於篇幅所限,世界 有所刪減,而發到51cto部落格的為未刪減之完整版。很遺憾文章的附圖不慎丟失。由於 世界 的讀者定位,本文寫的比較簡略...