Promise 常见问题解决办法-JavaScript中文网-JavaScript教程资源分享门户

Promise 是 JavaScript 中一种用于管理异步操作的对象，它可以让我们更优雅地处理异步操作，防止回调地狱。

然而，当我们使用 Promise 进行异步编程时，可能会遇到一些常见的问题。本文将介绍这些问题并提供解决办法，帮助读者更好地学习和使用 Promise。

一、Promise 的状态

Promise 有三种状态：Pending（进行中）、Fulfilled（已成功）、Rejected（已失败）。在执行异步操作时，Promise 一开始处于 Pending 状态，待异步操作完成后，若成功则转为 Fulfilled 状态，若失败则转为 Rejected 状态。我们可以通过 .then() 方法或 .catch() 方法来处理 Promise 的状态变化。

下面是一个例子，其中 getData() 函数会调用后端 API 获取数据，返回的 Promise 对象会根据 API 请求结果的成功或失败实现相应的状态转换。

// www.javascriptcn.com code example
function getData() {
  return new Promise((resolve, reject) => {
    fetch('https://example.com/api/data').then(response => {
        if (response.ok) {
            return response.json()
        }
        throw new Error('API error')
    }).then(data => {
        resolve(data)
    }).catch(error => {
        reject(error)
    })
  })
}

二、Promise 的链式调用

Promise 可以通过链式调用来解决回调地狱问题，将多个异步操作串联起来。

getData().then(data => {
  return processData(data)
}).then(processedData => {
  return render(processedData)
}).catch(error => {
  console.log(error)
})

在上面的代码中，我们通过 .then() 方法将数据在多个函数之间传递，可以看到代码的结构非常清晰，不需要嵌套回调函数。

三、Promise 的异常处理

当 Promise 转为 Rejected 状态时，会被传递给 .catch() 方法进行处理。如果我们不使用 .catch() 方法，Promise 会抛出一个未被处理的异常。

// www.javascriptcn.com code example
function getData() {
  return new Promise((resolve, reject) => {
    fetch('https://example.com/api/data').then(response => {
        if (response.ok) {
            return response.json()
        }
        throw new Error('API error')
    }).then(data => {
        resolve(data)
    })
  })
}

getData().then(data => {
  console.log(data)
})

在上面的代码中，如果 API 请求失败，Promise 会一直处于 Pending 状态，.then() 中的代码不会被执行，控制台也不会输出任何内容。为了避免这种情况，我们应该总是提供 .catch() 方法，以处理 Promise 异常。

getData().then(data => {
  console.log(data)
}).catch(error => {
  console.log(error)
})

四、Promise 的并行处理

有时我们需要同时执行多个异步操作，等所有操作完成后再进行处理，这就需要使用 Promise.all() 方法。

Promise.all([getData1(), getData2(), getData3()]).then(values => {
  console.log(values)
})

在上面的代码中，我们调用了三个异步操作，将它们放在一个数组中传递给 Promise.all() 方法，当所有 Promise 对象都成功转为 Fulfilled 状态时，Promise.all() 方法才会消耗并发，执行 .then() 方法中的代码。

五、Promise 取消

Promise 取消指的是在 Promise 对象的执行过程中中断异步操作，此时 Promise 对象将转为 Rejected 状态。一般情况下，Promise 不支持取消，但我们可以通过手动实现 Promise 取消。

// www.javascriptcn.com code example
class PromiseCancellation extends Promise {
  constructor(callback) {
    let cancel
    super((resolve, reject) => {
      callback(
        value => {
          if (typeof cancel === 'function') {
            cancel = null
            resolve(value)
          }
        },
        reason => {
          if (typeof cancel === 'function') {
            cancel = null
            reject(reason)
          }
        }
      )
    })
    this.cancel = () => {
      if (typeof cancel === 'function') {
        cancel()
        cancel = null
      }
    }
  }
}

在上面的代码中，我们通过继承 Promise 类创建了 PromiseCancellation 类，该类除了具有 Promise 类的方法之外，还拥有取消 Promise 的功能。实现的方式是在 Promise 执行过程中保存一个 cancel 函数，可以在外部调用该函数中断 Promise 的执行。

// www.javascriptcn.com code example
const promise = new PromiseCancellation((resolve, reject) => {
  setTimeout(() => resolve('done'), 5000)
})

promise.then(value => {
  console.log(value)
}).catch(error => {
  console.log(error)
})

setTimeout(() => {
  promise.cancel()
}, 1000)

在上面的代码中，我们创建了一个带有 5 秒延迟的 Promise 对象，通过 .then() 方法获取 Promise 的结果后，调用 .cancel() 方法可以在 1 秒后中断 Promise 的执行。

以上是 Promise 的常见问题解决办法，希望能帮助读者更好地学习和使用 Promise。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67c7e5e9e46428fe9ed7d8d1

Promise 常见问题解决办法

一、Promise 的状态

二、Promise 的链式调用

三、Promise 的异常处理

四、Promise 的并行处理

五、Promise 取消

接着读