• JavaScript-promise使用+状态

    Promise


    什么是PromisePromise对象就是异步操作的最终完成和失败的结果；

     Promise的基本使用：

    代码

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.     <script>
    11.         //promise
    12.     var PO=new Promise((reslove,reject)=>{
    13.         setTimeout(()=>{
    14.             reslove("成功")
    15.         },2000)
    16.     })
    17.     PO.then(relsult=>{
    18.         console.log(relsult)
    19.         //接收成功的结果
    20.     })
    21.     PO.catch(error=>{
    22.         console.log(error)
    23.         //接收失败的结果
    24.     })
    25.     //可以关联失败和成功的结果
    26.     //axios原理的理解
    27.     script>
    28. body>
    29. html>

    Promise的三种状态：

    待定

    创建对象时候

    已兑现

    调用reslove

    已拒绝

    调用了reject

    三种状态代码演示

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.     <script>
    11.         //promise
    12.     var PO=new Promise((reslove,reject)=>{
    13.         //创建  待定状态pending
    14.         setTimeout(()=>{
    15.             reslove("成功")
    16.             //绑定状态
    17.         },2000)
    18.     })
    19.     console.log(PO)
    20.     PO.then(relsult=>{
    21.         //当reslove被调用就会获取到成功内容  状态变为已兑现
    22.         console.log(relsult)
    23.         //接收成功的结果
    24.     })
    25.     PO.catch(error=>{
    26.         //如果调用了reject 状态变为已拒绝
    27.         //如果同时调用 则按照执行顺序 一次修改状态不能二次修改
    28.         console.log(error)
    29.         //接收失败的结果
    30.     })
    31.     //可以关联失败和成功的结果
    32.     //axios原理的理解
    33.     script>
    34. body>
    35. html>

     成功截图

  • 相关阅读:
    win10-如何管理开机启动项？
    Android Retrofit 高级使用与原理
    [分布式]-限流熔断降级
    【计算机英语】学习从现在开始，行动起来
    牛客前端面试题库
    mysql 临时文件过大
    Ajax 笔记/练习
    设计模式学习笔记 - 规范与重构 - 5.如何通过封装、抽象、模块化、中间层解耦代码？
    2022 CSP-J 复赛题解
    模拟实现C语言--strcmp函数
  • 原文地址：https://blog.csdn.net/m0_68711597/article/details/132923087