Day28 async await

15th鐵人賽

yenchenjulia

團隊好想工作室 v7.0

2023-10-13 09:38:10

423 瀏覽

分享至

技術筆記

最後一篇技術文囉！想了很久最後一篇要寫什麼，本來想寫正規表達式或探究this，最後選擇async await，雖然有點超出我目前學習範圍，但由於前幾天再研究非同步，想一氣呵成，不想要結束在半路上迷路的感覺。

async await

什麼是async?

async是一個特定函式，其內回傳的一定是一個promise。如果不是，也會自動被包裝成promise

async function getPromise() {
  return 'hello'
}


const dataPromise = getPromise()
console.log(dataPromise);

https://ithelp.ithome.com.tw/upload/images/20231013/20163234YEeVW1jGWs.png

因為回傳的是一個promise，所以可以用一般的promise.then的方式控制

const p = new Promise( function (resolve, reject) {
  resolve('promise resolved value!')
})

async function getPromise() {
  return p
}

p.then(res => console.log(res))

//promise resolved value!

複習一般promise handling

const p = new Promise( function (resolve, reject) {
	resolve('promise resolved value!')
})


function getPromise() {
	p.then(res => console.log(res))
}

getPromise()

async await handling
- await只能用在async函式中，不能單獨使用
```
await function name(params) {
//more coding...	
}
```
- async及await組合在一起，用來控制promise函式

const p = new Promise( function (resolve, reject) {
	resolve('promise resolved value!')
})

async function handlePromise() {
	const val = await p
	console.log(val);
}

handlePromise()

兩者間的不同：如果我們把promise函式p內設setTimeout讓行為在10秒後才被觸發
- 一般promise handling
  - getPromise()內新增console.log('hello')
```
const p = new Promise( function (resolve, reject) {
setTimeout(() => {resolve('promise resolved value!')},     10000)
})


function getPromise() {
  p.then(res => console.log(res))
  console.log('hello');
}

getPromise()
```
  印出順序會是先'hello'，10秒後再印出'promise resolved value!'
async await handling
- handlePromise()內同樣新增console.log('hello')
```
const p = new Promise( function (resolve, reject) {
etTimeout(() => {resolve('promise resolved value!')},     10000)
})


async function handlePromise() {
 const val = await p
 console.log('hello');
 console.log(val);	
}

handlePromise()
```
會在10秒後先印出hello再印出promise resolved
- async await背後執行原理
  - 當JS引擎呼叫handlePromise後，handlePromise佇列在callstack中，隨即進入函式，遇到關鍵字await，會先把handlePromise丟出callstack，待指定秒數10秒後，再重新把handlePromise放入callstack並執行，所以印出狀態會跟一般的promise handling有所差異
  - 現在假設我們把兩個promise同時放入async function的情況
  - 範例1:p1指定5秒後執行，p2指定10秒後執行
```
const p1 = new Promise( function (resolve, reject) {
setTimeout(() => {resolve('hello, my friend.')}, 5000)
})

const p2 = new Promise(function (resolve, reject) {
    setTimeout(() => { resolve('how are you?') }, 10000)
})


async function handlePromise() {
    const val1 = await p1
    console.log(val1);	

    const val2 = await p2
    console.log(val2);

}

handlePromise()
```
  會依序在5秒後印出'hello, my friend.'10秒後印出'how are you?'
  -範例2:相反過來，p1指定10秒後執行，p2指定5秒後執行
```
const p1 = new Promise( function (resolve, reject) {
setTimeout(() => {resolve('hello, my friend.')}, 10000)
})

const p2 = new Promise(function (resolve, reject) {
    setTimeout(() => { resolve('how are you?') }, 5000)
})


async function handlePromise() {
    const val1 = await p1
    console.log(val1);	

    const val2 = await p2
    console.log(val2);

}

handlePromise()
```
  會在10秒後依序印出'hello, my friend.'跟'how are you?'
  - 因為handlePromise()會在遇到await p1就被丟出callstack等待10秒後，再回到callstack執行console.log(val1)，但由於JavaScript為同步語言且不會等待的特性，p2在5秒時已存在，所以10秒後就會同時依序印出。
Error handling
- 可以用前幾天提到的try catch
- 因為async function回傳的是一個promise，所以也可以用傳統的.catch
async await跟原本的promise比，好在哪？
- 做的事情其實都一樣，但await function可以取代之前promise內的callback，也可以避免一大串.then組合起來的promise chaining，寫起程式來更直覺更好懂，所以有另外一個講法說async await是語法糖。