---
# System prepended metadata

title: Asynchrony 非同步
tags: [Javascript]

---

# Asynchrony 非同步
###### tags: `Javascript`
非同步(又稱異步)，用以解決Javascript因單線程而產生的應用阻塞。
> [參考影片](https://www.youtube.com/watch?v=CTChl_DYTz0&ab_channel=WenXuanDecode%E6%96%87%E8%BD%A9%E8%A7%A3%E7%A0%81)
:::danger
警告：異步函式只會在所有同步函式執行完畢後才開始執行動作。
:::
## Promise
Promise是異步物件，其中包含resolve及reject兩種靜態方法，當Promise建立後會得到的結果只有成功或失敗。
```javascript
// 建立Promise
new Promise((resolve, reject)=>{
    true ? resolve("成功") : reject("失敗");
})

// 僅於成功時執行
.then(( result )=>{
    return "result-1"
})
.then(( result )=>{
    console.log( result )    // 繼承前者，顯示result-1
})

// 僅於失敗時執行
.catch(( error )=>{
    return "error-1"
})
.catch(( error )=>{
    console.log( error )    // 繼承前者，顯示error-1
})

// 不論成功或失敗，都於結束前執行
.finally(()=>{
    …
})
```

## async / await
async用於定義異步函式，而await用於強制等待結果後再繼續執行，兩者皆屬於Promise的語法糖，實際上與then/catch相同。
> [參考影片](https://www.youtube.com/watch?v=zoZiQJ38bXk&ab_channel=WenXuanDecode%E6%96%87%E8%BD%A9%E8%A7%A3%E7%A0%81)
:::warning
注意：
1. 雖然async將function定義為異步函式，但執行順序與同步函式相同而非最後執行。
2. async使用箭頭函式仍需宣告並呼叫後才會執行。
3. await可以等待所有事物。
:::
```javascript!
async function A(){
    
        //  宣告B，且定義B必須等待Promise的結果
        let B = await new Promise((resolve)=>{
            setTimeout(() => {
                resolve("完成");
            }, 1000);
        });
    
        //  Promise resolve後B取得結果才會執行(捕捉錯誤須使用try catch)
        console.log(B);
    
        //  後續動作在Promise尚未resolve或reject之前將暫停並等待結果
        ...
        
    }
A();
```