AngularJS 中的 Promise 详解-JavaScript中文网-JavaScript教程资源分享门户

在 AngularJS 中，Promise 是非常常见的一种异步编程方式，它可以让我们更加方便地处理异步操作的结果，避免回调地狱等问题。本文将详细介绍 AngularJS 中的 Promise，包括 Promise 的基本用法、各种方法的作用和示例代码等。

Promise 的基本用法

Promise 是一种表示异步操作的对象，它可以有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。一旦 Promise 的状态由 pending 转变为 fulfilled 或 rejected，就不会再改变。

在 AngularJS 中，我们可以使用 $q 服务创建 Promise 对象。$q 服务提供了两个方法：defer() 和 reject()。defer() 方法返回一个 Deferred 对象，用于创建 Promise 对象；reject() 方法返回一个已经被拒绝的 Promise 对象。

下面是一个简单的示例，演示了如何使用 $q.defer() 方法创建一个 Promise 对象：

var deferred = $q.defer();
deferred.resolve('Hello, world!');
deferred.promise.then(function(result) {
    console.log(result); // 输出 'Hello, world!'
});

在这个示例中，我们使用 $q.defer() 方法创建了一个 Deferred 对象，然后使用 resolve() 方法将 Promise 对象的状态设置为已成功，并传递了一个字符串参数。最后，使用 promise.then() 方法注册了一个回调函数，当 Promise 对象的状态变为 fulfilled 时，该回调函数会被调用并传递 Promise 对象的结果。

Promise 的各种方法

除了基本的 defer() 和 reject() 方法外，$q 服务还提供了很多其他有用的方法，用于处理 Promise 对象的状态、传递数据、捕获错误等。下面是一些常用的方法：

then(onFulfilled, onRejected)

then() 方法用于注册 Promise 对象状态变为 fulfilled 或 rejected 时的回调函数。它接受两个函数参数，分别表示 Promise 对象状态变为 fulfilled 和 rejected 时的回调函数。如果只想注册其中一个回调函数，可以将另一个参数设置为 null 或省略。

var deferred = $q.defer();
deferred.resolve('Hello, world!');
deferred.promise.then(function(result) {
    console.log(result); // 输出 'Hello, world!'
});

在这个示例中，我们使用 promise.then() 方法注册了一个回调函数，当 Promise 对象的状态变为 fulfilled 时，该回调函数会被调用并传递 Promise 对象的结果。

catch(onRejected)

catch() 方法用于注册 Promise 对象状态变为 rejected 时的回调函数。它接受一个函数参数，表示 Promise 对象状态变为 rejected 时的回调函数。

var deferred = $q.defer();
deferred.reject('Oops!');
deferred.promise.catch(function(reason) {
    console.error(reason); // 输出 'Oops!'
});

在这个示例中，我们使用 promise.catch() 方法注册了一个回调函数，当 Promise 对象的状态变为 rejected 时，该回调函数会被调用并传递 Promise 对象的错误原因。

finally(onFinally)

finally() 方法用于注册 Promise 对象状态变为 fulfilled 或 rejected 时的回调函数。它接受一个函数参数，表示 Promise 对象状态变为 fulfilled 或 rejected 时的回调函数。无论 Promise 对象的状态是 fulfilled 还是 rejected，该回调函数都会被调用。

var deferred = $q.defer();
deferred.resolve('Hello, world!');
deferred.promise.finally(function() {
    console.log('Done.'); // 输出 'Done.'
});

在这个示例中，我们使用 promise.finally() 方法注册了一个回调函数，当 Promise 对象的状态变为 fulfilled 或 rejected 时，该回调函数都会被调用。

all(promises)

all() 方法接受一个 Promise 对象数组作为参数，返回一个新的 Promise 对象。新的 Promise 对象的状态会在所有 Promise 对象的状态都变为 fulfilled 时变为 fulfilled，并传递所有 Promise 对象的结果数组；如果任意一个 Promise 对象的状态变为 rejected，新的 Promise 对象的状态会立即变为 rejected，并传递第一个被拒绝的 Promise 对象的错误原因。

var promise1 = $http.get('/api/data1');
var promise2 = $http.get('/api/data2');
$q.all([promise1, promise2]).then(function(results) {
    console.log(results[0].data); // 输出 promise1 的结果
    console.log(results[1].data); // 输出 promise2 的结果
});

在这个示例中，我们使用 $http.get() 方法创建了两个 Promise 对象，然后使用 $q.all() 方法将它们组合在一起，返回一个新的 Promise 对象。当两个 Promise 对象的状态都变为 fulfilled 时，该新的 Promise 对象的回调函数会被调用，并传递两个 Promise 对象的结果数组。

总结

本文介绍了 AngularJS 中 Promise 的基本用法和各种方法，包括 defer()、reject()、then()、catch()、finally() 和 all() 方法等。使用 Promise 可以让我们更加方便地处理异步操作的结果，避免回调地狱等问题。希望本文对大家学习和使用 AngularJS 有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6559db8ed2f5e1655d446ad6