浅析 Angular $q promise 回调异步嵌套解决机制

  • Post author:
  • Post category:其他


前言

大概一个多个月忙着做公司开发的项目,做这个项目以来有些心得,但是感觉还是不如闷头学来的快,毕竟是实战,在这一个月以来,经历过各种适应布局,还算小有收获,不过最大的遗憾是荒废了angular的学习进度,所以趁着闲季,小补一下Angular ,也算对自己的一个巩固。

一 、Promise的出现

随着node.js的出现,异步逐渐被普及到web程序中来,随着异步带来的好处,也伴随着“回调噩梦”的出现,比如形如下面的代码我们称作为“回调噩梦”或者是“回调金字塔”

fs.readFile("../data.txt",(err,data) => {
    fs.readFile("../"+data+".txt",(err,data) => {
        fs.readFile("../"+data+".txt",(err,data) => {
            ...
        });
    });
});

回调嵌套出现的主要原因来自于下一个异步操作需要上一个异步操作的结果。

上面的例子,每个读取文件的操作都把上一次的结果当做路径来进行读取

真正出现这些状况的来源是将要执行的异步操作互相依赖,比如说一个连接Mongodb的例子。

每一个对mongodb的DURD操作得到的结果都会当做一个回调函数的参数返回,连同db的实例一起,因此,你如果要操作db,你始终得嵌套着回调来执行,当然,这个是有其他的解决方案的,今天我们主要看一下Promise。

看了上面的例子,多个回调函数的嵌套会带来很多问题,诸如可读性差代码冗余等。

为了解决这个问题,在es7草案中出现的async就是一个非常好的解决方案,他是generator函数的语法糖。

在它之前也有过一个关于回调嵌套的解决方案,它就是Promise。

Promise并没有从根本解决回调嵌套的问题,它带来的是把原先横向发展的代码变为流式的纵向结构。

比如上面的例子,我现在用promise来做。

let readFile = path => {
  return new Promise((resolve,rejected) => {
    fs.readFile(path,(err,data) => {
      if(err) rejected(err);
      else resolve(data);
    });
  });
}

readFile("../data.txt")
.then(data => {
  readFile("../"+data+".txt");
})
.then(data => {
  readFile("../"+data+".txt");
})
.then(data => {
  readFile("../"+data+".txt");
})
.catch(err) => {
  console.log("there was a error : " + err);
};

Promise很显然的解决了代码的可读性的问题。不得不说也是现在很流行的一种解决方案。

Promise对象存在于es6的标准中。然而在Angular中也封装了一个Promise,以服务的形式存在。

二 、$q




版权声明:本文为HaoDaWang原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。