Asynchronous Issues, Debug Methods, and Problem-solving Skills.

前言

1. 統整 Sync (同步)Async (非同步)相關資訊,幫助複習觀念。

2. 紀錄自己實務常見 Bug 類型 (包含 Async issues)和常用 Debug 方式

3. Problem-solving 類似 Debug,皆經歷演變過程,一開始可能是暴力解(效率差)或瑕疵解(只解決部分,產出相似結果但仍具備明顯瑕疵),然後分別解決各個小問題,逐漸迭代成當下環境和個人能力所及的最適解

優化過程永不間斷,因此永遠有更優解法

Synchronous & Asynchronous

Synchronous refers to real-time communication where each party receives (and if necessary, processes and replies to) messages instantly (or as near to instantly as possible).

A human example is the telephone — during a telephone call you tend to respond to another person immediately.

Many programming commands are also synchronous — for example when you type in a calculation, the environment will return the result to you instantly, unless you program it not to.

The term asynchronous refers to two or more objects or events not existing or happening at the same time (or multiple related things happening without waiting for the previous one to complete). In computing, the word “asynchronous” is used in two major contexts.

Synchronous 範例

1. let

2. if…else if…else

3. loop:for loop, while loop, forEach…

4. .map(), .reduce()…

Asynchronous 範例

1. Event Listener

2. Callback function

3. setTimeout()

Promise-based

1. Promise-based:指透過 .then() 串接 Promise 物件的語法。

2. Promise-based 目的:

(1) 包裝 Callback 並解決 Callback Hell

(2) 控制流程

3. Promise:

指用於進行流程控制的物件(容器)。

4. Sync (同步):

在 .then() 串接 Promise 物件的 chaining (鏈結)過程,我的解讀是,這整條有序的串接過程,屬於 Synchronous(同步)概念,因為透過 .then() 控制先後順序(由上至下),前段(上面)完成後,流程才跑至後段(下面)。

5. Async (非同步):

但 .then() 所串接的 Promise 物件,其 Promise 物件內部撰寫的 Code則會出現 Async issues,實務上我在 Promise 物件內(指同一層)撰寫多個Model Querying — Finders 或 Function 時,因為各 Finder 或 Function 完成速度不同,可能產生 Bug,例如前面數學 function 還沒計算完,但Server 先已跑至後面 function。

Bug & Debug Methods

Bug

目前實務操作上,發現 Bug 常見主因:

1. Async issues:

Model Querying — Finders 或 Function 完成速度不同,造成:

(1) 產出 Data 的順序錯誤:整理出新陣列時,原本順序被打亂

(2) 計算錯誤:撈資料和數學計算時,因完成速度不同產生計算錯誤。

2. Function 邏輯錯誤:

(1) 函數使用錯誤或有特定使用限制:查詢原文官方文件。

(2) const 或 let 命名

3. 資料結構 (個體):

Sequelize 產出的 Array+Eager Loading,有時包裹多層且有不同名稱,

(1) 在 Controller 處理 Array 時產生錯誤

(2) 或由 Controller 傳至 Views 時,未計算好 render 的階層。

因此我都直接先 console.log 印出,觀察 Data 結構

4. 資料結構 (群體):

Model (Table)彼此之間,

(1) Relation (資料關聯)設定錯誤或小 Typo,造成 Eager Loading

(查找  關聯資料) 發生錯誤。

(2) Primary Key&Foreign Key 關聯設定,造成不同 Model (Table)

產生 Seeder 時發生順序錯誤

5. Depolyment:

(1) 環境設定錯誤

(2) 第三方 API 串接URL 錯誤 (明碼或 .env 等)

6. Typo:

(1) 命名 Symbol 有無 s、大小寫。

(2) .env:等號左右兩側要完全 0 距離貼近,不可空格或加 String 引號。

As briefly mentioned in the associations guide, eager Loading is the act of querying data of several models at once (one ‘main’ model and one or more associated models). At the SQL level, this is a query with one or more joins).

When this is done, the associated models will be added by Sequelize in appropriately named, automatically created field(s) in the returned objects.

In Sequelize, eager loading is mainly done by using the include option on a model finder query (such as findOne, findAll, etc).

Debug Methods

Debug 起手式-console.log

在各流程處設置 console.log,設置位置:

1. .then() 開頭撈出第 1 層資料時,console.log() 印出該原始 Array Data,先理解原始 Data 結構

2. 在各區塊關鍵處的 Function (處理不同 Data)和該區塊結尾處,console.log() 印出資料,檢查:

(1) Server 處理流程發生 Bug 的斷點處

(2) 自己預計產出和實務結果的落差

Developing problem-solving skills by 4 methods: 

1.  Defining and breaking down problems.

大致方法和流程:

(1) 確認目標成果、(2) 拆解問題、(3) 建立數種可能假設、

(4) 透過各種測試,以邏輯驗證推理實際問題點

2.  Self-learning from technical documentation and Stack Overflow community.

(1) 透過科技社群找解答,或融合他人經驗,再發展出自己解法。

(2) 閱讀官方 API 文件:理解運作原理,但要注意新舊版 Code &語法差異。

(3) 隨時具備質疑思維,可參考他人經驗,但不可完全死板相信全部內容, 要儘量理解邏輯和實務應用。

※ Stack Overflow 查詢技巧:

(1) 關鍵字查詢

(2) 轉成英文發問形式搜尋:How to fix/resolve/handle…

3.  Testing concepts on a smaller scale. 

replit Codepen 小規模測試,邏輯成功且驗證成果正確後,

再將經驗複製到專案中。

※ 風險控管:控管專案風險如同投資風險管理

不論自己發展方法或網路上取得的知識,執行主要專案前,儘量先在其他地方嘗試,或評估執行後對專案的影響範圍,確實控管專案風險。

4.  Using the trial-and-error method.

拆解問題和結構後,透過不斷試誤,逐步找出新寫法或優化。

例如:

Sequelize Finder 嵌入 for loop、優化巢狀 loop(暴力解)&對稱合併Array、找出 品牌電商官網 前端屬性&交易幣別引入方式等)

參考資訊

All Posts
×

Almost done…

We just sent you an email. Please click the link in the email to confirm your subscription!

OKSubscriptions powered by Strikingly