热门关键字:
jquery > jquery教程 > jquery教程 > generator实例-runner

generator实例-runner

305
作者:管理员
发布时间:2021/6/9 15:12:04
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=4917
  我们先创建1.txt、2.txt和3.txt三个文件,里面分别存储了数组和json:


  我们要实现的效果是,使用ajax模拟网络请求,获取文本文件内容,并同时打印三个文本内容。要实现上面的效果,我们需要封装一个名为runner的方法,来将异步操作改造为同步操作。先不说方法怎么写,我们先来看结果,这里新建一个html,引入runner的js和jquery,像写同步方法一样,通过ajax异步获取三个文本的数据,最后一起打印:


  按照之前的逻辑,在console打印的时候,三个data可能还在异步获取中,可能数据会缺失,但是使用generator配合Promise,可以实现就像同步语句一样,一步一步执行,上一步执行完毕后再执行下一步。


  提示:Promise体现在哪?体现在ajax,因为ajax本身就是一个Promise对象。


  那么这个runner方法怎么写,能实现这个效果?我们先来剖析一下整个方法的逻辑,首先runner方法输入的是一个名为demo的generator函数,在改函数中,获取第一个data1的时候,使用了yield关键字,yield的输入对象为一个ajax方法,即一个Promise对象,此时方法的操作权被暂停,直到获取到ajax的请求结果后,yield放行,获取到结果“data1”(下面的“data2”和”data3“以此类推)。


  我们着手开始写。


  我们新建一个名为runner的js文件,在该文件中我们封装一个名为runner的方法,写下相关逻辑:


  这里不在给大家赘述,每行的注释都写的很清楚,大家要自己敲一敲,细细领会里面的逻辑。


  总结一下,异步操作目前有以下几种写法:


  1、回调:传统的ajax写法,在第一层成功获取数据后的方法里,调用下一层的方法,以此类推。就像(伪代码):


  2、Promise:放一堆ajax异步方法进去,全部执行完进入成功方法,有一个失败就进入失败方法。就像:


  Promise适合的场景是一次读一堆,不适合中间穿插逻辑的情况,具体原因看下面3中generator的对比。


  3、generator:一个一个执行ajax异步,每一个ajax异步没有执行完之前,方法都是暂停的,直到执行完毕,放行给下一个跑。就像:


  这里要说的一点,generator在执行每个异步的时候,中间是可以穿插逻辑的,而Promise必须等所有异步执行完了,才能操作,所以Promise只适合不穿插任何逻辑的情况,generator适合中间穿插逻辑的情况。




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