在前端开发中,Promise 是一种用于异步编程的重要工具。它可以帮助我们更方便地处理异步操作,从而提高代码的可读性和可维护性。在本文中,我们将介绍 Promise 必须掌握的 11 个方法,包括 Promise.all()、Promise.race()、Promise.resolve()、Promise.reject()、Promise.prototype.then()、Promise.prototype.catch()、Promise.prototype.finally()、Promise.allSettled()、Promise.any()、Promise.try() 和 Promise.allSettled()。
1. Promise.all()
Promise.all() 方法接收一个 Promise 数组作为参数,返回一个新的 Promise 对象。该 Promise 对象在数组中所有的 Promise 都成功时才会成功,否则只要有一个 Promise 失败,该 Promise 对象就会失败。在所有 Promise 都成功时,Promise.all() 返回一个包含所有 Promise 结果的数组,顺序与传入数组的顺序一致。
示例代码:
const promise1 = Promise.resolve(1); const promise2 = Promise.resolve(2); const promise3 = Promise.resolve(3); Promise.all([promise1, promise2, promise3]) .then(results => console.log(results)) // [1, 2, 3] .catch(error => console.error(error));
2. Promise.race()
Promise.race() 方法接收一个 Promise 数组作为参数,返回一个新的 Promise 对象。该 Promise 对象在数组中任意一个 Promise 完成时就会完成,无论是成功还是失败。如果第一个完成的 Promise 是成功的,该 Promise 对象就会成功并带有第一个完成的 Promise 的结果;如果第一个完成的 Promise 是失败的,该 Promise 对象就会失败并带有第一个完成的 Promise 的错误。
示例代码:
const promise1 = new Promise(resolve => setTimeout(() => resolve(1), 1000)); const promise2 = new Promise(resolve => setTimeout(() => resolve(2), 2000)); const promise3 = new Promise((resolve, reject) => setTimeout(() => reject('Error'), 3000)); Promise.race([promise1, promise2, promise3]) .then(result => console.log(result)) // 1 .catch(error => console.error(error));
3. Promise.resolve()
Promise.resolve() 方法返回一个带有指定值的 Promise 对象,可以用于将现有的值转换为 Promise 对象。如果传递给 Promise.resolve() 的值是一个 Promise 对象,则该方法将直接返回该 Promise 对象。
示例代码:
Promise.resolve(1) .then(result => console.log(result)) // 1 Promise.resolve(Promise.resolve(2)) .then(result => console.log(result)) // 2
4. Promise.reject()
Promise.reject() 方法返回一个带有指定错误的 Promise 对象,可以用于将现有的错误转换为 Promise 对象。
示例代码:
Promise.reject('Error') .catch(error => console.error(error)) // Error
5. Promise.prototype.then()
Promise.prototype.then() 方法用于注册 Promise 对象成功时的回调函数。该方法接收两个参数,第一个参数是成功时的回调函数,第二个参数是失败时的回调函数。如果只传递一个参数,则该参数会被视为成功时的回调函数。
示例代码:
Promise.resolve(1) .then(result => console.log(result)) // 1 Promise.reject('Error') .then(result => console.log(result), error => console.error(error)) // Error
6. Promise.prototype.catch()
Promise.prototype.catch() 方法用于注册 Promise 对象失败时的回调函数。该方法接收一个参数,即失败时的回调函数。
示例代码:
Promise.reject('Error') .catch(error => console.error(error)) // Error
7. Promise.prototype.finally()
Promise.prototype.finally() 方法用于注册 Promise 对象完成时的回调函数,无论是成功还是失败。该方法接收一个回调函数作为参数。
示例代码:
Promise.resolve(1) .finally(() => console.log('finally')) // finally Promise.reject('Error') .finally(() => console.log('finally')) // finally
8. Promise.allSettled()
Promise.allSettled() 方法接收一个 Promise 数组作为参数,返回一个新的 Promise 对象。该 Promise 对象在数组中所有的 Promise 都完成时才会完成,无论是成功还是失败。在所有 Promise 完成时,Promise.allSettled() 返回一个包含所有 Promise 结果的数组,顺序与传入数组的顺序一致。与 Promise.all() 不同的是,Promise.allSettled() 不会提前终止 Promise 的执行。
示例代码:
const promise1 = Promise.resolve(1); const promise2 = Promise.reject('Error'); const promise3 = new Promise(resolve => setTimeout(() => resolve(3), 1000)); Promise.allSettled([promise1, promise2, promise3]) .then(results => console.log(results)) .catch(error => console.error(error)); // [{status: "fulfilled", value: 1}, {status: "rejected", reason: "Error"}, {status: "fulfilled", value: 3}]
9. Promise.any()
Promise.any() 方法接收一个 Promise 数组作为参数,返回一个新的 Promise 对象。该 Promise 对象在数组中任意一个 Promise 成功时就会成功,无论是成功还是失败。如果所有 Promise 都失败,则该 Promise 对象会失败并带有一个 AggregateError 对象,其中包含所有 Promise 的错误。
示例代码:
const promise1 = Promise.reject('Error 1'); const promise2 = Promise.resolve(2); const promise3 = Promise.reject('Error 3'); Promise.any([promise1, promise2, promise3]) .then(result => console.log(result)) // 2 .catch(error => console.error(error)); // AggregateError: All promises were rejected
10. Promise.try()
Promise.try() 方法接收一个函数作为参数,并在该函数中执行异步操作。如果函数执行成功,则 Promise 对象会成功并带有函数的返回值;如果函数执行失败,则 Promise 对象会失败并带有函数的错误。
示例代码:
Promise.try(() => { throw new Error('Error'); }).catch(error => console.error(error)); // Error
11. Promise.allSettled()
Promise.allSettled() 方法接收一个 Promise 数组作为参数,返回一个新的 Promise 对象。该 Promise 对象在数组中所有的 Promise 都完成时才会完成,无论是成功还是失败。在所有 Promise 完成时,Promise.allSettled() 返回一个包含所有 Promise 结果的数组,顺序与传入数组的顺序一致。与 Promise.all() 不同的是,Promise.allSettled() 不会提前终止 Promise 的执行。
示例代码:
const promise1 = Promise.resolve(1); const promise2 = Promise.reject('Error'); const promise3 = new Promise(resolve => setTimeout(() => resolve(3), 1000)); Promise.allSettled([promise1, promise2, promise3]) .then(results => console.log(results)) .catch(error => console.error(error)); // [{status: "fulfilled", value: 1}, {status: "rejected", reason: "Error"}, {status: "fulfilled", value: 3}]
结语
通过掌握上述 11 个 Promise 方法,我们可以更好地应对异步编程中的各种情况,提高代码的可读性和可维护性。同时,我们也应该注意 Promise 的错误处理,避免出现未处理的 Promise 错误。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67c664c1cf1e9924e1e724a7