Node.js Promise的詳細解析

一、Promise基礎介紹

在JavaScript中，Promise是一種用於非同步編程的技術，與回調函數相比，使用Promise編寫的代碼更加簡潔易懂，而且支持鏈式調用，更加符合代碼風格的美觀優雅。

Promise是一種代表了未來某個時間點完成的可能性的對象，可以用來處理非同步操作。Promise有三種狀態，分別是「等待態」（pending）、「完成態」（fulfilled）和「拒絕態」（rejected），一旦Promise狀態變為「完成態」或「拒絕態」，就不能再改變了。

//Promise的基本用法
const promise = new Promise((resolve, reject) => {
  //模擬非同步操作
  setTimeout(() => {
    const data = {name: 'tom', age: 20}
    resolve(data) //非同步操作成功時，調用resolve方法
    //reject('error') //非同步操作失敗時，調用reject方法
  }, 2000)
})
//使用Promise的then方法處理非同步完成情況
promise.then((data) => {
  console.log(data)
}).catch((error) => {
  console.log(error)
})

二、Promise的鏈式調用

除了能夠處理非同步操作，Promise還具備一種非常強大的功能——鏈式調用，也稱為Promise鏈。當需要對多個非同步操作進行處理時，就可以使用Promise鏈。

通過鏈式調用，Promise對象可以根據成功或失敗狀態返回的值進行後續操作，實際上是then方法返回了一個新的Promise對象，因此可以連續使用then方法。

//Promise鏈式調用
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(2)
  }, 2000)
})
promise.then((res) => {
  console.log(res) //2
  return res * 2
}).then((res) => {
  console.log(res) //4
  return Promise.resolve(res * 2)
}).then((res) => {
  console.log(res) //8
}).catch((error) => {
  console.log(error)
})

三、Promise.all()

當有多個非同步操作需要執行，並且所有非同步操作都完成後需要執行某種操作時，可以使用Promise.all()方法，該方法接收一個Promise對象數組，當所有對象狀態都變為「完成態」時返回結果的數組，如果有一個對象狀態變為「拒絕態」，則會直接跳轉至catch()方法。

需要注意的是，Promise.all()方法返回的結果數組順序與輸入的Promise對象數組順序相同。

//Promise.all()用法
const promise1 = Promise.resolve('Hello')
const promise2 = 10
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 2000, 'Goodbye')
})
Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values) //['Hello', 10, 'Goodbye']
}).catch((error) => {
  console.log(error)
})

四、Promise.race()

與Promise.all()類似，Promise.race()方法也是接收一個Promise對象數組，不同的是當任意一個Promise對象的狀態變為「完成態」或「拒絕態」時，返回結果並結束操作。

需要注意的是，Promise.race()方法返回的結果是第一個完成或拒絕的Promise對象的結果。

//Promise.race()用法
const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 2000, 'Goodbye')
})
const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 1000, 'Hello')
})
Promise.race([promise1, promise2]).then((value) => {
  console.log(value) //'Hello'
}).catch((error) => {
  console.log(error)
})

五、async/await與Promise

ES2017發布了async/await語法，這是一個新的非同步函數定型，可以讓非同步操作同步化，更加符合人們的正常思維方式。

async/await通過使函數返回一個Promise對象，讓代碼的執行順序與Promise進行結合，可以讓非同步操作更加簡單明了。

//async/await的基本用法
const fetchUserData = async (url) => {
  const response = await fetch(url) //等待非同步操作完成
  const data = await response.json() //等待非同步操作完成
  return data.name //返回結果
}
fetchUserData('https://api.github.com/users/octocat').then((data) => {
  console.log(data) //'The Octocat'
}).catch((error) => {
  console.log(error)
})

六、Promise的錯誤處理

當Promise對象狀態變為「拒絕態」時，需要進行錯誤處理，可以通過在鏈式調用中使用catch()方法來完成。

需要注意的是，如果任何一個非同步操作拋出錯誤或返回reject()方法，Promise對象會立即變為「拒絕態」狀態，直接跳轉至鏈式調用中的catch()方法，因此catch()方法需要放在鏈式調用的最後。

//Promise的錯誤處理
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('error')
  }, 2000)
})
promise.then((res) => {
  console.log(res)
}).catch((error) => {
  console.log(error) //'error'
})