网站广告文案,手机商城和实体的价格一样吗,wordpress 淘宝客api,郑州企业网站排名优化Promise 是 JavaScript 异步编程的标准化解决方案#xff0c;用于处理非阻塞操作#xff08;如网络请求、文件读写#xff09;。它解决了传统回调地狱问题#xff0c;提供了更优雅的异步控制流。
阻塞操作#xff1a; 阻塞操作:会阻止主线程继续执行的代码#xff0c;直…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;
}
