※ 認識非同步概念(四)

閱讀時間約 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
    查看全部
    發表第一個留言支持創作者!
    認識 JavaScript (十三)
    閱讀時間約 1 分鐘
    認識 JavaScript (十四)
    閱讀時間約 3 分鐘
    認識 JavaScript (十五)
    閱讀時間約 9 分鐘
    ※ 認識非同步概念(一)
    閱讀時間約 3 分鐘
    ※ 認識非同步概念(二)
    閱讀時間約 2 分鐘
    ※ 認識非同步概念(三)
    閱讀時間約 2 分鐘
    你可能也想看
    認識使命。 (非宗教)透過擁有使命時的感受,以及其感受作為基底的來源,使用自己的生命。 下限有希特勒作為借鏡,上限有帶領AI作為發展前沿,縱使還不熟悉,也早晚會在過程中認識使命。
    avatar
    始力拼達人
    2024-02-07
    快速認識阿拉伯文字母與變形體(非專業教學)本文解惑阿拉伯文為何看起來像一條蟲,並介紹阿語字母與變形體。
    Thumbnail
    avatar
    雪莉思 Sherry
    2023-09-10
    13天日本深度旅行:飛驒高山基本篇 ──帶你一次掌握好吃好玩,認識飛驒高山全貌!大家來日本旅行前可能都只聽過合掌村,卻沒什麼聽過合掌村周遭的城市,但其實在合掌村附近有一個名叫飛驒高山的城市,這個城市既有像鄉村般的古色古香和樸素氛圍,又同時兼具都市般的熱鬧和方便,而且美食和景點夠你逛三天三夜!這次就要帶大家以簡單清楚的方式,體驗高山好吃好玩的景點和美食,並讓大家認識高山這個地方!
    Thumbnail
    avatar
    Kenny的隨手日誌
    2023-08-17
    菲菲心靈:自我認識的深化經常忽略了自己內在深處的聲音 在這快節奏的現代生活中,我們總是被迫奔波於各種工作、學習和家庭事務之間。這種忙碌使我們往往忽略了內在深處的聲音,忘記了自己的真正渴望和內心的需求。每天的壓力讓我們只能應付眼前的困難,卻忘了細細品味生活的真諦。 在城市的喧囂中,我們忘記了自己 在城市的喧囂中,我們很
    Thumbnail
    avatar
    月菲
    2023-07-31
    擴大你對英文句型的認識(下):主詞+be動詞然後可以接什麼?【英語能力起飛】在(上)時我們從「I am _____ .」開始,引導讀者一路來到了句型「主詞+be+介詞片語」,本篇(下)要跟讀者分享常用和好用的例句,同時邀請付費訂閱的讀者透過留言功能挑一個或本文提到的所有例子來造句,老師會幫揪錯。 首先分享一個描述位置的實用句型。請看: 可拿來形容自己住的地方交通有多便利:
    Thumbnail
    avatar
    英語能力起飛
    2022-04-18
    avatar
    英語能力起飛
    2022-04-14
    你真的認識聖索菲亞大教堂嗎?世界級大師帶你導覽經典建築景點!位於伊斯坦堡的聖索菲亞大教堂,是到土耳其旅遊時必去的景點,但除了歷史課本上有學過的拜占庭歷史外,你對這座建築了解嗎? 今天透過世界級建築師羅伯特‧麥卡特以及2018威尼斯建築展「田中央工作群」的策展顧問尤哈尼‧帕拉斯瑪,帶你「紙上VR導覽」聖索菲亞大教堂這座既熟悉又陌生的建築吧!
    Thumbnail
    avatar
    原點出版社
    2021-08-30
    [阿飛的人生相談所]第17集:認識很久卻還不懂我!這該怎麼辦?「阿飛的人生相談所」,故名思義就是聊人生的各種問題,我會在這裡用聲音跟讀者聊聊日常生活的大小事,也會開放讀者留言與來信提問,無論是感情上、工作上或是家庭、人際關係的問題都可以留言或來信問我,然後我會從中挑選適合的問題在音頻聊聊我的看法,當然不想問問題,單純留言給我鼓勵,我也非常開心。
    Thumbnail
    avatar
    阿飛
    2020-12-27
    認識菲律賓股市及法規淺談菲律賓股市及相關法規
    Thumbnail
    avatar
    Rae Kuo 瑞瑞
    2020-11-25
    認識「結構化/半結構化/非結構化」資料結構化資料: 事先定義好每個欄位可以存放什麼資料,這種儲存的資料就是結構化資料。 像是關聯式資料庫中的資料,需要先把table欄位定義好,之後才能儲存資料。 半結構化資料: 無需事先定義好資料欄位,每一筆資料能夠根據需求儲存不同的欄位,因此很有彈性,如JSON, XML等等。 非結構化資料: 未整理
    avatar
    Vic Lin
    2020-10-09