一、AngularJS $q 服务的定位与设计目的
探讨 AngularJS 异步编程，$q 这个服务是绕不开的核心工具。它到底能实现哪些功能？简单来说，就是用于实现 Promise 机制，解决几个关键痛点：
- 管理并组织那些令人头疼的异步操作
- 彻底告别“回调地狱”（callback hell）
- 与 AngularJS 的 脏检查（Digest）机制无缝绑定
- 为
$http、$timeout、$resource等兄弟服务提供统一的异步抽象层
从设计本源上看，$q 的思想根植于 Promises/A+ 规范。不过需要明确一点：早期的 AngularJS 版本并未照搬 ES6 的 Promise，而是根据框架自身的特性做了不少定制化扩展。
二、Promise 的核心概念
1. Promise 的三种状态
一个 Promise 对象的生命周期，只会经历以下三种状态之一：
| 状态 | 含义 |
|---|---|
pending | 初始态，尚未产生任何结果 |
fulfilled（resolved） | 操作顺利完成，成功获取结果 |
rejected | 操作失败，且失败原因明确 |
这里有个关键点：一旦状态从 pending 切换到 fulfilled 或 rejected，就彻底定死，无法再改变。
2. Promise 的基本行为
- Promise 代表一个将来才会兑现的值
- 通过
.then()、.catch()等方法注册回调函数 - 所有回调的执行顺序由
$q统一调度，并且会自动触发$digest过程
三、$q 的核心 API
1. $q.defer()——延迟对象（Deferred）
（1）基本用法
var deferred = $q.defer();
这个 deferred 对象内部包含两个核心部分：
| 属性 | 说明 |
|---|---|
deferred.promise | Promise 对象，对外暴露 |
deferred.resolve(value) | 标记任务成功 |
deferred.reject(reason) | 标记任务失败 |
deferred.notify(value) | 进度通知（此功能较少使用） |
（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 应用的基础设施
