Promise

可以把 Promise 想象成一个“外卖订单”：

1. Promise 是什么

• 当你点外卖时，你下单后，不会立刻就吃到食物（任务是异步的）。
• 平台会给你一个订单号（这就是 Promise 对象）。
• 订单号本身不是食物，它只是一个“承诺”：以后会告诉你是送到了还是出错了。

2. Promise 三种状态

1. pending（进行中） ：外卖小哥正在送餐，还没到。
2. fulfilled（已完成） ：餐送到了（任务成功），你可以吃。
3. rejected（已失败） ：餐没送到（任务失败），可能小哥迷路了。

状态只能从 pending → fulfilled 或 pending → rejected，一旦确定，就不能改了。

3. Promise 的方法

• then(成功回调, 失败回调)

  • 相当于：餐到了就执行“吃饭”动作，失败就执行“投诉”动作。

• catch(失败回调)

  • 专门用来处理失败，就像专门接“投诉电话”。

• finally(无论成功失败都执行)

  • 无论餐到了还是没到，都执行，比如“洗手”这种收尾动作。

4. Promise 的好处

• 避免回调地狱（嵌套太多 callback）。
• 让异步流程像“排队办事”一样清晰可读。
• 可以链式调用，一个接一个处理。

5. 简单例子

<template>
  <div>
    <h2>外卖订单测试</h2>
    <button @click="order">点外卖</button>
    <p v-if="message">{{ message }}</p>
  </div>
</template>

<script setup>
import { ref } from "vue";

const message = ref("");

// 模拟外卖订单（Promise）
function order() {
  message.value = "正在下单，请稍候...";

  let orderFood = new Promise((resolve, reject) => {
    setTimeout(() => {
      let success = Math.random() > 0.5; // 随机成功或失败
      if (success) resolve("外卖已送达 🍔");
      else reject("外卖没送到 🚫");
    }, 2000);
  });

  orderFood
    .then(msg => {
      message.value = msg; // 成功
    })
    .catch(err => {
      message.value = err; // 失败
    })
    .finally(() => {
      console.log("洗手准备吃饭 🧼");
    });
}
</script>