iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0
Modern Web

Angular 常見問題大小事系列 第 7

程式碼流程規劃之...日記文

今天,依然是篇日記文,每天遇到的事有太多好寫了。

一早
同事:Mandy, 今天是 deadline 囉,做好了嗎?
我:還差了 bala bala...
同事:有什麼需要協助的話,要快說哦
我:嗯...好 /images/emoticon/emoticon37.gif

接著繼續處理未完的專案


情境

這次的情境是,表單裡有包含著圖片上傳,機制是當表單需要
新增圖片時,需要先將圖檔上傳,得到後端給的圖片 id 後再把這個 id 塞到表單裡
更新圖片時,把原有的圖檔 id 包含新的圖檔一起傳送給後端,
刪除圖片時,就要把原有的圖片 id 打到後端
以上這些動作都要先處理完,接著再一起更新表單

所以流程會是,先傳送圖片,等圖片處理完後更新表單,再將表單送出。


實作

一開始我的程式碼是這樣寫的

結果遇到了圖片非同步問題,當我按 submit 後,每傳完一張圖片,就會打一次表單 api,
傳了三次 表單送出就會打三次,這不是我要的RRRR /images/emoticon/emoticon04.gif


修改後

將程式碼流程改這樣

是我要的結果!但其實這樣寫下來 邏輯上有點複雜
但時程上有點趕,就先將 code 傳到 gitlab 上


CodeReview

經過同事神一般的巧手,將程式碼的流程改為如圖所示,流程看起來清楚多了(心裡充滿感激)

actionngrx裡的狀態管理的一部份

combineLatest 為 rxjs 裡的組合符
concatMapswitchMap 皆是 rxjs 裡的 operators

concatMap 還有另外處理邏輯(crud)流程


後記

今天,主要的記事是對程式碼的流程規畫,所以沒有實作面
這次也學到了concatMap的處理方式
(看了很多次 還沒實際使用過,所以一開始在使用時,對concatMap的流向有所誤解)

這天在回家的路上,火車坐過頭,連 ubike 也騎超過站點忘了要還車 QQ
一定是我太累惹 囧~~


上一篇
Angular 圖片上傳之...日記文
下一篇
Angular Reactive Forms 自訂表單驗証器
系列文
Angular 常見問題大小事31

尚未有邦友留言

立即登入留言