程序码流程规划之...日记文

今天，依然是篇日记文，每天遇到的事有太多好写了。

一早
同事：Mandy, 今天是 deadline 罗，做好了吗?
我：还差了 bala bala...
同事：有什麽需要协助的话，要快说哦
我：嗯...好

接着继续处理未完的专案

情境

这次的情境是，表单里有包含着图片上传，机制是当表单需要
新增图片时，需要先将图档上传，得到後端给的图片 id 後再把这个 id 塞到表单里
更新图片时，把原有的图档 id 包含新的图档一起传送给後端，
删除图片时，就要把原有的图片 id 打到後端
以上这些动作都要先处理完，接着再一起更新表单

所以流程会是，先传送图片，等图片处理完後更新表单，再将表单送出。

实作

一开始我的程序码是这样写的

结果遇到了图片非同步问题，当我按 submit 後，每传完一张图片，就会打一次表单 api,
传了三次 表单送出就会打三次，这不是我要的RRRR

修改後

将程序码流程改这样

是我要的结果！但其实这样写下来 逻辑上有点复杂
但时程上有点赶，就先将 code 传到 gitlab 上

CodeReview

经过同事神一般的巧手，将程序码的流程改为如图所示，流程看起来清楚多了(心里充满感激)

action是ngrx里的状态管理的一部份

combineLatest 为 rxjs 里的组合符
concatMap 与 switchMap 皆是 rxjs 里的 operators

concatMap 还有另外处理逻辑(crud)流程

後记

今天，主要的记事是对程序码的流程规画，所以没有实作面
这次也学到了concatMap的处理方式
(看了很多次 还没实际使用过，所以一开始在使用时，对concatMap的流向有所误解)

这天在回家的路上，火车坐过头，连 ubike 也骑超过站点忘了要还车 QQ
一定是我太累惹 囧~~