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

標籤：bsp   events   封裝   tostring   class   files   意思   ring   解決   

先執行同步

然後把settimeout（function xx（）{}放進堆棧

然後執行回調 function xx（）

 

/** * Created by Administrator on 2016/10/28. */// nodejs 封裝操作檔案的功能 fsvar 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  事件模組* */

 

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