iT邦幫忙

2023 iThome 鐵人賽

DAY 20
1
Software Development

再騙小心沒朋友🥵 用LIFF實作LINE整人工具系列 第 20

[Day20] 不懂JavaScript 只好等著被整😔 Async Await篇

  • 分享至 

  • xImage
  •  

雖然 Promise 的出現終結了 ES6 之前的 Callback Hell,但是就語法長度來看 Promise 還是不夠精簡,因此在 ES7 的時候出現 async await 的用法。async await 將原本執行多行 Promises 程式簡化成一行,大大提高程式的可讀性,也在整人程式中的等待接收 LINE 遠端資料扮演重要角色。

Async Await的概念

Async 是用來宣告非同步函式的語法,只要在 function 前面加上 async 就可以建立一個回傳 Async Function 物件的非同步函式。函式本身屬於非同步,但內部是用同步的方式運行非同步程式碼
Await 顧名思義就是等待的意思,它會確保一個 promise 物件都 resolve 或 reject 後才會繼續執行之後的動作。只要看到 async function 就表示裡面可以寫 await 的同步語法,而 await 一定要在 async function 內運行。

建立一個 async 物件

async function name(param) {
  // statements
}
  • name:函式名稱。
  • param:函式代的參數,可以不填也可以填多個,每個參數之間要用「,」隔開。
  • statements:函式的敘述部分,通常會使用 await 表達式。
    async 函式會回傳一個 promise,其他的值會自動被包裝在一個 resolved 的 promise 中:
async function foo() {
  return 1;
}


從上圖可以觀察到 async function 也會把非 promise 的值包裝進去。

建立 async/await 函式

await 會讓 JavaScript 程式等待直到 promise 完成並回傳結果,await 只能在有加上 async 的函式內使用,如果在一般函式使用會出現SyntaxError錯誤:

下面建立一個等待一個1秒後會 resolved 的 Promise,可以觀察到 await 在 Promise 完成前將程式暫停,直到Promise 完成後才會印出 Promise resolved. 的文字:

async function foo() {
  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("Promise resolved."), 1000)
  });

  let result = await promise; 
  console.log(result);
}


其中 setTimeout() 是 JavaScript 中的控制時間函式,可以指定在某段時間(單位為毫秒)的延遲後去執行一次指定的程式碼或函式。指令如下:

setTimeout(function_name, time);

下列範例為在三秒後印出 wait 3 sec.:

setTimeout(print, 3000);

function print() {
	console.log("wait 3 sec.");
}


上一篇
[Day19] 不懂JavaScript 只好等著被整😔 Promise篇
下一篇
[Day21] 架一個可以用 LINE 來整人的網站😍 - HTML架構
系列文
再騙小心沒朋友🥵 用LIFF實作LINE整人工具30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

1
arguskao
iT邦新手 3 級 ‧ 2023-10-09 18:14:22

講到我的痛了

我就是不太懂js

lulu_meat iT邦研究生 5 級 ‧ 2023-10-10 11:54:25 檢舉

沒關係我也不太懂

我要留言

立即登入留言