首页 > 网络编程 > JavaScript > javascript技巧 > javascript Promise状态

javascript中Promise的三种状态示例详解

2024-10-29 08:23:28 作者：听海边涛声

这篇文章主要给大家通过讲解和实践,详细介绍了Promise对象的三种状态：pending（待定）、fullfilled（已兑现）、rejected（已拒绝）,并通过日志查看,展示了Promise状态的改变顺序,帮助读者更好的理解和应用Promise,需要的朋友可以参考下

说明

通过了解Promise的三种状态，可以了解Promise对象是如何关联的处理函数，以及代码的执行顺序。

一个Promise对象，必然处于以下几种状态之一：

pending（待定）：初始状态，既没有被兑现，也没有被拒绝
fullfilled（已兑现）：操作成功完成
rejected（已拒绝）：操作失败

Promise对象一旦被兑现或拒绝了，就是已敲定了，状态无法再被改变。

示例

Promise创建后处于pending状态

注意：下面代码中，为了有时间查看状态，所以setTimeout的超时时间可以设置得大一些，如果设置成1秒、2秒，可能来不及看，状态就改变了。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>认识Promise状态</title>
</head>

<body>
  <script>
    /**
     * 目标：认识Promise状态
    */
    // 1. 创建Promise对象
    const p = new Promise((resolve, reject) => {
      // 2. 执行异步代码
      setTimeout(() => {
        // resolve('模拟AJAX请求-成功结果')
        reject(new Error('模拟AJAX请求-失败结果'))
      }, 5000)
    })
    console.log(p)

    // 3. 获取结果
    p.then(result => {
      console.log(result)
    }).catch(error => {
      console.log(error)
    })


  </script>
</body>

</html>

通过打印日志查看Promise的成功状态的改变顺序

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>认识Promise状态</title>
</head>

<body>
  <script>
    /**
     * 目标：认识Promise状态
    */
    // 1. 创建Promise对象
    const p = new Promise((resolve, reject) => {
      // Promise对象创建时，这里面的代码都会被执行了，然后then()内的回调函数执行
      console.log('Promise对象内开始执行')
      // 2. 执行异步代码
      setTimeout(() => {
      	// 当resolve被调用后，Promise状态就变成了fullfilled状态
        resolve('模拟AJAX请求-成功结果')
        // reject(new Error('模拟AJAX请求-失败结果'))
      }, 5000)
    })
    console.log(p)

    // 3. 获取结果
    p.then(result => {
      console.log(result)
    }).catch(error => {
      console.log(error)
    })


  </script>
</body>

</html>

5秒（代码中定时器设置的是5000毫秒）以后，状态改变为fullfilled：

通过打印日志查看Promise的失败状态的改变顺序

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>认识Promise状态</title>
</head>

<body>
  <script>
    /**
     * 目标：认识Promise状态
    */
    // 1. 创建Promise对象
    const p = new Promise((resolve, reject) => {
      // Promise对象创建时，这里面的代码都会被执行了
      console.log('Promise对象内开始执行')
      // 2. 执行异步代码
      setTimeout(() => {
        // 当resolve被调用后，Promise状态就变成了fullfilled状态，然后then()内的回调函数执行
        // resolve('模拟AJAX请求-成功结果')
        // 当 reject被调用后，Promise状态就变成了rejected状态，然后catch()内的回调函数执行
        reject(new Error('模拟AJAX请求-失败结果'))
      }, 5000)
    })
    console.log(p)

    // 3. 获取结果
    p.then(result => {
      console.log(result)
    }).catch(error => {
      console.log(error)
    })


  </script>
</body>

</html>