※ 認識非同步概念(四)

更新於 發佈於 閱讀時間約 6 分鐘

認識 async/await基本概念:

async 的本質是 promise 的語法糖 ,只要 function 標記為 async,就表示裡頭可以撰寫 await 的同步語法,而 await 顧名思義就是「等待」,它會確保一個 promise 物件都解決 ( resolve ) 或出錯 ( reject ) 後才會進行下一步,當 async function 的內容全都結束後,會返回一個 promise

Async/Await 語法結構:

raw-image

使用時要把握三個原則:

  1. 要先確認有 Promise 物件實例,也就是已經定義好 resolve/reject,才能使用 async/await
  2. 在流程中正確設定關鍵字:
  • 把後續流程用一個 async function 包裝起來
  • 設定好 async function 之後,在要運用非同步處理的地方加上 await 關鍵字
  1. 注意 async/await 和 then 不可以混搭使用

錯誤處理:需要進行錯誤處理時,會採用 try...catch ,在更外層包一層 try {}

raw-image


什麼時候可以用 async/await?

在使用 async/await 前,需要先確認有 Promise 物件。意思就是說,如果原本是用 callback function,還是要先封裝成 Promise。

async/await範例(一)

function getFirstInfo() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('first data')
}, 1000)
})
}
function getSecondInfo() {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject('second error')
}, 2000)
})
}

async function getGroupInfo() {
//接到reject處理錯誤
try {
//接到resolve處理成功
//代表等到第一筆資料回傳後,才印出結果和請求第二筆資料
const firstInfo = await getFirstInfo()
console.log(firstInfo)
//代表等到第二筆資料回傳後,才印出結果
const secondInfo = await getSecondInfo()
console.log(secondInfo)
} catch(err) {
console.log("err", err)
}

}
getGroupInfo()//印出"first data", "err", "second error"

範例(二)

Promise.all寫法

function getFirstInfo() {
return new Promise((resolve, reject) => {
setTimeout(() => {
//1秒後回傳結果
resolve('first data')
}, 1000)
})
}
function getSecondInfo() {
return new Promise((resolve, reject) => {
setTimeout(() => {
//2秒後回傳結果
resolve('second data')
}, 2000)
})
}
Promise.all([ getFirstInfo(), getSecondInfo()])
.then(([firstInfo, secondInfo]) => {
console.log(firstInfo)
console.log(secondInfo)
}) //印出"first data", "second error"

async/await寫法

