# Sync & Async #### Steve Jian --- 開始前一樣稍微複習上學期教的東西～ ---- ### Shell ```bash= $ cd ~ #前往家目錄 $ cd .. #前往上層目錄 $ pwd #顯示目前絕對路徑 $ mkdir <name> #新增目錄 $ cp <from/path> <to/path> #複製檔案 $ mv <from/path> <to/path> #移動或重新命名檔案 $ ls -al #顯示目錄內所有檔案 ``` ---- ### Git ```bash= $ git clone <git remote url> #從遠端repo clone一個repo Ex:Github or Gitlab $ git add . #將工作區內所有檔案加入git暫存區 $ git commit #將暫存內的檔案紀錄並提交版本 $ git push <remote name> <branch name> #將local的commit推送到遠端repo ``` **最基本的就是add -> commit -> push不斷循環** (詳細可參考上學期社課） ---- ### Vue CLI & npm ```bash= $ npm install #安裝package.json內所有依賴 $ npm install <package> --save #安裝一套件並加入package.json內 $ npm install <package> -g #安裝一全域套件 $ npm run <script name> #執行npm腳本 $ vue create <project name> #建立一個Vue專案 ``` ---- ### 特別推廣 Windows Terminal  ---- 經過半年的開發Windows Terminal的穩定性已經夠高該是取代Terminus的時候了 [下載連結](https://www.microsoft.com/zh-tw/p/windows-terminal-preview/9n0dx20hk701?activetab=pivot:overviewtab) ----  點擊設定後會跳出編輯器可修改設定檔 ----  將WSL的guid複製到「defaultProfile」內使預設以WSl開啟 ----  * startingDirectory可設定預設開啟目錄 //WSL$/Ubuntu/home/<username> * colorScheme修改終端及配色 * useAcrylic 啟用壓克力透明 * acrylicOpacity 設定透明程度 * 用不到的shell可將hide屬性設為true --- ### 同步與非同步 ##### Sync & Async ---- JS引擎是單執行緒運作，同時只能做一件事情 但是主執行緒可以新增子執行緒處理其他工作，這個子執行緒將結果回傳給主執行緒且不能變動DOM ---- JS引擎對無法預期執行時間的指令以非同步處理，其他指令以同步處理 * setTimeout、event、ajax 是非同步的指令 * console.log、while、for是同步的指令 ---- 簡單來說js引擎原生的用法多為同步，調用DOM或OS等外部的function多為非同步 ---- 運作的實際流程就是 1. 所有同步任務都在主執行緒上執行，形成一個執行棧（execution context stack）。 2. 主執行緒之外，還存在一個"任務佇列"（task queue）。只要非同步任務有了執行結果，就在"任務佇列"之中放置一個事件。 ---- 3. 一旦"執行棧"中的所有同步任務執行完畢，系統就會讀取"任務佇列"，看看裡面有哪些事件。那些對應的非同步任務，於是結束等待狀態，進入執行棧，開始執行。 4. 主執行緒不斷重複上面的第三步。 ---- 同步指令一個一個執行，遇到非同步指令開子執行緒當有結果後丟入任務佇列等待，然後運作下一個同步指令，當主執行緒處理完所有同步指令後會載入任務佇列到主執行緒，不斷循環 ----  ---- #### 搶答! ```javascript= setTimeout(function(){console.log("0sec")}, 0); console.log("Hi"); ``` 結果是什麼? ###### ```setTimeout```是指過幾秒後做一件事 ###### 第一個參數是函式第二個是時間是一種非同步操作 --- ### 了解同步與非同步的不同後我們要深入探討非同步的用法 ---- 非同步有一個清晰的流程，在子執行緒做的事情處理完的後續操作(也就是在任務佇列的任務)才會動作 Ex: 網頁送出ajax請求 -> (在子執行緒運作) 得到的回應及後續的操作 -> (在任務佇列等待) ###### ~~(怎麼有一種同步的感覺????我在說三小)~~ ---- 當子執行緒完成後再任務佇列等待的任務我們稱為callback function 非同步的callback function都有其規範須依照各自的文檔使用 ---- callback function的目的是使開發者能準確掌握非同步的先後順序 試想開發者無法知道誰先執行誰後執行 OMG!簡直是場災難 ---- 但是為了確保大量的非同步操作的執行順序，也就是在callback function內放入一個非同步指令就會形成Callback Hell  ---- 為了避免Callback Hell的出現，promise就誕生了！ 在ES6中對非同步的操作多了promise的用法 ---- Promise 是一個物件，代表著一個尚未完成，但最終會完成的一個動作 ```javascript= let example = function (time) { return new Promise((resolve, reject) => { setTimeout(() => { if (time < 5000) resolve("success!"); else reject("time out"); }, time); }); }; example(5000) .then((res) => { console.log(res); }) .catch((err) => { console.log(`you ${err}`); }); ``` ---- 與callback相比promise使程式碼更容易閱讀及維護 後來ES7中又加入了async/await用法使非同步寫起來像同步又保有原本的特性 ----  --- ## 練習時間~ ---- ### 完成以下條件的程式 (用JS) 程式一執行print 「start」 2秒後print 「過了2秒」 5秒後 print 「過了5秒」 緊接者立刻顯示 「finish!」 ---- ```javascript= console.log("start"); let example = function (time) { return new Promise((resolve) => { setTimeout(() => { resolve(`過了${time / 1000}秒`); }, time); }); }; example(2000) .then((res) => { console.log(res); return example(5000); }) .then((res) => { console.log(res); console.log("finish!"); }); ``` --- 在vue專案中最常用到非同步的場合 就是使用api抓資料 可能按下一個按鈕觸發或是在頁面產生前觸發 ---- Vue官方推薦使用axios套件進行API請求 clone [這個](https://github.com/steve5631/EX.code/tree/async) repo 上面有axios及promise在Vue上的用法 ----  --- ## 練習時間~ 修改剛剛clone的Vue專案 在一個input窗內輸入城市英文名稱 送出後顯示其經緯座標 ----  --- 非同步的概念理解後操作起來就不再那麼困難了 ~~(我第一次接API繞了很大一圈)~~ --- # *fin*