自學分享 - 非同步處理與promise入門

自學分享 - 非同步處理與promise入門

반응형

在 alpha camp 的學期 2-3 ，課程內容與作業的難度都有相當程度的提升。前端部分遇到的難題，主要是html結構的佈局;經常直到css進行一半時，才發現html需要修正，修改起來也是大工程。然而，讓我真的覺得有卡關感覺的地方，是選修課程的 非同步觀念與實作 。

之前已有在線上課程中聽過非同步的觀念，甚至也知道 callback function、promise、async function/await 的演變關係。觀念的理解上，我自認有十足的把握。

javascript 程式語言為 single-thread programming language，程式碼一般的運行方式由上而下;且一次只完成一件事。但由於網路上每個動作執行皆需傳輸時間，若每個步驟都待前項程式碼完成，才開始執行，則運行效率低落。因此引進非同步概念，

파일: setTimeoutadEventListener …

上述觀念自認為好理解，但當開始進行題目實作時，發現很多程式執行的前後順序與變數宣告其實很不熟練。在第一個 callback function 排序作業中就卡關很久。

在卡關時，嘗試使用 console.log()，來理解每個參數互相回傳的關係;嘗試更改函式與參數名稱，對應前後呼叫關係 (題目中參數都叫做 callback，不易區別);嘗試查詢 callback 相關文章 (但發現網路上的文章大多都由淺跳深的速度太快)... 等等。後續進行 promise 時，也有遇到相同的問題。

callback function 最重要的邏輯，其實在於函式呼叫的順序。因此確認目標為有效解決函式呼叫順序的問題

도그 페이지 page 콜백 함수:

先從網路抓到照片 (此步驟需要時間)

再執行 res.end 去生成 html 內容

如果依循以上步驟，應可順利生成含有照片的頁面。

第一次嘗試，使用 settimeout 延遲 res.end 的時間。當延遲設定大於 500 ms 時可以順利生成圖片;若小於 500 ms 則有機率無法生成圖片。此方法雖然可解決圖片生成的問題，但實務上無法確保延遲設定多少才能大過伺服器實際

第二次嘗試，參考教案的方式將 res.end 放入前一個函式取得資料的後方位置，確認可以100%產生含有照片的頁面。

dog-page 的 promise 包裝練習中，則是以上述步驟為原則，參考教案搬移程式碼，並於網路上查找文章，學習取得 promise 內容物的方式。

回頭看這幾天被非同步實作所困，並逐步理解的過程，覺得有成就感。雖然對於非同步的各種解決方式，還只是入門級，但有嘗到一點學習解決問題的過程。

在這次經驗中，依序執行:停止動作 > why 的思考 (觀念) > how 的思考 (語法) > try

期待自己在接下來遇到問題與挑戰時，總是回到最根本的地方來進行思考。透過這個解決問題的流程，逐一突破各種難關。當然在超過停損點後，學習用正確的方式向他人請教，也是一種辦法。

from http://it-ground.tistory.com/273 by ccl(A) rewrite - 2021-10-09 19:27:49