Promise 是 JavaScript 中用于异步编程的重要工具之一。通过它，我们可以更加灵活地处理数据请求、响应和处理等一系列操作，大大提高了代码的可读性和可维护性。本文将介绍 Promise 的多个练习案例，旨在深入探索 Promise 的使用方法，进一步提升前端工程师的技能。
Promise 的基本用法
在介绍 Promise 的多个练习案例之前，我们先来回顾 Promise 的基本用法。Promise 是一个对象，它代表一个尚未完成的异步操作。Promise 对象有三个状态：等待中（pending）、已完成（fulfilled）和已拒绝（rejected）。当异步操作完成后，Promise 对象的状态会从等待中变为已完成或已拒绝，此时我们可以通过 then() 方法来获取异步操作的结果或通过 catch() 方法来处理错误信息。代码示例如下：
// www.javascriptcn.com code example
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(123)
}, 1000)
})
promise.then((res) => {
console.log(res) // 输出：123
}).catch((err) => {
console.log(err)
})上述代码中，我们使用 Promise 的构造函数，传入一个函数作为参数。这个函数接收两个参数：resolve 和 reject。resolve 用于将 Promise 的状态修改为已完成，reject 用于将 Promise 的状态修改为已拒绝。在构造函数中，我们使用 setTimeout 模拟了一个异步操作，1 秒后将 Promise 的状态修改为已完成，并将参数设置为 123。接着我们通过 then() 方法获取异步操作的结果，并打印输出。如果异步操作出现错误，则会通过 catch() 方法捕获处理。
1. Promise.all()
Promise.all() 方法可以接收一个包含 Promise 对象的数组作为参数，当所有 Promise 都已完成时，它会返回一个 Promise 对象，其状态为已完成。这个 Promise 对象的结果是一个数组，包含每个 Promise 对象的结果。如果数组中任一 Promise 对象被拒绝，则返回的 Promise 对象的状态为已拒绝，并返回第一个被拒绝的 Promise 的错误信息。代码示例如下：
// www.javascriptcn.com code example
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('data1')
}, 1000)
})
const promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('data2')
}, 2000)
})
Promise.all([promise1, promise2]).then((res) => {
console.log(res) // 输出：['data1', 'data2']
}).catch((err) => {
console.log(err)
})上述代码中，我们定义了两个异步操作，分别会在 1 秒和 2 秒后将 Promise 的状态修改为已完成，并将结果数据设置为 data1 和 data2。接着我们使用 Promise.all() 方法传入两个 Promise 对象，Promise.all() 返回的 Promise 对象会在两个异步操作都完成后达到已完成状态，并返回一个包含两个结果的数组。
2. Promise.race()
Promise.race() 方法可以接收一个包含 Promise 对象的数组作为参数，它会返回一个新的 Promise 对象，当数组中任意一个 Promise 对象已完成或已拒绝时，新的 Promise 对象也会完成或拒绝，并返回该 Promise 对象的结果或错误信息。代码示例如下：
// www.javascriptcn.com code example
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('data1')
}, 1000)
})
const promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('data2')
}, 2000)
})
Promise.race([promise1, promise2]).then((res) => {
console.log(res) // 输出：'data1'
}).catch((err) => {
console.log(err)
})上述代码中，我们定义了两个异步操作，分别会在 1 秒和 2 秒后将 Promise 的状态修改为已完成，并将结果数据设置为 data1 和 data2。接着我们使用 Promise.race() 方法传入两个 Promise 对象，Promise.race() 返回的 Promise 对象会在第一个异步操作完成后达到已完成状态，并返回第一个完成的 Promise 对象的结果。
3. Promise.resolve() 和 Promise.reject()
Promise.resolve() 方法会返回一个 Promise 对象，其状态为已完成，并将参数作为 Promise 对象的结果。如果参数本身就是 Promise 对象，则直接返回这个 Promise 对象。Promise.reject() 方法会返回一个状态为已拒绝的 Promise 对象，并将参数作为 Promise 对象的错误信息。代码示例如下：
// www.javascriptcn.com code example
Promise.resolve('success').then((res) => {
console.log(res) // 输出：'success'
}).catch((err) => {
console.log(err)
})
Promise.reject(new Error('fail')).then((res) => {
console.log(res)
}).catch((err) => {
console.log(err) // 输出：Error: fail
})上述代码中，我们分别使用 Promise.resolve() 和 Promise.reject() 方法返回一个 Promise 对象，并通过 then() 和 catch() 方法分别处理成功和错误结果。
结语
本文介绍了 Promise 的多个练习案例，包括 Promise.all()、Promise.race()、Promise.resolve() 和 Promise.reject() 等方法，通过实例代码帮助读者更加深入地理解 Promise 的使用方法。通过阅读本文，相信读者对 Promise 的使用方法和意义有了更加全面的认识。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d7c8afa941bf7134df0738