前端JavaScript篇之对Promise的理解、Promise的基本用法、Promise的五个常用的方法：then()、catch()、all()、race()、finally()

---

Promise

Promise是JavaScript中用于处理异步操作的对象。它提供了一种更优雅的方式来处理异步代码，避免了回调地狱和层层嵌套的问题。Promise有三种状态：pending（进行中）、resolved（已成功）和rejected（已失败）。

对Promise的理解

Promise是JavaScript中处理异步操作的一种机制，它提供了一种更优雅和可读性更好的方式来处理异步代码。Promise对象代表一个尚未完成但最终会完成的操作，并且可以用不同的状态来表示操作的结果：pending（进行中）、fulfilled（已成功）和rejected（已失败）。

Promise的优点在于它可以解决回调地狱（callback hell）问题，使得异步代码更易于理解和维护。

1. 创建Promise：
   通过new Promise()构造函数可以创建一个Promise对象。构造函数接受一个执行器函数作为参数，该函数包含两个参数：resolve和reject。在执行器函数中，我们执行异步操作，并在操作完成时调用resolve函数来表示操作成功，或者调用reject函数来表示操作失败。

2. 状态转换：
   Promise对象的状态可以从初始的pending转变为fulfilled或rejected。当异步操作成功完成时，我们可以调用resolve函数将Promise的状态转变为fulfilled，并传递操作的结果。当异步操作失败时，我们可以调用reject函数将Promise的状态转变为rejected，并传递一个错误对象。

3. 处理Promise：
   我们可以使用.then()方法来处理Promise对象的结果。.then()接受两个回调函数作为参数：一个用于处理fulfilled状态的回调函数，另一个用于处理rejected状态的回调函数。这些回调函数将在Promise的状态转变为对应状态时被调用，并接收Promise的结果作为参数。

4. 链式调用：
   Promise的.then()方法可以返回一个新的Promise对象，从而实现链式调用。这样我们可以依次处理多个异步操作，并且可以在每个操作之间传递结果。

5. 错误处理：
   我们可以使用.catch()方法来捕获Promise链中的任何错误。.catch()方法用于处理rejected状态的Promise，并接收错误对象作为参数。

6. 并行执行：
   使用Promise.all()方法可以同时执行多个Promise，并等待它们全部完成。Promise.all()接收一个Promise数组作为参数，并返回一个新的Promise，该Promise在所有输入Promise都完成时才会完成，并将所有Promise的结果作为数组传递给.then()方法。

7. 异步操作的顺序控制：
   使用.then()方法和返回Promise的函数，我们可以按照特定的顺序执行异步操作，确保它们按照我们期望的顺序完成。

通过使用Promise，我们可以更清晰地编写和组织异步代码，避免回调地狱，并且能够更好地处理异步操作的结果和错误。

Promise的实例有三个状态

● Pending（进行中）
● Resolved（已完成）
● Rejected（已拒绝）

当创建一个Promise实例时，它的初始状态是pending（进行中）。这表示该Promise对象代表的异步操作尚未完成。

当异步操作成功完成时，我们可以调用resolve函数将Promise的状态转变为resolved（已完成），有时也被称为fulfilled（已成功）。在这种情况下，Promise的结果将被传递给.then()方法中的回调函数。

另一方面，当异步操作失败时，我们可以调用reject函数将Promise的状态转变为rejected（已拒绝）。在这种情况下，通常会传递一个错误对象，以便后续的错误处理。

一旦Promise的状态变为resolved或rejected，它将保持在这个状态，并且不会再发生变化。这意味着Promise的状态一旦确定，就不能再改变。

通过处理resolved和rejected状态的Promise，我们可以在代码中根据操作的结果执行不同的逻辑，从而实现更灵活和可靠的异步编程。

Promise的实例有两个过程

● pending -> fulfilled : Resolved（已完成）
● pending -> rejected：Rejected（已拒绝）

一旦Promise实例的状态从pending（进行中）转变为fulfilled（已完成）或rejected（已拒绝），就不能再改变状态了。这是Promise的特性之一，确保状态的不可变性。

当异步操作成功完成时，我们调用resolve函数将Promise的状态从pending转变为fulfilled。这意味着操作已成功完成，并且可以通过.then()方法中的回调函数来处理操作的结果。

另一方面，当异步操作失败时，我们调用reject函数将Promise的状态从pending转变为rejected。这表示操作未能成功完成，并且可以通过.catch()方法或.then()方法中的第二个回调函数来处理操作的失败情况。

一旦Promise的状态变为fulfilled或rejected，它将保持在这个状态，并且不会再发生变化。这种不可变性确保了Promise的结果的可靠性和一致性。

