Promise 原理、用法与在 Vue 中的最佳实践

文章目录

一、为什么需要 Promise?
二、 Promise 的核心原理
三、Promise 的6种高级用法
四、何时使用 Promise?
五、在 Vue 中如何正确使用 Promise?
六、常见错误与解决方案
七、总结： Promise 的最佳实践

一、为什么需要 Promise?

假设你点了一份外卖，传统回调函数的方式相当于：

点外卖(()=>{等外卖送到后(()=>{吃完后收拾桌子(()=>{// 回调地狱！代码嵌套越来越深})})
})

问题： 代码嵌套层级多（回调地狱），错误处理困难，逻辑难以维护
Promise 的解决思路：

点外卖().then(等外卖送到).then(吃完后收拾桌子).then(处理错误);

代码变为链式结构，逻辑清晰，支持统一错误处理

二、 Promise 的核心原理

1.三种状态

Pending (等待中)：初始状态，既未完成也未拒绝。
Fulfilled (已成功)：操作成功完成。
Rejected (已拒绝)：操作失败。

状态特点：

不可逆： 一旦从 Pending 变成 Fulfilled 或者 Rejected，状态不再改变
不可取消： 无法中途取消一个 Promise

2.创建 Promise

const promise = new Promise((resolve, reject) => {// 异步操作（如请求接口、定时器等）if(成功){resolve('成功的结果')} else {reject('失败的原因')}
})

3.核心方法

方法	作用
.then()	处理成功状态，接收 resolve 的结果
.catch()	处理失败状态，接收 reject 的原因
.finally()	无论成功或失败，最后执行的操作

三、Promise 的6种高级用法

1.链式调用

fetchData().then(处理数据).then(保存到数据库).catch(处理错误)；

关键点： 每一个 .then 返回一个新的 Promise

2.错误穿透

fetchData().then(处理数据).then(保存到数据库).catch(错误 => {// 捕获链中任意一个环节的错误})；

3.静态方法

1.Promise.all([p1, p2, p3]): 全部成功时返回结果数组，任意一个失败立即终止
Promise.all([请求1, 请求2, 请求3]).then(([结果1, 结果2, 结果3]) => {} )2.Promise.race([p1, p2]): 取最先完成的 Promise (无论成功或失败)
// 超时控制：如果请求超过3秒，自动取消
Promise.race([fetchData(), timeout(3000)]);3.Promise.allSettled([p1, p2]): 等待所有 Promise 完成（无论成功或失败），返回状态和结果
Promise.allSettled([请求1, 请求2]).then(results => {results.forEach(result => {if(result.status === 'fulfilled'){console.log(result.value);} else {console.log(result.reason);}})})

4.async/await 结合

async function loadData() {try {const data1 = await fetchData1();const data2 = await fetchData2(data1);return data2;} catch (error) {console.error('加载失败', error)}
}

注意： await 只能在 async 函数中使用

四、何时使用 Promise?

适用场景

网络请求：如 AJAX、Fetch API、Axios
定时任务：setTimeout 封装为 Promise
文件读写：Node.js 中 fs.promises
多个异步任务顺序执行：如先登录，再获取用户信息

不适用场景

简单同步操作：如计算1+1，无需 Promise
需要取消的异步任务：需使用 AbortController 或其他方案

五、在 Vue 中如何正确使用 Promise?

1.数据请求（Axios 示例）

<script>
export default {data() {return {posts: [],loading: false,error: null};},methods: {async fetchPosts() {this.loading = true;try {const response = await axios.get('/api/posts');this.posts = response.data;} catch (error) {this.error = error.message;} finally {this.loading = false;}}},mounted() {this.fetchPosts();}
};
</script>

2.处理用户交互

<template><button @click="handleSubmit" :disabled="isSubmitting">{{ isSubmitting ? '提交中...' : '提交' }}</button>
</template><script>
export default {data() {return {isSubmitting: false};},methods: {async handleSubmit() {if (this.isSubmitting) return;this.isSubmitting = true;try {await submitForm();this.$toast.success('提交成功！');} catch (error) {this.$toast.error('提交失败: ' + error.message);} finally {this.isSubmitting = false;}}}
};
</script>

3.Vue3 Composition API

<script setup>
import { ref } from 'vue';
import axios from 'axios';const data = ref(null);
const loading = ref(false);
const error = ref(null);const fetchData = async () => {loading.value = true;try {const response = await axios.get('/api/data');data.value = response.data;} catch (err) {error.value = err.message;} finally {loading.value = false;}
};// 生命周期中调用
onMounted(() => {fetchData();
});
</script>

六、常见错误与解决方案

1.未处理拒绝的 Promise

// 错误写法：未捕获错误可能导致程序奔溃
fetchData().then(handleSuccess);// 正确写法：始终添加 .catch
fetchData().then(handleSuccess).catch(handleError);

2.在循环中错误使用 await

// 错误：顺序执行，耗时增加
for(const url of urls){await fetch(url);
}// 正确：并行执行
const promises = urls.map(url => fetch(url))
const results = await Promise.all(promises)

3.忘记返回 Promise

// 错误：第二个 .then() 接收不到数据
fetchData().then(data => {processData(data); // 未返回}).then(result => {// result 是 undefined});// 正确：返回处理后的值
fetchData().then(data => {return processData(data);}).then(result => {// 正确接收处理后的数据});