您的位置:

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'
})