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

本文探讨了在Angular中如何使用$q服务来处理Promise,以解决因异步操作引起的回调地狱问题。文章首先介绍了Promise的背景及其在解决回调嵌套中的作用,然后详细讲解了Angular中$q的实现,包括$q.defer()方法创建的Deferred对象以及resolve、rejected和notify方法。通过示例展示了如何在Angular应用中使用$q进行异步操作和状态管理。
摘要由CSDN通过智能技术生成

前言

大概一个多个月忙着做公司开发的项目,做这个项目以来有些心得,但是感觉还是不如闷头学来的快,毕竟是实战,在这一个月以来,经历过各种适应布局,还算小有收获,不过最大的遗憾是荒废了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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值