js執行順序/Promise優雅解決回調函數嵌套

先執行同步vue

而後把settimeout(function xx(){}放進堆棧node

而後執行回調 function xx()react

 

/**
 * 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  事件模塊
* */
相關文章
相關標籤/搜索