脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript Promise状态

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

 更新时间：2024年10月29日 08:27:10   作者：听海边涛声  
这篇文章主要给大家通过讲解和实践,详细介绍了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>

过了5秒以后：

resolve和reject函数都打开，一个执行以后，状态就不会再改了

5秒钟以后：

总结 

到此这篇关于javascript中Promise的三种状态的文章就介绍到这了,更多相关javascript Promise状态内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论