异步函数学习

1. 什么是同步函数？

同步函数：一行一行，按顺序执行，前面没执行完，后面就得等着。

例子：

console.log("第一步")
console.log("第二步")
console.log("第三步")

输出顺序就是：

第一步
第二步
第三步

---

2. 什么是异步函数？

异步函数：它里面的某些操作不会马上完成，会“丢给浏览器”去处理，等处理完了再通知你。

在这期间，JS 不会卡住，会继续执行后面的代码。

例子（定时器就是异步操作）：

console.log("第一步")

setTimeout(() => {
  console.log("第二步（等1秒后再执行）")
}, 1000)

console.log("第三步")

输出结果是：

第一步
第三步
第二步（等1秒后再执行）

👉 因为 setTimeout 是异步的，它没阻塞程序，JS 直接跑到了第三步。

---

3. 什么是Promise？

Promise 是 JavaScript 里用来处理 异步操作 的一种方式。

它代表一个「未来才会有的结果」：

• ✅ 成功（resolve）

• ❌ 失败（reject）

---

基本语法

const p = new Promise((resolve, reject) => {
  // 这里写异步任务，比如 setTimeout、请求接口等
  if (成功了) {
    resolve("结果数据")  // 告诉外面成功了
  } else {
    reject("失败原因")   // 告诉外面失败了
  }
})

---

使用方式

p.then(result => {
  // 成功时执行
  console.log("成功：", result)
}).catch(error => {
  // 失败时执行
  console.log("失败：", error)
})

---

执行特点

Promise 内部代码会立即执行

new Promise(() => console.log("马上执行"))

.then 和 .catch 要等到 resolve 或 reject 被调用后才会执行。

---

例子（点外卖）

const p = new Promise((resolve, reject) => {
  console.log("开始点外卖")  // 立刻执行

  setTimeout(() => {
    console.log("骑手送来了")  // 2 秒后执行
    resolve("外卖到了！")      // 成功
    // reject("外卖丢了！")   // 失败（取消上面这句就能触发）
  }, 2000)
})

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

输出顺序：

开始点外卖
（2秒后）
骑手送来了
成功： 外卖到了！

---

关键点总结

• resolve(值) → 触发 .then，值就是 result。

• reject(原因) → 触发 .catch，原因就是 error。

• Promise 里的 console.log 会 立即输出，和同步代码一样。

• .then / .catch 里的内容要等异步结果返回后才会执行。

---

4. async 是什么？

async 用来声明一个 异步函数。

异步函数的特点：

• 里面可以用 await。

• 返回值永远是一个 Promise。

• async 是一个「自动包装器」，它把你写的普通值 / 异步结果，全部包成 Promise，保证外部用起来很一致。

---

5. await 是什么？

await 只能在 async 函数里用。

它会 等待一个 Promise 执行完成，再继续往下走。

让异步代码看起来像同步一样，写法更直观。

---

基本写法

async function test() {
  // 假设有一个返回 Promise 的函数
  let result = await new Promise((resolve) => {
    setTimeout(() => {
      resolve("外卖到了！")
    }, 2000)
  })

  console.log(result) // 2秒后输出：外卖到了！
}

test()

---

错误处理

async function test() {
  try {
    let result = await new Promise((resolve, reject) => {
      reject("外卖丢了！")
    })
    console.log(result)
  } catch (error) {
    console.log("失败：", error) // 输出：失败： 外卖丢了！
  }
}

test()

🔄 Promise 和 async/await 的关系

可以把 async/await 看成是 Promise 的语法糖（更简洁的写法）。

---

1. 普通 Promise 写法

function getFood() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("🍔 外卖到了！")
    }, 2000)
  })
}

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

执行流程：

1. 调用 getFood() → 返回一个 Promise

2. .then(...) 里处理成功结果

3. .catch(...) 里处理失败结果

---

2. async/await 写法（等价）

async function getFood() {
  return "🍔 外卖到了！"
}

async function main() {
  try {
    const result = await getFood()
    console.log("成功:", result)
  } catch (error) {
    console.log("失败:", error)
  }
}

main()

执行流程：

1. getFood() 自动返回一个 Promise（就算里面直接写 "外卖到了！"，也会被包装成 Promise.resolve(...)）。

2. 在 main() 里用 await 等待 Promise 结果，相当于 .then。

3. 如果出错，用 try...catch 捕获，相当于 .catch。