function getFirstInfo() {
return new Promise((resolve, reject) => {
setTimeout(() => {
//1秒後回傳結果
resolve('first data')
}, 1000)
})
}
function getSecondInfo() {
return new Promise((resolve, reject) => {
setTimeout(() => {
//2秒後回傳結果
resolve('second data')
}, 2000)
})
}
async function getGroupInfo() {
try {
const firstInfo = getFirstInfo()
const secondInfo = getSecondInfo()
//同步發出非同步請求,並等到兩秒後(非三秒)成功獲得兩筆回傳後,才印出結果
const [firstData, secondData] = await Promise.all([firstInfo, secondInfo])
console.log(firstData, secondData)
} catch(err) {
//處理錯誤回傳
console.log( error)
}
}
getGroupInfo()//印出"first data", "second error"
全端網頁開發專業知識分享
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
什麼是 Promise.all? 在有多個 Promise 的時候,使用 Promise.all 可以確保「所有的 Promise 都執行完以後,才進入 then」。 Promise.all 語法結構: Promise.all 接受的參數是陣列形式。 什麼時候要使用 Promise.all?
※ Promise基本介紹 什麼是 Promise? Promise 是 JavaScript 的一個構造函式,用於創建表示非同步操作的物件實例。使用 new Promise() 時,你會創建一個包含非同步操作的實例,這個實例可以透過其繼承的方法如 then(), catch(), 和 fina
※ 同步概念: 單純地「由上而下」執行程式碼,而且一次只執行一件事,也就是「按順序執行,一個動作結束才能切換到下一個」。缺點是你需要「等待」事情執行完畢,才能繼續往下走。 ※ 非同步概念: 盡可能讓主要的執行程序不需要停下來等待,若遇到要等待的事情,就發起一個「非同步處理」,讓主程序繼續執行,
※ 函式進階介紹: 箭頭函式: 箭頭函式相比於一般函式,語法相當簡潔。除了少去 function 關鍵字,如果只有一個參數,箭頭函式可以省略括號;只有一行程式碼,就是直接簡單返回一個變數或簡單的表達式,可以省略大括號和 return。例子如下: //一般函式計算平方用的寫法 const squ
※ 函式基礎介紹: ※ JavaScript 特殊的函式特性: 函式可以當成值來傳遞 (可以放進變數或放進物件) 函式可以當成函式的參數 callback - 在特定事件中觸發函式 (非同步特性) ※ 函式的基本寫法: ※ 調用 (invoke) 函式: "調用" 意指呼叫或執行
※ switch用法: ​switch是 JavaScript 中的一個控制結構,是一種更結構化的方法來替代多個 if...else 語句,特別是當需要根據同一變數的多個值進行不同操作時非常有用。 ※ switch語法: switch 語句首先評估括號內的表達式 (expression)。
什麼是 Promise.all? 在有多個 Promise 的時候,使用 Promise.all 可以確保「所有的 Promise 都執行完以後,才進入 then」。 Promise.all 語法結構: Promise.all 接受的參數是陣列形式。 什麼時候要使用 Promise.all?
※ Promise基本介紹 什麼是 Promise? Promise 是 JavaScript 的一個構造函式,用於創建表示非同步操作的物件實例。使用 new Promise() 時,你會創建一個包含非同步操作的實例,這個實例可以透過其繼承的方法如 then(), catch(), 和 fina
※ 同步概念: 單純地「由上而下」執行程式碼,而且一次只執行一件事,也就是「按順序執行,一個動作結束才能切換到下一個」。缺點是你需要「等待」事情執行完畢,才能繼續往下走。 ※ 非同步概念: 盡可能讓主要的執行程序不需要停下來等待,若遇到要等待的事情,就發起一個「非同步處理」,讓主程序繼續執行,
※ 函式進階介紹: 箭頭函式: 箭頭函式相比於一般函式,語法相當簡潔。除了少去 function 關鍵字,如果只有一個參數,箭頭函式可以省略括號;只有一行程式碼,就是直接簡單返回一個變數或簡單的表達式,可以省略大括號和 return。例子如下: //一般函式計算平方用的寫法 const squ
※ 函式基礎介紹: ※ JavaScript 特殊的函式特性: 函式可以當成值來傳遞 (可以放進變數或放進物件) 函式可以當成函式的參數 callback - 在特定事件中觸發函式 (非同步特性) ※ 函式的基本寫法: ※ 調用 (invoke) 函式: "調用" 意指呼叫或執行
※ switch用法: ​switch是 JavaScript 中的一個控制結構,是一種更結構化的方法來替代多個 if...else 語句,特別是當需要根據同一變數的多個值進行不同操作時非常有用。 ※ switch語法: switch 語句首先評估括號內的表達式 (expression)。
你可能也想看
Google News 追蹤
Thumbnail
大家好,我是woody,是一名料理創作者,非常努力地在嘗試將複雜的料理簡單化,讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程,今天想跟大家聊聊,除了料理本身,料理創作背後的成本。
Thumbnail
哈囉~很久沒跟各位自我介紹一下了~ 大家好~我是爺恩 我是一名圖文插畫家,有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快!隨著時間過去,創作這件事好像變得更忙碌了,也很開心跟很多厲害的創作者以及廠商互相合作幫忙,還有最重要的是大家的支持與陪伴🥹。  
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
人這輩子總是在等, 等將來 等不忙 等下次 等有時間 等有條件 等有錢了 可是後來 等沒了選擇 等來了遺憾 您,還等啥? 輕輕說聲 早安,別等了!
Thumbnail
分享一個有趣的套件,名為 await-to-js。 可以讓 Promise 與 await 的寫法更簡潔。
Thumbnail
簡要說明 JavaScript 的 Event Loop JavaScript 是單執行緒 (single-threaded) 語言,這意味著它一次只能執行一件事,因此所有函式都需要排隊等待執行,這被稱為同步 (synchronous)。在同步操作中,若函式過多或過於複雜,會導致程式阻塞 (blo
Thumbnail
可能包含敏感內容
迫不及待行動,耐心等待結果
Thumbnail
看到標題的朋友可能會覺得奇怪, 我們常常看到的不就是time.sleep嗎? 怎麼又多出了asyncio.sleep呢? 這兩者究竟差異在哪邊呢? 我們都知道sleep就是睡眠的意思, 那麼在程式的運作上就是等待, 等待一段時間之後繼續完成任務, time.sleep的部份很好理解, 就是在該段程
Thumbnail
不必急著給出答案 時間可以證明一切
Thumbnail
關於「等待」它到底是一個正向辭彙還是一個負面語詞呢?等待的目的為何?等待的過程又是怎樣的心境?生命中有太多等待,我們必須學會等待,還要學會習慣眾多不盡如人意的等待。有時,等待也可以視為人生旅途中的一段小憩,小憩結束了,我們的旅途還要繼續,繼續下一個等待。 
Thumbnail
非同步程式設計(Asynchronous programming) 或是簡單的稱之為 async,它是一種並發程式模型(concurrent programming model),其目的就是讓多個任務能同時在作業系統的執行緒上執行,並透過 async/.await 保留同步。
Thumbnail
為什麼需要非同步? 我們在「【Web微知識系列】 Web Workers」有介紹到在瀏覽器可執行腳本Javascript環境底下如何完成非同步的操作, 主要是為了讓任務更有效率的進行, 不會因為一個非常耗時的工作堵塞住整個服務, 導致無法服務他人的窘境。 大家應該經常在餐廳裡會看到服務員協
Thumbnail
大家好,我是woody,是一名料理創作者,非常努力地在嘗試將複雜的料理簡單化,讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程,今天想跟大家聊聊,除了料理本身,料理創作背後的成本。
Thumbnail
哈囉~很久沒跟各位自我介紹一下了~ 大家好~我是爺恩 我是一名圖文插畫家,有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快!隨著時間過去,創作這件事好像變得更忙碌了,也很開心跟很多厲害的創作者以及廠商互相合作幫忙,還有最重要的是大家的支持與陪伴🥹。  
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
人這輩子總是在等, 等將來 等不忙 等下次 等有時間 等有條件 等有錢了 可是後來 等沒了選擇 等來了遺憾 您,還等啥? 輕輕說聲 早安,別等了!
Thumbnail
分享一個有趣的套件,名為 await-to-js。 可以讓 Promise 與 await 的寫法更簡潔。
Thumbnail
簡要說明 JavaScript 的 Event Loop JavaScript 是單執行緒 (single-threaded) 語言,這意味著它一次只能執行一件事,因此所有函式都需要排隊等待執行,這被稱為同步 (synchronous)。在同步操作中,若函式過多或過於複雜,會導致程式阻塞 (blo
Thumbnail
可能包含敏感內容
迫不及待行動,耐心等待結果
Thumbnail
看到標題的朋友可能會覺得奇怪, 我們常常看到的不就是time.sleep嗎? 怎麼又多出了asyncio.sleep呢? 這兩者究竟差異在哪邊呢? 我們都知道sleep就是睡眠的意思, 那麼在程式的運作上就是等待, 等待一段時間之後繼續完成任務, time.sleep的部份很好理解, 就是在該段程
Thumbnail
不必急著給出答案 時間可以證明一切
Thumbnail
關於「等待」它到底是一個正向辭彙還是一個負面語詞呢?等待的目的為何?等待的過程又是怎樣的心境?生命中有太多等待,我們必須學會等待,還要學會習慣眾多不盡如人意的等待。有時,等待也可以視為人生旅途中的一段小憩,小憩結束了,我們的旅途還要繼續,繼續下一個等待。 
Thumbnail
非同步程式設計(Asynchronous programming) 或是簡單的稱之為 async,它是一種並發程式模型(concurrent programming model),其目的就是讓多個任務能同時在作業系統的執行緒上執行,並透過 async/.await 保留同步。
Thumbnail
為什麼需要非同步? 我們在「【Web微知識系列】 Web Workers」有介紹到在瀏覽器可執行腳本Javascript環境底下如何完成非同步的操作, 主要是為了讓任務更有效率的進行, 不會因為一個非常耗時的工作堵塞住整個服務, 導致無法服務他人的窘境。 大家應該經常在餐廳裡會看到服務員協