Promise
对象是 JavaScript 中用于处理异步操作的一种机制。它代表了一个最终可能完成(fulfilled)或失败(rejected)的异步操作及其结果值。Promise
对象使得异步代码更加容易编写、理解和维护,因为它提供了一种链式调用的方式来处理异步操作的成功和失败情况。
基本结构
一个 Promise
对象通常包含以下部分:
-
状态:
Promise
对象有三种可能的状态:pending
(等待中)、fulfilled
(已成功)和rejected
(已失败)。一旦Promise
被resolve
或reject
,它的状态就不能再改变。 -
值:当
Promise
被resolve
时,它会关联一个值(result),这个值会被传递给后续成功的回调函数。当Promise
被reject
时,它会关联一个错误(reason),这个错误会被传递给后续失败的回调函数。 -
解决函数(Resolve Function) 和 拒绝函数(Reject Function):这两个函数是在创建
Promise
时通过执行器(executor)函数传递给Promise
构造函数的。它们在异步操作成功或失败时被调用,以改变Promise
的状态并传递相应的值或错误。
使用场景
Promise
广泛应用于需要处理异步操作的场景,比如:
- 发起网络请求(使用
fetch
API 或XMLHttpRequest
的封装库时)。 - 读取文件(在 Node.js 环境中)。
- 定时任务(使用
setTimeout
或setInterval
时,虽然它们本身不是异步操作,但可以用Promise
来封装以使其支持链式调用)。
创建 Promise
你可以通过 new Promise(executor)
构造函数来创建一个新的 Promise
对象,其中 executor
是一个执行器函数,它接受两个参数:resolve
和 reject
。
let promise = new Promise(function(resolve, reject) {
// 异步操作
if (/* 异步操作成功 */) {
resolve(value); // 将 Promise 的状态从 pending 变为 fulfilled,并传递结果值
} else {
reject(error); // 将 Promise 的状态从 pending 变为 rejected,并传递错误原因
}
});
使用 Promise
一旦你有了 Promise
对象,你就可以使用 .then()
方法来注册成功和失败的回调函数。.then()
方法接受两个可选的参数:第一个参数是当 Promise
成功时(即状态变为 fulfilled
)被调用的函数,第二个参数是当 Promise
失败时(即状态变为 rejected
)被调用的函数(这个参数是可选的,你也可以使用 .catch()
方法来捕获错误)。
promise.then(
function(value) {
// 处理成功的情况
},
function(error) {
// 处理失败的情况
}
);
// 或者使用 catch 来捕获错误
promise.then(function(value) {
// 处理成功的情况
}).catch(function(error) {
// 处理失败的情况
});
链式调用
Promise
的 .then()
方法返回一个新的 Promise
对象,这使得你可以将多个异步操作以链式调用的方式组合起来。每个 .then()
方法都可以注册自己的成功和失败回调函数,并且每个回调函数都可以返回一个新的 Promise
对象(或者不是 Promise
的值),这使得你可以构建复杂的异步流程。
链式调用示例
链式调用是 Promise
强大的特性之一,它允许你将多个异步操作以链式的方式组合起来,每个操作的结果可以作为下一个操作的输入。这里是一个简单的链式调用示例,假设我们有两个异步操作:fetchUser
和 fetchUserData
,它们分别返回用户信息和基于用户ID的额外数据。
function fetchUser(userId) {
return new Promise((resolve, reject) => {
// 模拟异步获取用户信息
setTimeout(() => {
if (userId) {
resolve({ id: userId, name: 'John Doe' });
} else {
reject(new Error('Invalid user ID'));
}
}, 1000);
});
}
function fetchUserData(user) {
return new Promise((resolve, reject) => {
// 假设这是基于用户ID从另一个服务获取数据的异步操作
setTimeout(() => {
if (user.id) {
resolve({ ...user, data: 'Some additional data' });
} else {
reject(new Error('No user data available'));
}
}, 1000);
});
}
// 使用链式调用
fetchUser(1)
.then(user => {
console.log('User fetched:', user);
return fetchUserData(user); // 注意这里返回了另一个Promise
})
.then(userData => {
console.log('User data fetched:', userData);
})
.catch(error => {
console.error('An error occurred:', error.message);
});
在这个示例中,fetchUser
函数首先被调用,并返回一个 Promise
。当这个 Promise
被解决(resolve)时,我们得到了用户信息,并将其作为参数传递给 fetchUserData
函数。fetchUserData
函数也返回一个 Promise
,它表示获取额外数据的异步操作。我们再次使用 .then()
来处理这个 Promise
的结果,并在所有操作都成功完成时打印出用户数据。如果在任何步骤中出现错误,.catch()
方法将捕获这个错误并处理它。
静态方法
Promise
还有一些静态方法,如 Promise.all()
、Promise.race()
、Promise.resolve()
和 Promise.reject()
,这些方法提供了额外的功能来创建或操作 Promise
对象。
Promise.all()
:接受一个Promise
对象的数组作为参数,并返回一个新的Promise
对象。只有当这个数组中的所有Promise
对象都变为fulfilled
状态时,返回的Promise
才会变为fulfilled
状态,其结果为数组形式,包含了所有Promise
的结果。Promise.race()
:与Promise.all()
类似,但它返回的是数组中第一个完成的Promise
的结果。Promise.resolve()
:返回一个以给定值解析后的Promise
对象。如果该值是一个Promise
对象,则直接返回该对象。Promise.reject()
:返回一个以给定原因拒绝的Promise
对象。
静态方法示例:
Promise.all()
Promise.all()
方法接受一个 Promise
对象的数组,并返回一个新的 Promise
,该 Promise
在所有给定的 Promise
对象都成功完成时才会解决。
Promise.all([
fetchUser(1),
fetchUser(2) // 假设这是另一个异步获取用户信息的调用
])
.then(users => {
console.log('All users fetched:', users);
})
.catch(error => {
console.error('An error occurred:', error.message);
});
Promise.race()
Promise.race()
方法与 Promise.all()
类似,但它返回的是数组中第一个完成的 Promise
的结果。
Promise.race([
fetchUser(1), // 假设这个调用需要较长时间
new Promise((resolve, reject) => setTimeout(resolve, 500, 'Quick result')) // 这个会更快完成
])
.then(result => {
console.log('First completed:', result);
})
.catch(error => {
console.error('An error occurred:', error.message);
});
Promise.resolve() 和 Promise.reject()
Promise.resolve()
和 Promise.reject()
方法分别返回一个以给定值解析或拒绝的 Promise
对象。
// 使用 Promise.resolve()
Promise.resolve('Hello, world!')
.then(value => console.log(value)); // 输出: Hello, world!
// 使用 Promise.reject()
Promise.reject(new Error('Something went wrong'))
.catch(error => console.error(error.message)); // 输出: Something went wrong
注意事项
- 一旦
Promise
的状态被改变(从pending
变为fulfilled
或rejected
),这个状态就不会再改变。 Promise
的结果值(或错误原因)在Promise
对象创建时就确定了,并且不会随着时间的推移而改变。- 使用
Promise
时,应避免在then
或catch
的回调函数中创建新的Promise
但不返回它们,这可能会导致难以追踪的错误。
Promise
是现代 JavaScript 异步编程的核心概念之一,它极大地简化了异步操作的处理,使得代码更加清晰、易于理解和维护。