js执行顺序/Promise优雅解决回调函数嵌套

Posted 2020-09-18

先执行同步

然后把settimeout（function xx（）{}放进堆栈

然后执行回调 function xx（）

 

/**
 * Created by Administrator on 2016/10/28.
 */
// nodejs 封装操作文件的功能 fs
var fs = require(‘fs‘);
//同步读取
// var str = ‘‘
// str += fs.readFileSync(‘./data/01‘,‘utf-8‘);
// str += fs.readFileSync(‘./data/02‘,‘utf-8‘);
// str += fs.readFileSync(‘./data/03‘,‘utf-8‘);
// str += fs.readFileSync(‘./data/04‘,‘utf-8‘);
//
// console.log(str);
//异步读取代码
/**
 * 需求：第一个文件读取完成以后 紧接着用第一个拿到的数据
 */
// fs.readFile(‘./data/01‘,‘utf-8‘,function(err,data1){
//     if(err){
//         console.log("文件读取错误");
//     }else{
//         fs.readFile(‘./data/02‘,‘utf-8‘,function(err,data2){
//             if(err){
//                 console.log("文件读取错误");
//
//             }else{
//                 fs.readFile(‘./data/03‘,‘utf-8‘,function(err,data3){
//                     if(err){
//                         console.log("文件读取错误");
//                     }else{
//                         fs.readFile(‘./data/04‘,‘utf-8‘,function(err,data4){
//                             if(err){
//                                 console.log("文件读取错误");
//                             }else{
//                                 console.log(data1+data2+data3+data4);
//                             }
//                         });
//                     }
//                 });
//             }
//         });
//     }
// });

/**
 * 回调函数嵌套问题
 * Promise（承诺的意思） 这个对象用来执行回调的代码 会存储状态 进行中（pendding）
 * 已经完成Resolved   已经失败 reject   把异步代码丢给Promise对象执行
 *  Promise.then  然后的意思  根据这个状态 去调用的函数
 */
function fn1(){
    var p = new Promise(function(resovle,reject){
          //进行中--》完成
          //进行中--> 失败
           fs.readFile(‘./data/01‘,‘utf-8‘,function(err,data){
                console.log("代码正在执行1");
               resovle(data);
           })
    });
    return p;
}
function fn2(){
    var p = new Promise(function(resovle,reject){
        //进行中--》完成
        //进行中--> 失败
        fs.readFile(‘./data/02‘,‘utf-8‘,function(err,data){
            console.log("代码正在执行2");
            resovle(data);  //已经完成存了状态
        })
    });
    return p;
}
function fn3(){
    var p = new Promise(function(resovle,reject){
        //进行中--》完成
        //进行中--> 失败
        fs.readFile(‘./data/03‘,‘utf-8‘,function(err,data){
            console.log("代码正在执行3");
            resovle(data);  //已经完成存了状态
        })
    });
    return p;
}
//然后  根据状态 来做接下来的事情  相当于把异步的代码写成同步
// fn1().then(function (data) {
//     console.log(data.toString());
//     return fn2();
// }).then(function(data2){
//     console.log(data2.toString());
//     return fn3();
// }).then(function(data3){
//     console.log(data3.toString());
// });
//

/**
 * 总结：1 Promise是一个内置的对象 前后端都可以使用
 * 2  作用： 优雅的解决回调函数嵌套
 * 3  如何使用
 *     1）把每一步的回调代码抽离出来
 *     2）在调用的时候 挨个去调用  借用promise的特性来实现
 *     es5（写回调相当痛苦）  在es6 里面被定为标准
 */
function fn1() {


    var p =new Promise(function (resolve,reject) {
        //在这里把原来的回调代码放在这里执行
        /**
         * 三种状态： 进行中-->  已经完成  ---> 已经失败
         */
            fs.readFile(‘./data/01‘,‘utf-8‘,function (err,data) {
                    if(err){
                        reject(err);
                    }else {
                        resolve(data);
                    }
            })
    });

    return p;
}
fn1().then(function (data) {
    console.log(data);
    return fn2();
},function (err) {
    console.log(err);
})
Promise.all([fn1(),fn2(),fn3()]).then(function (result) {
    console.log(result);
})

 

/**
 * nodejs学习的特点： 学习对应模块的操作
 */


/**
 *  1 事件模块  events
 *      a  引入模块
 *      b  监听事件 on
 *      c  触发事件（人为触发emit或者服务器的某些行为触发 data  ）
 */
 var events = require("events");
//eventEmitter 记录一些事件的基本信息
var eventEmitter = new events.EventEmitter();
//使用这个对象
eventEmitter.on(‘xx‘,function(){
    console.log(‘xxd‘);
});
//触发事件
eventEmitter.emit(‘xx‘);
/*
* Promise   new  出来
*
* //解决回调嵌套的方法:
* 1 把原来层层嵌套的这些异步代码  抽出来包成函数
 * 2 把抽出来的异步代码 放到  promise里面  promise里面接收一个函数作为参数
 * 3 通过 then这个方法来访问
 * react 面向未来   vuejs  虚拟dom
 * 以上步骤： 把原来嵌套（可读性相当低）的代码 写来可读性更高一些
 *
 * http 网站服务
 * fs   文件模块
 * events  事件模块
* */