Promise 简要介绍

📋 一句话概括

Promise 是 JavaScript 中处理异步操作的对象，表示一个将来会完成（或失败）的操作。

🎯 三种状态

1. pending（进行中）⏳
2. fulfilled（已成功）✅
3. rejected（已失败）❌

📝 基本语法

// 创建 Promise
const promise = new Promise((resolve, reject) => {
  // 异步操作...
  if (成功) {
    resolve('成功的结果')
  } else {
    reject('失败的原因')
  }
})

// 使用 Promise
promise
  .then(result => console.log('成功:', result))
  .catch(error => console.error('失败:', error))
  .finally(() => console.log('无论成功失败都执行'))

💡 经典示例

1. 模拟异步请求

function fetchData(url) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (url === '/api/data') {
        resolve({ data: '获取的数据' })
      } else {
        reject(new Error('404 Not Found'))
      }
    }, 1000)
  })
}

// 使用
fetchData('/api/data')
  .then(response => console.log(response.data))
  .catch(error => console.error(error.message))

2. 链式调用（告别回调地狱）

// 传统回调地狱
getUser(id, user => {
  getOrders(user.id, orders => {
    getDetails(orders[0].id, details => {
      console.log(details)
    })
  })
})

// Promise 链式调用
getUser(id)
  .then(user => getOrders(user.id))
  .then(orders => getDetails(orders[0].id))
  .then(details => console.log(details))
  .catch(error => console.error(error))

🔧 常用方法

1. Promise.all（全部成功）

// 并行执行，全部成功才成功
Promise.all([task1(), task2(), task3()])
  .then(results => console.log('全部完成:', results))
  .catch(error => console.error('有一个失败就失败'))

2. Promise.race（竞速）

// 哪个先完成就用哪个的结果
Promise.race([fastTask(), slowTask()])
  .then(result => console.log('最快的完成了:', result))

3. Promise.any（任意一个成功）

// 任意一个成功就成功
Promise.any([api1(), api2(), api3()])
  .then(result => console.log('有一个成功了:', result))

⚡ 主要特点

优点

✅ 链式调用：避免回调地狱
✅ 错误处理：统一的 catch
✅ 状态可控：三种明确状态
✅ 组合灵活：all、race、any 等

注意事项

⚠️ 不可取消：一旦开始不能取消
⚠️ 单次使用：状态改变后不可逆
⚠️ 错误穿透：不写 catch 错误会静默失败

🔄 实际应用

API 请求封装

function request(url, options = {}) {
  return new Promise((resolve, reject) => {
    fetch(url, options)
      .then(response => {
        if (response.ok) {
          return response.json()
        } else {
          reject(new Error(`HTTP ${response.status}`))
        }
      })
      .then(data => resolve(data))
      .catch(error => reject(error))
  })
}

// 使用
request('/api/users')
  .then(users => console.log(users))
  .catch(error => console.error('请求失败:', error))

📈 与 async/await 关系

// Promise
function getData() {
  return fetch('/api')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error))
}

// async/await（Promise 的语法糖）
async function getData() {
  try {
    const response = await fetch('/api')
    const data = await response.json()
    console.log(data)
  } catch (error) {
    console.error(error)
  }
}

🎓 记住这几点

1. 三种状态：pending、fulfilled、rejected
2. 链式调用：.then().catch().finally()
3. 错误处理：一定要写 catch
4. 组合使用：all、race、any 等
5. async/await 基础：async/await 基于 Promise

📋 总结

Promise 是 JavaScript 异步编程的基础，让异步代码更清晰、更易维护，是现代前端开发的必备技能。