| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
lgrcyanny
8年前发布

JavaScript异步操作

   <p>JavaScript环境中产生异步操作的函数分为两大类: 计时函数 和 I/O函数 。如果要在应用中定义复杂的异步操作,就要使用者两类异步函数作为基本的构造快。本文没有对某个知识点细致展开,仅供思路参考。</p>    <h3>1. 计时函数</h3>    <p>先看一个经典的例子:</p>    <pre>  <code class="language-javascript">for(var i = 0;i < 5; i++){      setTimeout(function(){          console.log(i);      },5000);  }  console.log(i);</code></pre>    <p>结果输出什么?立马输出一个5,5秒钟过后连续输出5个5(呜呜呜呜呜~),搞懂为什么这样输出5,需要知道3件事:</p>    <ul>     <li> <p>这里只有一个 i 变量,作用域由 var 定义,不管i怎么变,都指向同一个内存区域;</p> </li>     <li> <p>循环结束后 i=== 5;</p> </li>     <li> <p>JavaScript事件处理器在线程空闲之前不会执行。</p> </li>    </ul>    <p>来,再来和我背一遍口诀: 先同步后异步最后回调 。在本例子中:</p>    <ul>     <li> <p>同步事件:for循环(不包含内部的setTimeout);外部的console.log(i);</p> </li>     <li> <p>异步事件:for循环内部的setTimeout。</p> </li>    </ul>    <p>先执行for循环,遇到setTimeout压入延迟事件队列,一边循环一边压入队列;for循环结束执行外部的console.log(i),此时i=5,故立即输出5,此时同步事件执行完毕,接下来开始执行异步事件setTimeout,5个setTimeout事件等待5秒同时在等待,所以5秒结束连续输出5个5。</p>    <p>再看一个例子:</p>    <pre>  <code class="language-javascript">var start = new Date;  setTimeout(function(){      var end = new Date;      console.log('time using:' + (end - start) + 'ms');  },5000);  while(new Date - start < 1000){};</code></pre>    <p>猜猜结果是什么?</p>    <p><img src="https://simg.open-open.com/show/8e832f47ce9652bbaac3754d06d67ae8.png"></p>    <p>调换一下时间:</p>    <pre>  <code class="language-javascript">var start = new Date;  setTimeout(function(){      var end = new Date;      console.log('time using:' + (end - start) + 'ms');  },2000);  while(new Date - start < 5000){};</code></pre>    <p><img src="https://simg.open-open.com/show/74c61b03fd962ba9a36143e3c2ce15a1.png"></p>    <p>这里唯一想说的是:像 setTimeout 或是 setInterval 并非是精确计时的, <a href="/misc/goto?guid=4959747809518879366" rel="nofollow,noindex">setTimeout与setInterval在不同浏览器下的差异</a> 。</p>    <h3>2. I/O函数</h3>    <p>这里的 I/O 是一个广义的概念,包括读写文件,GET或POST请求,异步读取值值函数等等。一个常见的读文件的操作:fs.js</p>    <pre>  <code class="language-javascript">var fs = require('fs');    fs.readFile('data.txt',function(err,data){      if(err){          return console.log(err);      }      console.log(data.toString())  });</code></pre>    <p>data.txt的内容:</p>    <pre>  <code class="language-javascript">hello  world  hello  async</code></pre>    <p>node fs.js:</p>    <p><img src="https://simg.open-open.com/show/2805ac8c74bf6bce8d57172ec7ccf899.png"></p>    <p>没毛病!设想一个场景,在另外一个函数,假设名字叫 panfen() ,里面有一堆代码,其中需要用到从data.txt文件读取的数据,常见的做法是把fs.readFile操作写在 panfen() 里面,处理data的操作都写在fs.readFile的callback里面,如果callback里面还要写数据呢?继续执行fs.writeFile在它的callback里面执行其他操作...</p>    <pre>  <code class="language-javascript">var fs = require('fs');    fs.readFile('data.txt',function(err,data){      if(err){          return console.log('failed to read data!');      }else{          fs.writeFile('./data_copy.txt', data, function(){              if(err){                  ...              }else{                  ...              }          });      }  });</code></pre>    <p>这就是 回调金字塔 。其弊端是操作强耦合、维护代价高。如何做到理想的异步呢?</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/e625c579cd9cc3b0eb7e0c69a5fa4257.png"></p>    <p>灵机一动这样写:</p>    <pre>  <code class="language-javascript">var fs = require('fs');    var data = fs.readFile('data.txt',function(err,data){      return data ? data : err;  });  fs.writeFile('./data_copy.txt', data, function(){      ...  });</code></pre>    <p>然而,根据 先同步后异步最后回调 的法则,fs.writeFile里面使用到的data,肯定是 undefined</p>    <h3>3.Promise</h3>    <pre>  <code class="language-javascript">var fs = require('fs')    function myReadFile(filepath) {      return new Promise(function (resolve, reject) {          fs.readFile(filepath, function (err, data) {              data ? resolve(data) : reject(err);          });      });  }    function myWriteFile(filepath,data) {      return new Promise(function (resolve, reject) {          fs.writeFile(filepath,data,function (err) {              err ? reject(err) : resolve();          });      });  }    function test() {      myReadFile('data.txt').then(function(data){          myWriteFile('./data1.txt',data)      });  }  test();</code></pre>    <p>Promise的特点在于可以用then方法向下传递值。</p>    <h3>4. Generator</h3>    <p>4.1 function*</p>    <p>关于生成器函数,这里不作具体介绍,简单看一例子:</p>    <pre>  <code class="language-javascript">function* GenFunc(){      yield [1,2];      yield* [3,4];      yield "56";      yield* "78"    }  var gen = GenFunc();  console.log(gen.next());  console.log(gen.next());  console.log(gen.next());  console.log(gen.next());  console.log(gen.next());  console.log(gen.next());</code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/25340b68ac3d8ccd41596d187f0c5ec6.png"></p>    <p>yield 和 yield* 的区别:</p>    <ul>     <li> <p>yield 只返回右值;</p> </li>     <li> <p>yield* 将函数委托给另一个生成器,或可迭代的对象(字符串、数组、arguments、Map、Set)</p> </li>    </ul>    <p>4.2 co</p>    <p>co是基于Generator的一个库:</p>    <pre>  <code class="language-javascript">var fs = require('fs');  var co = require('co');    function myReadFile(filepath){      return function(cb){          fs.readFile(filepath,cb);      };  }    function myWriteFile(filepath,data){      return function(cb){          fs.writeFile(filepath,data,cb);      };  }    co(function* GenFunc(){      var data = yield myReadFile('data.txt');      yield myWriteFile('data1.txt',data);  }).catch(function(err){      console.log(err);  });</code></pre>    <p>看起来是不是神清气爽?</p>    <p>4.3 Koa</p>    <p>Koa是基于Generator和co的web框架。</p>    <pre>  <code class="language-javascript">var koa = require('koa');  var app = koa();    app.use(function* (next){      console.log(1);      yield next;      console.log(3);  });  app.use(function* (){      console.log(2);      this.body = 'hello Koa!';  });  app.listen(8080);</code></pre>    <p>启动程序,流浪器输入 localhost:8080 ,看到页面有 hello Koa! ,控制台输入 1 2 3</p>    <h3>5.async/awit</h3>    <p>随着 Node 7 的发布,越来越多的人开始研究async/await,据说这是异步编程终级解决方案的 。个人觉得没有最好,只有更好。用这种方式改写:</p>    <pre>  <code class="language-javascript">'use strict'  var fs = require('fs')    function myReadFile(filepath) {      return new Promise(function (resolve, reject) {          fs.readFile(filepath, function (err, data) {              data ? resolve(data) : reject(err);          });      });  }    function myWriteFile(filepath,data) {      return new Promise(function (resolve, reject) {          fs.writeFile(filepath,data,function (err) {              err ? reject(err) : resolve();          });      });  }    async function test() {      const data = await myReadFile('data.txt');      await myWriteFile('./data1.txt',data);  }  test();</code></pre>    <p>这个例子还不足以体现async/awit的优势。</p>    <h3>6. 总结</h3>    <p>JavaScript的异步操作可能是区别其他语言比较大的一点,也是一个难点,不过也是很有趣的嘛。</p>    <p> </p>    <p>来自:https://segmentfault.com/a/1190000009131570</p>    <p> </p>    
 本文由用户 lgrcyanny 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1492743294608.html
Koa.js JavaScript开发