Promise的特点

1. 异步操作的封装：Promise是用于处理异步操作的一种机制。它能够将异步操作封装成一个Promise对象，使得异步操作的处理更加直观和简洁。

2. 状态管理：Promise具有三个状态：pending（进行中）、resolved（已完成）和rejected（已拒绝）。一旦Promise的状态确定，就不能再改变。这种状态管理使得异步操作的结果能够被准确地传递和处理。

3. 链式调用：Promise提供了.then()方法，允许我们以链式的方式处理异步操作的结果。通过链式调用，我们可以按照顺序执行多个异步操作，并在每个操作完成后处理其结果。

4. 错误处理：Promise具有.catch()方法，用于捕获和处理异步操作中的错误。通过.catch()方法，我们可以在Promise链中的任何位置捕获错误，并执行相应的错误处理逻辑。

5. 并发执行：Promise可以通过Promise.all()和Promise.race()方法来处理多个Promise对象。Promise.all()方法等待所有Promise对象都完成后才返回结果，而Promise.race()方法在任何一个Promise对象完成后就返回结果。

6. 更好的代码可读性：Promise的链式调用和错误处理机制使得异步代码更易于理解和维护。它可以避免回调地狱（callback hell）的问题，使得异步代码的结构更加清晰和可读。

这些特点使得Promise成为现代JavaScript中处理异步操作的常用工具，它提供了一种优雅和可靠的方式来管理异步代码流程和处理异步操作的结果。

Promise的缺点

虽然Promise在处理异步操作方面具有许多优点，但也存在一些缺点。以下是一些常见的Promise的缺点：

1. 不支持取消：Promise一旦被创建，就无法取消或中断。这意味着一旦启动了一个Promise链，它将一直执行下去，无法提前终止。这可能会导致资源浪费或不必要的计算。

2. 无法处理同步操作：Promise主要用于处理异步操作，因此对于同步操作，使用Promise可能会显得冗余。同步操作可以立即返回结果，而Promise需要额外的封装和处理，可能会增加代码的复杂性。

3. 错误处理局限性：Promise的错误处理机制有一定的局限性。在Promise链中，如果没有显式地使用.catch()方法捕获错误，错误可能会被静默地忽略。这可能导致难以追踪和调试错误。

4. 链式调用的可读性限制：虽然Promise的链式调用可以提高代码的可读性，但当链式调用过长时，可能会变得难以理解。嵌套过多的.then()方法可能会导致代码的嵌套层级过深，使得代码难以维护和调试。

5. 兼容性问题：Promise是ES6引入的特性，对于不支持ES6的旧版浏览器或环境，可能需要使用polyfill或其他手段来提供Promise的支持。这可能增加了额外的工作量和兼容性问题。

尽管Promise存在这些缺点，但它仍然是处理异步操作的一种强大工具，特别是在现代JavaScript开发中。许多缺点也可以通过使用其他工具、库或编程模式来解决，例如使用async/await、使用第三方Promise库等。

小结

1. Promise是一个对象，用于表示一个异步操作的最终完成或失败，并返回一个结果值。
2. Promise有三种状态：pending（进行中）、resolved（已成功）和rejected（已失败）。
3. Promise的状态只能从pending转变为resolved或rejected，并且一旦状态发生改变，就不可再变化。
4. Promise的状态改变是通过调用resolve()函数将其转变为resolved状态，或调用reject()函数将其转变为rejected状态。
5. 通过调用Promise的then()方法，可以注册回调函数来处理异步操作的结果。
6. Promise的回调函数属于微任务，会在本轮事件循环的末尾执行。
7. Promise可以通过链式调用then()方法来处理多个异步操作，形成一个Promise链。
8. Promise链中的每个then()方法可以返回一个新的Promise实例，使得可以在不同的步骤中进行连续的异步操作。
9. Promise提供了catch()方法来捕获链式调用中的错误，并进行错误处理。
10. Promise还提供了一些其他方法，如finally()用于指定无论Promise状态如何都要执行的回调函数，以及静态方法如all()和race()用于处理多个Promise实例。

使用Promise可以更好地管理和处理异步操作，避免了回调地狱和层层嵌套的问题，使得代码更加清晰和可读。同时，Promise也提供了错误处理和状态管理的机制，使得异步操作更加可靠和可控。

Promise的基本用法

创建Promise对象

当使用Promise时，通常会按照以下步骤进行操作：

1. 创建一个Promise对象：使用Promise构造函数创建一个新的Promise实例。构造函数接受一个函数作为参数，这个函数被称为执行器函数（executor function）。执行器函数会立即执行，并且接受两个参数，分别是resolve和reject。在执行器函数中，我们执行异步操作，并在适当的时候调用resolve或reject来改变Promise的状态。

