javascript：Promise的三种状态

听海边涛声

于 2024-07-13 14:19:17 发布

阅读量369

点赞数 6

文章标签： javascript Promise

本文链接：https://blog.csdn.net/panghuangang/article/details/140397017

版权

说明

通过了解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>