学会js中的promise,看这一篇就够了!!!
👻认识promise作用
👻promise介绍
在 JavaScript 中,Promise 是一种强大的异步编程工具,它的作用在于处理异步操作,使得代码更>具可读性和可维护性。Promise 最早出现在 ECMAScript 6(ES6)中,它为开发者提供了一种更结>构化的方式来处理异步任务,尤其是网络请求、文件读写、定时任务等等。
👻Promise 主要作用
- 处理异步操作:Promise 可以用来处理异步操作,例如网络请求、文件读写、定时器等等。这有助于避免回调地狱(Callback Hell)和提高代码的可读性。
- 更好的错误处理:Promise 允许我们轻松地捕获和处理异步操作中的错误,而不需要使用传统的 try-catch 块。
- 链式调用:Promise 支持链式调用,可以按顺序执行一系列的异步操作,使代码看起来更加清晰。
👻promise基本使用
Promise 是一个代表异步操作最终完成或失败的对象。一个 Promise 可以处于以下三种状态之一:
- Pending(进行中):初始状态,表示异步操作还在进行中,尚未完成或失败。
- Fulfilled(已完成):表示异步操作已成功完成。
- Rejected(已失败):表示异步操作发生了错误或失败。
下面是一个基本的 Promise 示例:
1 | const myPromise = new Promise((resolve, reject) => { |
在这个示例中,创建了一个 Promise 对象 myPromise
,它模拟了一个异步操作。当异步操作完成时,调用 resolve
函数表示成功,调用 reject
函数表示失败。然后,使用 .then()
方法来处理成功的情况,使用 .catch()
方法来处理失败的情况。
👻promise的状态及状态变化
Promise 的三种状态:Pending(进行中)、Fulfilled(已成功)和Rejected(已失败)。这些状态是不可逆转的,一旦 Promise 进入了 Fulfilled 或 Rejected 状态,它将永远保持在这个状态,并且无法再次改变。
👻1. Pending(进行中)
Promise 最初的状态是 Pending,表示异步操作正在进行中,但尚未完成。在这个状态下,Promise 可以转换为 Fulfilled 或 Rejected 状态,取决于异步操作的结果。
👻2. Fulfilled(已成功)
当异步操作成功完成时,Promise 的状态将从 Pending 转换为 Fulfilled。这表示异步操作已成功,并且可以获取到结果值。
👻3. Rejected(已失败)
当异步操作由于某种原因失败时,Promise 的状态将从 Pending 转换为 Rejected。这表示异步操作已失败,并且可以获取到错误信息。
👻状态变化示例
下面是一个示例,演示了 Promise 的状态变化:
1 | const successPromise = new Promise((resolve, reject) => { |
在上面的示例中,successPromise
成功完成,进入 Fulfilled 状态,并输出成功状态的结果。而 failurePromise
由于出错而进入 Rejected 状态,并输出失败状态的错误信息。
👻promise实例方法
Promise 提供了一系列实例方法,用于处理异步操作和状态变化。
👻1. then
方法
then
方法是 Promise 中最重要的方法之一,用于注册回调函数来处理异步操作的结果。它接受两个参数:onFulfilled
和 onRejected
,分别用于处理成功和失败的情况。
👻基本用法
1 | const myPromise = new Promise((resolve, reject) => { |
👻多次调用 then
同一个 Promise 实例可以调用多次 then
方法,当 Promise 中的 resolve
被回调时,所有 then
方法传入的回调函数都会被调用。
1 | const promise = new Promise((resolve) => { |
👻then
方法回调函数的返回值
then
方法传入的回调函数可以有返回值。如果返回的是普通值,那么这个普通值将作为一个新的 Promise 的 resolve
的值。
1 | const promise = new Promise((resolve) => { |
如果返回的是 Promise,那么就可以再次调用 then
方法。
1 | const promise = new Promise((resolve) => { |
如果返回的是一个对象,并且该对象实现了 thenable
,该 then
函数有两个参数 resolve
和 reject
,则 resolve
的值将会传递给下一个 Promise。
1 | const promise = new Promise((resolve) => { |
👻2. catch
方法
除了通过 then
方法的第二个参数来捕获 reject
错误之外,还可以使用 catch
方法,它返回一个新的 Promise,用于处理 Promise 实例的错误。
1 | const promise = new Promise((resolve, reject) => { |
catch
方法也可以多次调用,只要 Promise 实例的状态为 rejected
,那么就会调用 catch
方法。
1 | const promise = new Promise((resolve, reject) => { |
👻3. finally
方法
finally
方法是 ES9(ES2018) 新增的特性,无论一个 Promise 实例是 fulfilled
还是 rejected
,finally
都会执行。它不接收任何参数。
1 | const promise = new Promise((resolve, reject) => { |
finally
方法适用于需要在不管 Promise 状态如何都要执行一些清理操作的场景。
👻promise的类方法
除了 Promise 实例方法,Promise 还提供了一些类方法,用于创建和处理多个 Promise 实例。
👻1. Promise.resolve()
Promise.resolve()
方法返回一个以给定值解析后的 Promise 对象。如果该值是一个 Promise,它将被返回原封不动(不进行解析)。
1 | const resolvedPromise = Promise.resolve("解析成功"); |
👻2. Promise.reject()
Promise.reject()
方法返回一个带有拒绝原因的 Promise 对象。
1 | const rejectedPromise = Promise.reject("拒绝原因"); |
👻3. Promise.all()
Promise.all()
方法接受一个可迭代的对象,如数组或字符串,里面包含多个 Promise 对象,并返回一个新的 Promise 对象。这个新的 Promise 在所有输入的 Promise 都成功解析后才会解析,如果任何一个 Promise 被拒绝,它就会立即被拒绝。
1 | const promise1 = Promise.resolve("第一个 Promise"); |
👻4. Promise.race()
Promise.race()
方法接受一个可迭代的对象,如数组或字符串,里面包含多个 Promise 对象,并返回一个新的 Promise 对象。这个新的 Promise 在第一个输入的 Promise 成功解析或拒绝后立即解析或拒绝。
1 | const promise1 = new Promise((resolve) => { |
👻Promise 链的执行
在 JavaScript 中,Promise 链是一种处理多个异步操作的方法,其中一个操作的结果将传递给下一个操作。这种方法使得异步操作能够按照预期的顺序执行,提高了代码的可读性和可维护性。
👻创建 Promise 链
Promise 链是通过在 then
方法中返回新的 Promise 来创建的。每次调用 then
方法都会返回一个新的 Promise,它可以用来定义下一个操作。
1 | const initialPromise = someAsyncOperation(); |
在上面的示例中,initialPromise
是一个异步操作的 Promise。我们通过 then
方法创建了一个 Promise 链。在每个 then
中,我们可以访问前一个操作的结果,并返回一个新的 Promise 来定义下一个操作。最后,使用 catch
方法来处理任何可能的错误。
👻Promise 链的执行顺序
Promise 链中的操作是按照顺序执行的,每个操作都在前一个操作成功完成后才会触发。这确保了异步操作的顺序性。
如果某个操作返回一个普通的值而不是 Promise,它将被包装成一个立即成功的 Promise,并立即传递给下一个操作。
1 | const promiseChain = Promise.resolve(1) |
👻异步操作的顺序性
Promise 链的执行顺序确保了异步操作的顺序性,即使异步操作本身具有不同的执行时间。
1 | const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); |
在上面的示例中,尽管每个 delay
函数具有不同的延迟时间,但它们仍然按照顺序执行。
👻Promise 链中的错误处理
如果任何一个异步操作失败(Promise 进入 Rejected 状态),错误会传递给最近的 .catch()
方法进行处理。例如:
1 | asyncOperation1() |
在上面的示例中,第二个 .then()
方法手动抛出了一个错误,因此会触发 .catch()
方法来处理错误。