const myPromise = new Promise((resolve, reject) => {
  // 异步操作
  // 如果操作成功，调用 resolve(value)
  // 如果操作失败，调用 reject(error)
})

2. 处理Promise的状态改变：通过调用then()方法来注册回调函数，处理Promise的状态改变。then()方法接受两个参数，分别是成功回调函数和失败回调函数。成功回调函数会在Promise状态变为resolved时被调用，接收resolve函数传递的值作为参数；失败回调函数会在Promise状态变为rejected时被调用，接收reject函数传递的错误作为参数。

myPromise.then(
  value => {
    // 处理成功的情况
  },
  error => {
    // 处理失败的情况
  }
)

3. 链式调用和处理多个Promise：通过then()方法的链式调用，可以在多个异步操作之间形成一个Promise链。每个then()方法可以返回一个新的Promise实例，使得可以在不同的步骤中进行连续的异步操作。这样可以更好地管理和处理多个异步操作。

myPromise
  .then(value => {
    // 第一个异步操作成功后的处理
    return anotherAsyncOperation()
  })
  .then(result => {
    // 第二个异步操作成功后的处理
  })
  .catch(error => {
    // 错误处理
  })

4. 错误处理：可以使用catch()方法来捕获Promise链中的错误，并进行错误处理。catch()方法会捕获之前任何一个then()方法中发生的错误。

myPromise
  .then(value => {
    // 处理成功的情况
  })
  .catch(error => {
    // 错误处理
  })

当使用 new Promise() 创建 Promise 对象时，您需要手动定义解决（resolve）和拒绝（reject）的逻辑。这种方式更加灵活，适用于需要进行复杂处理的情况。

而当使用 Promise.resolve() 和 Promise.reject() 方法时，它们提供了一种更为简洁的方式来创建已经解决或已经拒绝的 Promise 对象。这两个方法可以用于快速返回一个成功或失败的 Promise 对象。

一般情况下都会使用new Promise()来创建promise对象，但是也可以使用promise.resolve和 promise.reject这两个方法

使用 new Promise()

const myPromise = new Promise((resolve, reject) => {
  // 执行一些异步操作
  if (/* 异步操作成功 */) {
    resolve("成功")
  } else {
    reject("失败")
  }
})

• new Promise(): 这种方式更加灵活，适用于需要进行复杂处理的情况。您需要手动在 Promise 的执行函数中定义解决和拒绝的逻辑。

下面是一个使用 new Promise() 创建 Promise 对象的简单案例：

function delay(time) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`成功延迟了 ${time} 毫秒`)
    }, time)
  })
}

delay(2000)
  .then(result => {
    console.log(result)
  })
  .catch(error => {
    console.log(error)
  })

这个案例中，我们定义了一个 delay 函数，它会返回一个 Promise 对象。在 Promise 的执行函数中，我们使用 setTimeout 函数来模拟一个异步操作，等待指定的时间后，将 Promise 解决为一个成功的状态，并返回一个字符串作为解决值。

在调用 delay 函数时，我们使用 then 方法来处理 Promise 解决后的结果，并使用 catch 方法来处理 Promise 拒绝的情况。如果 Promise 解决为成功状态，then 方法中传入的回调函数将会被执行，如果 Promise 解决为拒绝状态，catch 方法中传入的回调函数将会被执行。

这个案例中，我们使用了 new Promise() 的方式来创建 Promise 对象，并手动定义了 Promise 的执行逻辑。

使用 Promise.resolve()

const resolvedPromise = Promise.resolve('成功')

• Promise.resolve(): 会返回一个已解决的 Promise 对象，可以带有一个参数作为解决值。这种方式适合于快速返回一个成功的 Promise 对象。

下面是一个使用 Promise.resolve() 创建已经解决的 Promise 对象的简单案例：

const resolvedPromise = Promise.resolve('这是一个已经解决的 Promise 对象')
resolvedPromise
  .then(result => {
    console.log(result)
  })
  .catch(error => {
    console.log(error)
  })

这个案例中，我们使用 Promise.resolve() 方法来创建一个已经解决的 Promise 对象，并将一个字符串作为解决值传入。由于这个 Promise 对象已经解决了，因此无论我们是否使用 then 方法来处理结果，它都不会被拒绝。在这个案例中，我们使用 then 方法来处理 Promise 解决后的结果，并将解决值输出到控制台上。

需要注意的是，使用 Promise.resolve() 创建已经解决的 Promise 对象时，如果传入的是一个 Promise 对象，则会直接返回这个 Promise 对象，而不会创建新的 Promise 对象。

