先執行同步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 事件模塊 * */