谈谈angularjs中的异步问题(一)

对着背影说爱祢 提交于 2020-04-06 21:46:38

因为上次遇到的那个问题,所以这里我就把angularjs的异步问题刨根问底的查一查
再说angularjs的异步之前,我们先说说关于JavaScript中的异步的问题吧。
我们都知道JavaScript是一个单线程的玩意儿,所谓的单线程,就是你要执行这个代码,就必须等前面的全都搞定了才能轮到你(有一种厕所里就一个坑的感觉有木有),这种模式下,实现起来非常的简单。秩序好!但是当然,显而易见到问题是,这里执行效率很低。所以JavaScript就出现了另一个模式,异步模式!
所谓的异步模式就是每一个任务有一个或者多个回调函数,前一个任务执行完成以后不是执行后一个任务,而是执行回调函数,而后一个任务也不需要等待前一个任务执行完就去执行。
关于异步和同步这里我想大家可能都非常的清楚明白的,我这里也不赘述了,下面简单说下异步模式下编程的四种方法吧:
一、 回调函数
这个是实现异步的最简单的方法
假设有两个函数

f1(); f2();

f1执行完了以后再去执行f2,这里我们就可以用毁掉函数去解决
具体的使用如下:

function f1(callback){
    setTimeout(function () {
      // f1的任务代码
      callback();
    }, 1000);
  }

所以我们的代码就可以变成:
 f1(f2);
采用这种方法我们就把同步的变成了异步的了

回调函数的优点是简单、容易理解和部署,缺点是不利于代码的阅读和维护,各个部分之间高度耦合(Coupling),流程会很混乱,而且每个任务只能指定一个回调函数。

二、 事件监听
另一种思路是采用事件驱动模式。任务的执行不取决于代码的顺序,而取决于某个事件是否发生。
还是以f1和f2为例。首先,为f1绑定一个事件(这里采用的jQuery的写法)。
f1.on('done', f2);
上面这行代码的意思是,当f1发生done事件,就执行f2。然后,对f1进行改写

function f1(){
    setTimeout(function () {
      // f1的任务代码
      f1.trigger('done');
    }, 1000);
  }

f1.trigger('done')表示,执行完成后,立即触发done事件,从而开始执行f2
这种方法的优点是比较容易理解,可以绑定多个事件,每个事件可以指定多个回调函数,而且可以"去耦合"(Decoupling),有利于实现模块化。缺点是整个程序都要变成事件驱动型,运行流程会变得很不清晰。

三、 发布/订阅
我们假定,存在一个"信号中心",某个任务执行完成,就向信号中心"发布"(publish)一个信号,其他任务可以向信号中心"订阅"(subscribe)这个信号,从而知道什么时候自己可以开始执行。这就叫做"发布/订阅模式"(publish-subscribe pattern),又称"观察者模式"(observer pattern)
这个模式有多种实现,下面采用的是Ben Alman的Tiny Pub/Sub,这是jQuery的一个插件
首先,f2向"信号中心"jQuery订阅"done"信号。
jQuery.subscribe("done", f2);
然后,f1进行如下改写:

function f1(){
    setTimeout(function () {
      // f1的任务代码
      jQuery.publish("done");
    }, 1000);
  }

jQuery.publish("done")的意思是,f1执行完成后,向"信号中心"jQuery发布"done"信号,从而引发f2的执行。
此外,f2完成执行后,也可以取消订阅(unsubscribe)。
jQuery.unsubscribe("done", f2);
这种方法的性质与"事件监听"类似,但是明显优于后者。因为我们可以通过查看"消息中心",了解存在多少信号、每个信号有多少订阅者,从而监控程序的运行。

四、 Promises对象(个人比较推荐这个的)
这个是很重要的,后面的angularjs处理异步也是常用的这个方法
简单说,它的思想是,每一个异步任务返回一个Promise对象,该对象有一个then方法,允许指定回调函数。比如,f1的回调函数f2,可以写成:
f1().then(f2);
f1要进行如下改写(这里使用的是jQuery的实现):

function f1(){
    var dfd = $.Deferred();
    setTimeout(function () {
      // f1的任务代码
      dfd.resolve();
    }, 500);
    return dfd.promise;
  }

这样写的优点在于,回调函数变成了链式写法,程序的流程可以看得很清楚,而且有一整套的配套方法,可以实现许多强大的功能。
比如,指定多个回调函数:
f1().then(f2).then(f3);
再比如,指定发生错误时的回调函数:
f1().then(f2).fail(f3);
而且,它还有一个前面三种方法都没有的好处:如果一个任务已经完成,再添加回调函数,该回调函数会立即执行。所以,你不用担心是否错过了某个事件或信号。这种方法的缺点就是编写和理解,都相对比较难。

在angularjs中promise也是我们常用的处理异步的方法,后面会对angularjs中的异步和处理的方法进行整理归纳。


易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!