AngularJS $q服务用法详解

一、AngularJS $q 服务的定位与设计目的

探讨 AngularJS 异步编程，$q 这个服务是绕不开的核心工具。它到底能实现哪些功能？简单来说，就是用于实现 Promise 机制，解决几个关键痛点：

1. 管理并组织那些令人头疼的异步操作
2. 彻底告别“回调地狱”（callback hell）
3. 与 AngularJS 的 脏检查（Digest）机制无缝绑定
4. 为 $http、$timeout、$resource 等兄弟服务提供统一的异步抽象层

从设计本源上看，$q 的思想根植于 Promises/A+ 规范。不过需要明确一点：早期的 AngularJS 版本并未照搬 ES6 的 Promise，而是根据框架自身的特性做了不少定制化扩展。

二、Promise 的核心概念

1. Promise 的三种状态

一个 Promise 对象的生命周期，只会经历以下三种状态之一：

这里有个关键点：一旦状态从 pending 切换到 fulfilled 或 rejected，就彻底定死，无法再改变。

2. Promise 的基本行为

• Promise 代表一个将来才会兑现的值
• 通过 .then()、.catch() 等方法注册回调函数
• 所有回调的执行顺序由 $q 统一调度，并且会自动触发 $digest 过程

三、$q 的核心 API

1. $q.defer()——延迟对象（Deferred）

（1）基本用法

var deferred = $q.defer();

这个 deferred 对象内部包含两个核心部分：

（2）示例

function asyncTask() {
  var deferred = $q.defer();
  setTimeout(function () {
    if (Math.random() > 0.5) {
      deferred.resolve('成功结果');
    } else {
      deferred.reject('失败原因');
    }
  }, 1000);
  return deferred.promise;
}

调用方如何编写？

asyncTask().then(
  function (result) {
    console.log(result);
  },
  function (error) {
    console.error(error);
  }
);

2. promise.then()——注册成功与失败回调

（1）语法

promise.then(onFulfilled, onRejected, onNotified);

• onFulfilled(value)：成功时执行的回调函数
• onRejected(reason)：失败时处理错误的回调
• onNotified(value)：进度通知回调（可选）

（2）链式调用（这一点至关重要）

promise
  .then(function (data) {
    return data + 1;
  })
  .then(function (data) {
    return data * 2;
  })
  .then(function (finalResult) {
    console.log(finalResult);
  });

核心原则是：

then 返回的值会被自动包装成一个新的 Promise

• 返回普通值 → 自动 resolve
• 返回 Promise → 等待其完成
• 抛出异常 → 自动 reject

3. promise.catch()——失败处理

（1）语法

promise.catch(function (reason) {
  // 错误处理
});

它等价于：

promise.then(null, function (reason) {});

（2）推荐用法

asyncTask()
  .then(processData)
  .then(sa veData)
  .catch(handleError);

这种写法符合“错误集中处理”的工程实践，维护起来更加方便。

4. promise.finally()——结束处理

（1）用途

• 无论是成功还是失败，这段代码都会执行
• 它不接收 Promise 的结果
• 也不会改变原有 Promise 的状态

（2）示例

asyncTask()
  .then(successHandler)
  .catch(errorHandler)
  .finally(function () {
    console.log('操作结束');
  });

常见使用场景：

• 关闭加载中的 loading 状态
• 释放占用的资源
• 记录操作日志

四、$q 的静态方法

1. $q.resolve(value) / $q.when(value)

功能

将一个普通值或现成的 Promise 转换成 $q 的 Promise。

$q.when(10).then(function (value) {
  console.log(value); // 10
});

这个方法在统一同步/异步接口的返回值时特别实用。

2. $q.reject(reason)

直接创建一个处于失败状态的 Promise。

return $q.reject('参数非法');

3. $q.all(promises)

（1）功能

并行执行多个 Promise，只有全部成功才算成功。

（2）示例

$q.all({
  user: getUser(),
  order: getOrder()
}).then(function (results) {
  console.log(results.user);
  console.log(results.order);
});

• 只要其中一个 Promise 失败 → 整体就失败
• 返回结果的字段结构与输入保持一致

4. $q.race(promises)（此方法使用较少）

• 返回最先完成的那个 Promise 的结果
• 无论成功还是失败，谁先完成就听谁的

五、$q 与 AngularJS Digest 机制的关系

这一点可是 $q 区别于原生 Promise 的核心特性。

1. 自动触发 $digest

$q.when(data).then(function () {
  $scope.value = 123;
});

• 不需要手动调用 $scope.$apply()
• 视图会自动检测并更新

2. 对比原生 Promise（针对早期版本）

Promise.resolve().then(function () {
  $scope.value = 123;
  // 视图可能纹丝不动
});

六、典型使用场景

1. 封装异步服务

app.service('UserService', function ($q, $http) {
  this.getUser = function (id) {
    var deferred = $q.defer();
    $http.get('/user/' + id)
      .then(function (res) {
        deferred.resolve(res.data);
      })
      .catch(function (err) {
        deferred.reject(err);
      });
    return deferred.promise;
  };
});

2. 串行异步流程控制

login()
  .then(loadProfile)
  .then(loadPermissions)
  .then(initApp)
  .catch(handleError);

七、最佳实践与注意事项

1. 优先返回 Promise，而不是 Deferred

❌ 不推荐：

return deferred;

✅ 推荐做法：

return deferred.promise;

2. 避免“过度使用 $q.defer()”

如果你已有现成的 Promise，直接返回就好：

return $http.get('/api');

3. 合理使用链式调用，别再写嵌套了

❌ 回调嵌套
✅ 用 Promise 链

八、总结

$q 是 AngularJS 异步编程的基石。它的核心优势可以归结为：

• 基于 Promise/A+ 思想
• 与 Digest 机制深度整合
• 支持链式调用、错误传播与并发控制
• 是构建高质量、可维护 AngularJS 应用的基础设施