處理非同步問題三種方式的解題技巧
在這篇文章中，我探討了三種處理非同步問題的方式：Callback、Promise 以及 Async/Await。透過詳細的範例和說明，我解釋了這些技術如何幫助開發者有效管理非同步操作，確保應用程序的流暢執行。每種技術都有其適用場景，從 Callback 的基礎應用到 Promise 的鏈式操作，再到 Async/Await 的直觀語法，這些方法都是現代 JavaScript 開發中不可或缺的技能。
- ES6 之前: 用 Callback 處理非同步問題
- 用 Callback 處理非同步
- ES6: 用 Promise 處理非同步問題
- 收到 Promise 用 Promise 內建方法處理
- ES7: 用 Async/Await 處理非同步問題
- 收到 Promise 用 Promise 語法糖 Async/Await 處理
// 1. Callback
console.log('say good morning')
const saySomething = (i, Callback) => {
setTimeout(() => {
console.log(i)
if(i === 5) Callback()
},100)
}
const sayGoodEvening = () => {
console.log('say good evening')
}
for(let i=1;i<=5;i++){
saySomething(i, sayGoodEvening)
}
/*
'say good morning'
1
2
3
4
5
'say good evening'
*/
// 2. Promise
console.log('say good morning')
let saySomething = i => {
return new Promise(resolve => {
setTimeout(() => {
resolve(console.log(i))
},100)
})
}
let arr = []
for(let i=1;i<=5;i++){
arr.push(saySomething(i))
}
Promise.all(arr)
.then(() => console.log('say good evening'))
/*
'say good morning'
1
2
3
4
5
'say good evening'
*/
// 3. Async/Await
let saySomething = i => {
return new Promise(resolve => {
setTimeout(() => {
resolve(console.log(i))
},100)
})
}
let arr = []
for(let i=1;i<=5;i++){
arr.push(saySomething(i))
}
async function usePromise() {
console.log('say good morning')
await Promise.all(arr)
console.log('say good evening')
}
usePromise()
/*
'say good morning'
1
2
3
4
5
'say good evening'
*/
參考資料
1. Promise 語法糖 async/await
2. Promise 方法
3. Promise 詳解(2/2)
4. 二周目 - 非同步神器 Promise
5. Fetch API與Promise 使用方式介紹
6. Async and Await in JavaScript
7. 使用 Promise.all() 解決多次的 API Callback