Promise是什么？
英 /'prɒmɪs/ 承诺
在 Vue 3.0 中，Promise 是一种用于处理异步操作的强大机制。
Promise（承诺） 是 JavaScript 中处理异步操作的一种方式。你可以把它想象成一个"未来会完成的任务"，比如：
-
从服务器获取数据（
fetch或axios请求） -
延迟一段时间后执行某个操作
-
读取文件、上传图片等耗时操作
🧠 类比理解：
想象你去麦当劳点餐，点完后服务员给你一张小票（这就是 Promise）。 这张小票不代表汉堡已经做好了 ，但它承诺：
如果厨房顺利做完 → 你会拿到汉堡（✅ 成功）
如果牛肉卖完了 → 你会收到通知（❌ 失败）
Promise 就是这个"小票"------它代表一个尚未完成但将来会完成的操作。
Promise基本用法
const myPromise = new Promise((resolve, reject) => {
// 异步操作，比如请求数据
if (成功) {
resolve(返回的数据); // 成功时调用 resolve
} else {
reject(错误信息); // 失败时调用 reject
}
});
// 使用 .then() 处理成功，.catch() 处理失败
myPromise.then(data => console.log('成功:', data))
.catch(err => console.error('失败:', err));这里的 resolve 和 reject 是两个函数参数，由 Promise 内部提供：
-
调用
resolve(value)→ Promise 变成 fulfilled 状态，值为value -
调用
reject(reason)→ Promise 变成 rejected 状态，原因为reason
创建 Promise 实例
通过 new Promise(executor)构造函数创建，其中 executor是一个同步函数，接收两个参数：
-
resolve(value)：当异步操作成功时调用，将 Promise状态转为 Fulfilled，并传递结果 value。
-
reject(reason)：当异步操作失败时调用，将 Promise状态转为 Rejected，并传递错误原因 reason。
// 模拟异步读取文件（假设用 setTimeout 模拟延迟）
function readFileAsync(filename) {
return new Promise((resolve, reject) => {
setTimeout(() => {
const success = Math.random() > 0.3; // 70% 成功概率
if (success) {
resolve(`文件 ${filename} 内容：Hello, Promise！`);
} else {
reject(new Error(`读取文件 ${filename} 失败：随机错误`));
}
}, 1000); // 延迟 1 秒模拟异步
});
}
//调用
readFileAsync("test.txt").then(data => {
console.log(data);
}).catch(err => {
console.log(err);
})Promise 静态方法
Promise提供了多个静态方法，用于处理多个 Promise实例的组合或特殊场景。
1.Promise.resolve(value)
-
作用 ：快速创建一个已成功的
Promise，值为value（若value本身是Promise，则直接返回它）。 -
场景 ：将同步值包装为
Promise，或简化已知的成功Promise。
示例：
const p1 = Promise.resolve(42); // 直接创建成功的 Promise，值为 42
const p2 = Promise.resolve(fetch("https://api.example.com")); // 若 fetch 返回 Promise，p2 等价于它2.Promise.reject(reason)
- 作用 ：快速创建一个已失败的
Promise，原因为reason。
3.Promise.all(iterable)
-
作用 ：并行执行多个
Promise，等待所有成功时返回结果数组；若有任意一个失败，立即返回该错误。 -
场景：需要多个独立异步操作全部完成后执行下一步（如同时请求多个接口）。
示例：
const p1 = readFileAsync("a.txt");
const p2 = readFileAsync("b.txt");
const p3 = Promise.resolve("固定值");
Promise.all([p1, p2, p3])
.then(results => {
// results 是 [p1结果, p2结果, p3结果]（顺序与 iterable 一致）
console.log("所有文件读取成功：", results);
})
.catch(error => {
console.error("至少一个文件读取失败：", error);
});Promise 与 async/await
async/await是基于 Promise的语法糖，使异步代码看起来像同步代码。理解 Promise是掌握 async/await的基础：
示例：用 async/await 重写之前的链式调用
<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
const user = ref(null);
const loading = ref(true);
onMounted(async () => {
try {
// axios.get 返回一个 Promise
const response = await axios.get('/api/user/123');
user.value = response.data;
} catch (error) {
console.error('获取用户失败:', error);
} finally {
loading.value = false;
}
});
</script>比较使用 then...catch
<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
const user = ref(null);
const loading = ref(true);
onMounted(
// axios.get 返回一个 Promise
axios.get('/api/user/123').then(res => {
user.value = res.data;
}).catch(err => {
console.error('获取用户失败:', error);
}).finally{
loading.value = false;
}
);
</script>Promise 的三种状态
| 状态 | 含义 |
|---|---|
| pending | 初始状态，既没成功也没失败 |
| fulfilled | 操作成功完成（调用了 resolve） |
| rejected | 操作失败（调用了 reject） |
⚠️ 一旦状态改变（pending → fulfilled/rejected），就不可逆。