使用 Promise.reject()

const rejectedPromise = Promise.reject("失败")

• Promise.reject(): 会返回一个已拒绝的 Promise 对象，同样可以带有一个参数作为拒绝原因。这种方式适合于快速返回一个失败的 Promise 对象。

下面是一个使用 Promise.reject() 创建已经拒绝的 Promise 对象的简单案例：

const rejectedPromise = Promise.reject('这是一个已经拒绝的 Promise 对象')
rejectedPromise
  .then(result => {
    console.log(result)
  })
  .catch(error => {
    console.log(error)
  })

这个案例中，我们使用 Promise.reject() 方法来创建一个已经拒绝的 Promise 对象，并将一个字符串作为拒绝理由传入。由于这个 Promise 对象已经拒绝了，因此无论我们是否使用 then 方法来处理结果，它都不会被解决。在这个案例中，我们使用 catch 方法来处理 Promise 拒绝后的情况，并将拒绝理由输出到控制台上。

需要注意的是，在使用 Promise.reject() 创建已经拒绝的 Promise 对象时，它会直接返回一个已拒绝的 Promise 对象。

使用resolve方法和reject

这是一个使用 new Promise() 创建 Promise 对象的案例，它根据传入的 ready 参数来决定 Promise 对象是解决还是拒绝：

function testPromise(ready) {
  return new Promise(function (resolve, reject) {
    if (ready) {
      resolve('hello world')
    } else {
      reject('No thanks')
    }
  })
}

testPromise(true).then(
  function (msg) {
    console.log(msg)
  },
  function (error) {
    console.log(error)
  }
)

在这个案例中，我们定义了一个 testPromise 函数，它接受一个 ready 参数，并返回一个 Promise 对象。在 Promise 对象的构造函数中，我们根据传入的 ready 参数来决定这个 Promise 对象是解决还是拒绝。如果 ready 参数为真，则调用 resolve 方法并传入一个字符串作为解决值；否则调用 reject 方法并传入一个字符串作为拒绝理由。

在方法调用中，我们调用 testPromise 函数并传入 true 参数，表示我们期望这个 Promise 对象会被解决。然后使用 then 方法来处理 Promise 解决后的结果，并将解决值输出到控制台上。如果我们传入的是 false 参数，则这个 Promise 对象会被拒绝，并使用 catch 方法来处理 Promise 拒绝后的情况，并将拒绝理由输出到控制台上。

需要注意的

• 当使用 Promise.resolve() 时，如果传入的是一个 Promise 对象，则会直接返回这个 Promise 对象，而不会创建新的 Promise 对象。
• 当使用 Promise.reject() 时，同样也会直接返回一个已拒绝的 Promise 对象。

小结

new Promise() 提供了更多的灵活性，适用于需要进行复杂处理的情况，而 Promise.resolve() 和 Promise.reject() 则提供了一种更为简洁的方式来创建已经解决或已经拒绝的 Promise 对象，适合于快速返回成功或失败的 Promise 对象。

Promise的五个常用的方法：then()、catch()、all()、race()、finally()

1. then()

then() 方法是 Promise 对象最常用的方法之一，它接受两个回调函数作为参数，分别处理 Promise 对象解决和拒绝后的情况。当 Promise 对象被解决时，then() 方法会调用第一个回调函数，并将解决值作为参数传递给它；当 Promise 对象被拒绝时，then() 方法会调用第二个回调函数，并将拒绝理由作为参数传递给它。需要注意的是，then() 方法返回的是一个新的 Promise 对象，因此可以使用链式调用来处理多个 Promise 对象。

const promise = new Promise((resolve, reject) => {
  resolve('hello world')
})

promise
  .then(result => {
    console.log(result) // 输出：hello world
  })
  .catch(error => {
    console.log(error)
  })

优点：then() 方法可以处理 Promise 对象的解决和拒绝情况，非常灵活。同时，它返回一个新的 Promise 对象，因此可以使用链式调用来处理多个 Promise 对象。

缺点：如果需要处理 Promise 对象的拒绝情况，必须要使用 catch() 方法，否则可能会出现未处理的 Promise 拒绝异常。

2. catch()

catch() 方法是 Promise 对象用来处理拒绝情况的方法，它接受一个回调函数作为参数，用来处理 Promise 对象被拒绝后的情况。需要注意的是，catch() 方法也返回一个新的 Promise 对象，因此可以使用链式调用来处理多个 Promise 对象。

const promise = new Promise((resolve, reject) => {
  reject('error')
})

promise.catch(error => {
  console.log(error) // 输出：error
})

