西安网站工作室在线营销单页网站制作
Promise 是 JavaScript 异步编程的标准化解决方案，用于处理非阻塞操作（如网络请求、文件读写）。它解决了传统回调地狱问题，提供了更优雅的异步控制流。
阻塞操作：
阻塞操作:会阻止主线程继续执行的代码，直到该操作完成。由于 JavaScript 是单线程语言，当阻塞操作执行时，整个程序会"冻结"，无法响应其他事件或执行其他任务。
阻塞操作的特征：
同步执行：代码按顺序执行，必须等待当前操作完成
主线程占用：独占 JavaScript 主线程
事件循环暂停：阻止事件循环处理其他任务
UI 冻结：在浏览器中会导致页面无响应
常见阻塞操作：
- CPU 密集型计算
- 同步 I/O 操作：指 js执行线程必须等待操作完成才能继续执行的输入/输出任务
- 同步等待
阻塞操作的危害：
用户体验差：页面卡顿、无响应
性能瓶颈：无法充分利用多核CPU
资源浪费：主线程被占用，无法处理其他任务
潜在崩溃：长时间阻塞可能导致浏览器终止脚本执行
阻塞操作 vs 非阻塞操作：
特性
阻塞操作
非阻塞操作
执行方式
同步
异步
线程占用
独占主线程
不阻塞主线程
性能影响
导致UI冻结
保持UI响应
错误处理
try/catch
Promise.catch/回调
典型API
fs.readFileSync
fs.readFile
XMLHttpRequest (sync)
fetch/XMLHttpRequest (async)
alert/prompt
无直接替代
Promise状态机：Promise 是一个状态容器，包含三种不可逆状态
pending：初始状态，操作未完成（等待）
fulfilled：操作成功完成（履行）/fʊlˈfɪld/
rejected：操作失败（拒绝）
Promise 构造函数总是返回一个 Promise 对象，resolve/reject 传递的值决定 Promise 最终携带的值，.then() 和 .catch() 是处理异步操作的核心方法。
.then() 方法：处理成功状态，返回新 Promise，值传递与转换，处理异步操作
.catch() 方法：错误捕获，链式错误处理，返回恢复值
创建Promise
1.const fetchData = new Promise((resolve, reject) => {
// 异步操作（如 API 请求）
setTimeout(() => {
Math.random() > 0.5 ?
resolve("数据加载成功") :
reject(new Error("网络错误"));
}, 1000);
});2.validator: (rule, value) => {
return new Promise((resolve, reject) => {
if (!value) {
reject(new Error('请选择领域信息'))
return
}
resolve()
})
},
3.const upload = async (config) => new Promise((resolve, reject) => {
const uploadConfig = {
...config,
onError(errorMsg) {
reject(errorMsg);
},
onFinish(fileInfos) {
resolve(fileInfos);
},
onProgress() { return; },
};
const venusUploadInstance = createUpload(uploadConfig, 'venus');
venusUploadInstance.upload();
});
使用Promise
fetchData
.then(data => console.log(data)) // 成功处理
.catch(err => console.error(err)) // 错误捕获
.finally(() => console.log("清理资源")); // 必然执行
并行控制：
| 方法 | 作用 | 示例 |
|---|---|---|
Promise.all() | 全部成功才返回 | 表单多字段验证 |
Promise.any() | 任意成功即返回 | 多 CDN 资源竞速加载 |
Promise.allSettled() | 等待所有结束（无论成败） | 批量操作结果统计 |
async函数：在函数声明前添加 async 关键字，总是返回 Promise 对象，允许在函数内使用 await
async function fetchData() {return "数据"; // 自动包装为 Promise.resolve("数据")
}// 等效于：
function fetchData() {return Promise.resolve("数据");
}
await 表达式 ：只能在 async 函数内部使用，暂停 async 函数的执行，等待 Promise 解决，返回 Promise 的解决值
async function getUser() {const response = await fetch('/api/user'); // 等待fetch完成const user = await response.json(); // 等待JSON解析return user;
}