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状态内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JS将秒换成时分秒实现代码
将秒换成时分秒的方法有很多，在本文将为大家介绍下，使用js的具体的实现思路，有需要的朋友可以参考下，希望对大家有所帮助
2013-09-09
JS获取DropDownList的value值与text值的示例代码
本篇文章主要是对JS获取DropDownList的value值与text值的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-01-01
ECharts仪表盘实例代码(附源码下载)
大家在汽车驾驶舱里一眼就可以看到仪表盘，使用使用Echarts制作的仪表盘可以轻松展示用户的数据，清晰的看出某个指标值所在的范围，仪表盘形式的报表应用在各种统计系统中，本文结合实例讲解仪表盘在销售任务完成率的统计应用
2016-02-02
微信小程序基础教程之worker线程的使用方法
这篇文章主要给大家介绍了关于微信小程序基础教程之worker线程的使用方法，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-07-07
JavaScript常用代码书写规范的超全面总结
这篇文章给大家全面总结了JavaScript常用代码的书写规范，分别利用推荐和不推荐的两种示例代码让大家更能直接的了解书写规范，其实关于javascript代码规范我们应该遵循古老的原则：“能做并不意味着应该做”，好了，下面我们就来一起看看吧。
2016-09-09
TS中最常见的声明合并(接口合并)
这篇文章主要介绍了TS中最常见的声明合并：接口合并,TS中的声明合并，指的就是编译器会针对同名的声明合并为一个声明,合并后的声明会同时拥有原先两个或多个声明的特性,接口的合并也是一样，它会将双方的成员放到一个同名的接口里，更多详细内容请参考下面文章内容
2021-12-12
一文读懂TS 中联合类型和交叉类型各自的含义
联合类型在 TypeScript 中相当流行，你可能已经用过很多次了。交叉类型稍微不那么常见，它们似乎引起更多的困惑，这篇文章主要介绍了一文读懂TS 中联合类型和交叉类型的含义,需要的朋友可以参考下
2022-12-12
javascript 二进制运算技巧解析
javascript 中的二进制运算的一些技巧，晒出来和你们分享一下，希望可以帮助你们
2012-11-11
javascript/jquery获取地址栏url参数的方法
本篇文章主要是对javascript/jquery获取地址栏url参数的方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-03-03
菜单效果
菜单效果...
2006-10-10