优点：catch() 方法可以处理 Promise 对象的拒绝情况，非常方便。同时，它返回一个新的 Promise 对象，因此可以使用链式调用来处理多个 Promise 对象。

缺点：如果需要处理 Promise 对象的解决情况，必须要使用 then() 方法，否则可能会出现未处理的 Promise 解决值。

3. all()

all() 方法是 Promise 对象的一个静态方法，它接受一个 Promise 对象数组作为参数，并返回一个新的 Promise 对象。当传入的所有 Promise 对象都被解决时，all() 方法返回的 Promise 对象才会被解决，并将所有 Promise 对象的解决值作为一个数组传递给回调函数；如果传入的 Promise 对象中有任意一个被拒绝，all() 方法返回的 Promise 对象就会被拒绝，并将第一个被拒绝的 Promise 对象的拒绝理由传递给回调函数。

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('hello')
  }, 1000)
})

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('world')
  }, 2000)
})

Promise.all([promise1, promise2])
  .then(result => {
    console.log(result) // 输出：['hello', 'world']
  })
  .catch(error => {
    console.log(error)
  })

优点：all() 方法非常适合处理多个 Promise 对象的解决情况，可以将多个 Promise 对象的解决值合并成一个数组进行处理。

缺点：如果传入的 Promise 对象中有任意一个被拒绝，all() 方法返回的 Promise 对象就会被拒绝，并将第一个被拒绝的 Promise 对象的拒绝理由传递给回调函数，因此需要注意处理 Promise 对象的拒绝情况。

4. race()

race() 方法是 Promise 对象的一个静态方法，它接受一个 Promise 对象数组作为参数，并返回一个新的 Promise 对象。当传入的任意一个 Promise 对象被解决或拒绝时，race() 方法返回的 Promise 对象就会被解决或拒绝，并将第一个解决或拒绝的 Promise 对象的解决值或拒绝理由传递给回调函数。

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('hello')
  }, 2000)
})

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('error')
  }, 1000)
})

Promise.race([promise1, promise2])
  .then(result => {
    console.log(result)
  })
  .catch(error => {
    console.log(error) // 输出：error
  })

优点：race() 方法非常适合处理多个 Promise 对象的解决和拒绝情况，可以快速获取到第一个解决或拒绝的 Promise 对象的结果。

缺点：如果传入的 Promise 对象中有任意一个被拒绝，race() 方法返回的 Promise 对象就会被拒绝，并将第一个被拒绝的 Promise 对象的拒绝理由传递给回调函数，因此需要注意处理 Promise 对象的拒绝情况。

5. finally()

finally() 方法是 Promise 对象的一个实例方法，它接受一个回调函数作为参数，无论 Promise 对象最终是被解决还是被拒绝，都会执行这个回调函数。需要注意的是，finally() 方法返回的是一个新的 Promise 对象，因此可以使用链式调用来处理多个 Promise 对象。

const promise = new Promise((resolve, reject) => {
  resolve('hello world')
})

promise
  .then(result => {
    console.log(result) // 输出：hello world
  })
  .catch(error => {
    console.log(error)
  })
  .finally(() => {
    console.log('finally')
  })

优点：finally() 方法非常适合处理 Promise 对象最终的情况，可以在 Promise 对象被解决或拒绝后执行一些清理操作。

缺点：finally() 方法只能处理 Promise 对象最终的情况，无法处理 Promise 对象的解决和拒绝情况。

小结

• then() 方法用来处理 Promise 对象的解决和拒绝情况；
• catch() 方法用来处理 Promise 对象被拒绝的情况；
• all() 方法用来处理多个 Promise 对象的解决情况；
• race() 方法用来处理多个 Promise 对象的解决和拒绝情况；
• finally() 方法用来处理 Promise 对象最终的情况，无论是被解决还是被拒绝。

持续学习总结记录中，回顾一下上面的内容：
Promise是用于处理异步操作的一种机制。它类似于一个承诺，表示一个操作最终会成功或失败，并返回结果。Promise有三种状态：进行中、成功和失败，并且状态一旦改变就无法再变化。通过调用resolve()将Promise状态改为成功，调用reject()将Promise状态改为失败。可以使用then()注册回调函数来处理操作的结果。Promise的回调函数会在当前任务完成后执行，可以形成一个链式调用来处理多个异步操作。Promise还提供了catch()来捕获错误和处理异常，以及一些其他方法来处理多个Promise实例。使用Promise能更好地管理和处理异步操作，使代码更清晰、可读，同时提供错误处理和状态管理机制，让异步操作更可靠和可控。Promise的五个常用的方法：then()、catch()、all()、race()、finally()