zoukankan      html  css  js  c++  java
  • ES6 Promise 对象

    es6 Promise 对象是异步编程的一种解决方案。(在javascript世界里,是单线程顺序执行的)
    从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。

    Promise 异步操作有三种状态:pending(进行中)、fulfilled(已成功)和 rejected(已失败)。除了异步操作的结果,任何其他操作都无法改变这个状态。
    Promise 对象只有:从 pending 变为 fulfilled 和从 pending 变为 rejected 的状态改变。只要处于 fulfilled 和 rejected ,状态就不会再变了即 resolved(已定型)。

    <script type="text/javascript">
        let promise = new Promise((resolve,reject)=>{
            console.log('promise初始化状态:pending')   // 同步执行
            setTimeout(()=>{
                console.log('开启定时器,模拟异步操作')
                //resolve('异步返回,执行成功') // promise状态为 fulfilled
                reject('异步返回,执行失败') // promise状态为 rejected
            },1000);
        });
    
        console.log('代码继续执行')
        
    
        //promise回调
        promise.then((data)=>{  // 第一个回调 成功resolve
            console.log(data)
        },(data)=>{   // 第二个回调 失败reject
            console.log(data)
        });

      
       //结果:
            //promise初始化状态:pending
            //代码继续执行
            //开启定时器,模拟异步操作
         //异步返回,执行失败
    </script>

    ajax请求用上Promise,代码看起来更规整

    以前写ajax请求 用原生的,很凌乱,就算用jquery ajax 回调方法那块也是多层嵌套,写业务逻辑也是很凌乱;

    Promise 可以解决这种凌乱问题,让异步请求更加规整;维护方便;

    tsconfig.json

    {
      "ret": true,
      "data": {
        "studentList": [{
          "id": "0001",
          "name": "Jack"
        },{
          "id": "0002",
          "name": "Marry"
        },{
          "id": "0003",
          "name": "Sunndy"
        },{
          "id": "0004",
          "name": "Lini"
        }]
      }
    }
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquery.min.js"></script>
    </head>
    <body>
    <script type="text/javascript">
        let promise = new Promise((resolve,reject)=>{
            console.log('promise初始化状态:pending '); // 同步执行
            $.get('./tsconfig.json',{},function(result){
                console.log('ajax异步操作');
                if(result.ret){
                    console.log('执行OK')
                    resolve(result.data);
                }else{
                    console.log('执行失败')
                    reject(result.data)
                }
            },'json');
        });
    
        promise
            .then((data)=>{   // 第一个回调  成功resolve
                console.log('resolve')
                console.log(data)
            },(data)=>{  // 第二个回调  成功reject
                console.log('reject')
                console.log(data.errorInfo)
            })
    
        console.log('代码继续执行');
    </script>
    </body>
    </html>
  • 相关阅读:
    云原生范式转变:您准备好了吗?
    CentOS 6.x 开机 自启动 脚本
    忠告 程序员 先思考再编程,累的时候不要写代码
    服务化架构组件清单
    代码自动修复
    选择塑造人生
    mariadb change password
    Spring 集成 Druid Monitor URL 配置转义问题(xml or properties)
    挣钱 vs. 花钱
    管理的要义
  • 原文地址:https://www.cnblogs.com/jnba/p/12221864.html
Copyright © 2011-2022 走看看