JavaScript异步编程深入理解：
Promise与async/await

function fetchData(callback) {
  setTimeout(() => {
    const data = { username: "demo", age: 25 }
    callback(data)
  }, 1000)
}

fetchData((result) => {
  console.log("获取到数据：", result)
})

getUserId((userId) => {
  getUserOrder(userId, (orderList) => {
    getProductDetail(orderList[0].productId, (detail) => {
      renderPage(detail)
    })
  })
})

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const success = true
    if (success) {
      resolve("操作成功")
    } else {
      reject("操作失败")
    }
  }, 1000)
})

promise
  .then((result) => {
    console.log("成功：", result)
  })
  .catch((error) => {
    console.error("失败：", error)
  })

fetchUser()
  .then((user) => {
    if (!user) throw new Error("用户不存在")
    return user
  })
  .then((user) => {
    return fetchOrders(user.id)
  })
  .catch((error) => {
    console.error("错误被捕获：", error.message)
  })

// 快速创建已成功的Promise
Promise.resolve("ok")
  .then((value) => console.log(value)) // ok

// 快速创建已失败的Promise
Promise.reject("fail")
  .catch((error) => console.error(error)) // fail

const p1 = Promise.resolve(1)
const p2 = Promise.resolve(2)
const p3 = Promise.resolve(3)

Promise.all([p1, p2, p3])
  .then((results) => {
    console.log(results) // [1, 2, 3]
  })

const p1 = Promise.resolve(1)
const p2 = Promise.reject("error")

Promise.allSettled([p1, p2])
  .then((results) => {
    console.log(results)
    // [{status:"fulfilled", value:1}, {status:"rejected", reason:"error"}]
  })

const p1 = new Promise(resolve => setTimeout(() => resolve(1), 300))
const p2 = new Promise(resolve => setTimeout(() => resolve(2), 100))

Promise.race([p1, p2])
  .then((result) => {
    console.log(result) // 2（p2先完成）
  })

const p1 = Promise.reject("error1")
const p2 = Promise.resolve("success2")

Promise.any([p1, p2])
  .then((result) => {
    console.log(result) // success2
  })

async function fn() {
  return "hello"
}

fn().then(value => console.log(value)) // hello

// 等价于：
async function fn() {
  return Promise.resolve("hello")
}

async function fetchData() {
  const result = await new Promise(resolve => {
    setTimeout(() => resolve("数据加载完成"), 1000)
  })

  console.log(result) // 数据加载完成
}

fetchData()

async function load() {
  try {
    const res = await fetch("/api/data")
    const data = await res.json()
    console.log(data)
  } catch (error) {
    console.error("请求失败：", error)
  }
}

load()

async function serialTask() {
  const result1 = await task1()
  const result2 = await task2(result1)
  const result3 = await task3(result2)
  return result3
}

async function parallelTask() {
  const [result1, result2, result3] = await Promise.all([
    task1(),
    task2(),
    task3()
  ])
  return { result1, result2, result3 }
}

async function limitConcurrency(tasks, limit) {
  const results = []
  const executing = []

  for (const task of tasks) {
    const promise = task()
    results.push(promise)

    if (limit <= tasks.length) {
      const e = promise.then(() => executing.splice(executing.indexOf(e), 1))
      executing.push(e)

      if (executing.length >= limit) {
        await Promise.race(executing)
      }
    }
  }

  return Promise.all(results)
}

console.log(1)

setTimeout(() => {
  console.log(2)
}, 0)

Promise.resolve().then(() => {
  console.log(3)
})

console.log(4)

// 输出顺序：1 → 4 → 3 → 2

async function demo() {
  console.log("start")
  await new Promise(resolve => setTimeout(resolve, 1000))
  console.log("end")
}

demo()
console.log("其他代码继续执行")

// 输出：start → 其他代码继续执行 → (1秒后)end

const results = await Promise.allSettled([
  uploadFile1(),
  uploadFile2(),
  uploadFile3()
])

results.forEach(result => {
  if (result.status === "fulfilled") {
    console.log("成功：", result.value)
  } else {
    console.error("失败：", result.reason)
  }
})

async function request(url, options = {}) {
  try {
    const res = await fetch(url, options)
    if (!res.ok) throw new Error(`HTTP错误：${res.status}`)
    return res.json()
  } catch (error) {
    console.error("请求失败：", error)
    throw error
  }
}

async function loadData() {
  loading.value = true
  try {
    data.value = await request("/api/data")
  } catch (error) {
    errorMessage.value = error.message
  } finally {
    loading.value = false
  }
}

async function retry(fn, times = 3, delay = 1000) {
  for (let i = 0; i < times; i++) {
    try {
      return await fn()
    } catch (error) {
      if (i === times - 1) throw error
      await new Promise(resolve => setTimeout(resolve, delay))
    }
  }
}

const data = await fetchWithTimeout(request("/api/data"), 5000)