当前位置：首页 > news >正文

前端 Promise 全面深入解析

news 2025/8/26 6:00:44

一、Promise基础概念

1、什么是Promise？
Promise是一个表示异步操作最终完成或失败的对象。它允许你为异步操作的成功结果和失败原因分别绑定相应的处理方法。
2、Promise的三种状态
请添加图片描述

pending（等待中）： 初始状态，既不是成功，也不是失败
fulfilled（已成功）： 操作成功完成
rejected（已拒绝）： 操作失败

状态一旦改变就不可逆：pending → fulfilled 或 pending → rejected

3、创建Promise

const myPromise = new Promise((resolve, reject) => {// 异步操作setTimeout(() => {const success = Math.random() > 0.3;if(success) {resolve("操作成功！");  // 将状态改为 fulfilled} else {rejected("操作失败！");  // 将状态改为 rejected}}, 1000);
});

二、Promise的基本使用

1、处理Promise结果

myPromise.then(result => {console.log("成功", result);}).catch(error => {console.log("失败",  error);	}).finally(() => {console.log("无论成功还是失败都会执行");});

2、Promise链式调用

function asyncOperation(value) {return new Promise((resolve, reject) => {setTimeout(() => {if (value > 0.5) {resolve(value * 100);} else {reject("值太小");}}, 1000);});
}asyncOperation(0.8).then(result => {console.log("第一步结果:", result);return asyncOperation(result / 200); // 返回新 Promise}).then(result => {console.log("第二步结果:", result);return "最终结果: " + result; // 返回普通值}).then(result => {console.log(result);}).catch(error => {console.error("链中任何一步出错:", error);});

三、Promise的静态方法

1、Promise.all()
等待所有Promise完成，或任何一个Promise失败

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve) => setTimeout(resolve, 100, 'foo'));
const promise3 = fetch('https://api.example.com/data');Promise.all([promise1, promise2, promise3]).then(values => {console.log(values);  // [3, 'foo', Response]}).catch(error => {console.error('有一个Promise失败：', error);	})

2、Promise.race()
返回最先完成或拒绝的Promise的结果

const timeoutPromise = new Promise((_, reject) => setTimeout(() => reject('超时'), 5000)
);const fetchPromise = fetch('https://api.example.com/slow-data');Promise.race([fetchPromise, timeoutPromise]).then(response => {console.log('数据获取成功');	}).catch(error => {console.error('请求超时或失败：', error);});

3、Promise.allSettled()
等待所有Promise完成（无论成功或失败）

const promises = [Promise.resolve('成功'),Promise.reject('失败'),Promise.resolve('另一个成功')
];Promise.allSettled(promises).then(results => {results.forEach((result, index) => {if (result.status === 'fulfilled') {console.log(`Promise