Promise的应用_promise应用-CSDN博客

本文链接：https://blog.csdn.net/Vodka688/article/details/116399934

const { RSA_PKCS1_OAEP_PADDING } = require('constants');
var fs = require('fs');
const { resolve } = require('path');
/*
   在Ecmascript 6中新增了一个 API ，Promise(一个构造函数)
   1.Promise容器: Promise本身不是异步的，但是内部封装存放了一个异步任务,
       Pending(悬挂状态)里的异步任务变化结果只有两种function(resolved,rejected){}参数，  一是resolved(已解决)，二是rejected(未执行,失败)
*/
//2.创建 Promise 容器:一旦创建，就开始执行里面的代码

// var p1 = new Promise(function(resolve,reject){
//     fs.readFile('./a.txt','utf-8',function(error,data){
//         if(error){
//             // console.log(error);
//             //Promise容器中的异步任务失败后，把容器的Pending状态改为 Rejected
//             reject(error);
//         }else{
//             // console.log(data);
//             //Promise 容器中的异步任务成功后，把容器的Pending状态改为，Resolved
//             resolve(data);
//         }
//     })
// });


// var p2 = new Promise(function(resolve,reject){
//     fs.readFile('./b.txt','utf-8',function(error,data){
//         if(error){
//             // console.log(error);
//             //Promise容器中的异步任务失败后，把容器的Pending状态改为 Rejected
//             reject(error);
//         }else{
//             // console.log(data);
//             //Promise 容器中的异步任务成功后，把容器的Pending状态改为，Resolved
//             resolve(data);
//         }
//     })
// });

// var p3 = new Promise(function(resolve,reject){
//     fs.readFile('./c.txt','utf-8',function(error,data){
//         if(error){
//             // console.log(error);
//             //Promise容器中的异步任务失败后，把容器的Pending状态改为 Rejected
//             reject(error);
//         }else{
//             // console.log(data);
//             //Promise 容器中的异步任务成功后，把容器的Pending状态改为，Resolved
//             resolve(data);
//         }
//     })
// });
/*例子：p1就是那个Promise，当p1成功创建后，然后(then)做指定操作， then 方法接收的第一个function就是Promise中的 resolve 函数，第二个是reject函数
        下面这个例子就确保了异步执行的顺序，当Promise 完成p1对象的操作后，就在它的then中返回p2实例作为p1.then的第一个参数，即resolve()，
        完成p2实例代码后，在p2的then中返回p3实例,最后再执行p3
*/
// p1.then(function(data){
//    console.log(data);
//    return p2; 
// },function(error){
//    console.log('读取a文件失败');
// }).then(function(dataTwo){
//     //前一个then的resolve函数返回一个Promise实例，就是紧跟着的then函数的参数
//     console.log(dataTwo);
//     return p3
// },function(error){
//     console.log('读取b文件失败');
// }).then(function(dataThree){
//    console.log(dataThree);
// },function(error){
//     console.log('读取c文件失败');
// });

//封装Promise-API
//Promise版本的readFile
function PReadFile(FilePath){
    return new Promise(function(resolve,reject){
        fs.readFile(FilePath,'utf-8',function(error,data){
            if(error){
                reject(error);
            }else{
                resolve(data);
            }
        });
    });
}
//封装Promise对象的then方法里的输出函数
// function Pout(obj,NextObj){
//      obj.then(function(data){
//         console.log(data);
//         if (NextObj != null)  Pout(NextObj);
//     },function(error){
//         console.log(error);
//     });
// }

var a = PReadFile('./a.txt');
var b = PReadFile('./b.txt');
var c = PReadFile('./c.txt');



a.then(function(data){
    console.log(data);
    return c;
},function(error){
    console.log(error);
}).then(function(data){
    console.log(data);
    return b;
},function(error){
    console.log(error);
}).then(function(data){
    console.log(data);
},function(error){
    console.log(error);
});

//简单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>
    <form action="./Promise应用场景.js" id='UserForm'>
            
    </form>

    <script type="text/template" id="tpl">
        <div>
            <label for="">用户名</label>
            <input type="text" name="" value="{{ user.Username  }}">   
        </div>
        
        <div>
            <label for="">年龄</label>
            <input type="text" value="{{ user.Age  }}">
        </div>

        <div>
           <label for="">职业</label>
              <select name="" id="">
                {{ each jobs}}
                   {{ if user.Job == $value.id }}
                       <option value="{{ $value.id }}" selected>{{ $value.Job }}</option>  
                       {{ else }}
                       <option value="{{ $value.id }}"> {{ $value.Job }} </option>
                   {{ /if }}
                {{ /each }}
              </select>
        </div>    
    </script>
    <!-- 引进模板引擎 -->
    <script src="node_modules/art-template/lib/template-web.js"></script>
    <script src="node_modules/jquery/dist/jquery.js"></script>
    <script>
        
          /*
            -用户表
                其中一个接口获取用户数据
                职业的序号是两个表关联的主键
            -职业信息表
                其中一个接口获取所有的职业信息    
          */
        //这里的get 是 callback 方式的API，可以使用 Promise 来解决这个问题 
        //获取用户的接口,获取职业的接口,同时使用多个接口的数据时，要接口嵌套使用
        // get('http://127.0.0.1:3000/User/19124',function(UserData){
        //     get('http://127.0.0.1:3000/Job',function(JobsData){
        //        var Jobdata = JSON.parse(JobsData);
        //         var User = JSON.parse(UserData);
        //         //模板引擎渲染
        //         var Html = template('tpl',{
        //             user: User,
        //             jobs: Jobdata
        //         });
        //         document.querySelector('#UserForm').innerHTML=Html;
        //     });
        //}); 
        //Jquery里的Promise应用，定义一个全局变量对象，用于接收不同异步的返回结果,异步编程多时，使用Promise可以让代码更简洁优雅
        // var Data = {};
        // $.get('http://127.0.0.1:3000/User/19123')
        // .then(function(UserData){
        //   Data.user = UserData;
        //   return $.get('http://127.0.0.1:3000/Job'); 
        // })
        // .then(function(JobsData){
        //    Data.Jobs  = JobsData;
        //    var Html = template('tpl',{
        //        user: Data.user,
        //        jobs: Data.Jobs
        //    });
        //    document.querySelector('#UserForm').innerHTML = Html;
        // });
        
        //封装Promise版本的Ajax
        function Pget(url){
            return new Promise(function(resolve,reject){
                var oReq = new XMLHttpRequest();
                oReq.onload = function(){
                    resolve(JSON.parse(oReq.responseText));
                }
                oReq.onerror = function(error){
                    reject(error);
                }
        
                oReq.open("get",url,true);
                oReq.send();
            });
        }

        Pget('http://localhost:3000/User/19124')
        .then(function(data){
           console.log(data);
        });

        //不带Promise版本的Ajax
        // function get(url,callback){
        //      var oReq = new XMLHttpRequest();
        //     //加载成功后，需要调用指定函数
        //      oReq.onload = function(){
        //         //现在需要得到这里的 oReq.responseText
        //         callback(oReq.responseText);
        //      }
        //      /*
        //        xhrReq.open(method, url, async, user, password);
        //        async: 
        //        一个可选的布尔参数，表示是否异步执行操作，默认为true。
        //        如果值为false，send()方法直到收到答复前不会返回。
        //        如果true，已完成事务的通知可供事件监听器使用。如果multipart属性为true则这个必须为true，否则将引发异常。
        //      */
        //      oReq.open("get",url,true);
        //      oReq.send();
        // }  
    </script>
</body>
</html>