网站导航
> 技术文档 > 深度分析Javascript中的Promise_promise javascript

深度分析Javascript中的Promise_promise javascript

网友: 技术文档 2025-08-15 13:26:14

你提到的这段代码：

new Promise((resolve, reject) => { console.log(3); resolve(1000); console.log(4);});

我将分成你要求的 2 大部分详细解释：Promise 是什么？参数和语法又是什么？

🧩 一、Promise 是什么？

✅ Promise 是 JavaScript 用来处理 异步操作 的对象。

它可以表示一个 当前还未完成、但将来会完成 的任务，避免了回调地狱（callback hell）。

它有三种状态：

  1. pending：初始状态，未完成

  2. fulfilled：任务成功完成（调用了 resolve）

  3. rejected：任务失败（调用了 reject）

🧪 二、代码行为详解

new Promise((resolve, reject) => { console.log(3);  // 👉 同步执行，立即输出 resolve(1000); // 👉 将状态改为 fulfilled（成功） console.log(4);  // 👉 同步执行，继续输出});

这段代码的执行顺序为：

34

⚠️ 注意：resolve(1000) 不会立刻打印出 1000，因为它是要搭配 .then() 来获取值的。

例如：

new Promise((resolve, reject) => { console.log(3); resolve(1000); console.log(4);}).then(value => { console.log(\'结果是：\', value);});

输出：

34结果是： 1000

🔧 三、构造函数参数解释（重点）

new Promise((resolve, reject) => { // 执行器 executor 函数});

这个传进去的函数叫做 执行器函数（executor function），它会在 new Promise(...) 这一刻 立刻被执行。

参数说明：

  • resolve(value)：表示任务成功，传给 .then() 的回调。

  • reject(error)：表示任务失败，传给 .catch() 的回调。

🔤 四、语法深度分析

1. (resolve, reject) => { ... } 是什么？

这是一个箭头函数（arrow function），是 ES6 中的新语法。

等价于：

function(resolve, reject) { // ...}

所以你问的：

“形参里的方法是什么意思，是函数声明吗？”

答：它是一个函数表达式，不是函数声明，属于函数表达式的语法形式。

2. 属于语法的什么部分？

  • 整个 new Promise(...) 是在调用构造函数（Promise 构造器）。

  • 构造器中传入的是一个函数表达式。

  • resolve 和 reject 是该函数的参数（由 Promise 引擎提供）。

🌱 五、扩展语法知识

✅ 几种函数写法对比

// 传统函数声明function add(a, b) { return a + b;}// 函数表达式const add = function(a, b) { return a + b;};// 箭头函数const add = (a, b) => a + b;

想学习更多的箭头函数的方法可以看我的博客。 

关于Javascript ES6箭头函数用法的分析，函数声明的几个方式-CSDN博客

✅ Promise 常见用法

new Promise((resolve, reject) => { setTimeout(() => { resolve(\"ok\"); }, 1000);}).then(result => { console.log(result); // \"ok\"}).catch(error => { console.error(error);});

✅ 总结回顾

项目 内容说明 Promise 异步操作的封装对象，有状态转换 resolve/reject 控制状态变为成功或失败 new Promise(...) 构造器立即执行传入的函数 (resolve, reject) => {...} 箭头函数语法，是一个函数表达式

如果你想深入学习 .then() 链式调用、错误处理 .catch()、并发控制（如 Promise.all, Promise.race）等内容，我也可以帮你继续拓展。是否需要？

二、系统深入学习 Promise 的高级用法

下面我们来系统深入学习 Promise 的高级用法，涵盖：

  1. .then() 链式调用

  2. .catch() 错误处理

  3. 并发控制：Promise.all()、Promise.race()、Promise.allSettled()、Promise.any()

  4. 每个部分都附带【详细解释 + 案例 + 注释】

✅ 1. .then() 链式调用

🌟 基本语法

doSomething() .then(result => doNext(result)) .then(nextResult => doFinal(nextResult)) .then(finalResult => { console.log(\'最终结果:\', finalResult); });

✅ 原理：每个 .then() 都会返回一个新的 Promise。

📦 示例：处理异步步骤流程

function step1() { return new Promise(resolve => { setTimeout(() => resolve(\'🟢 Step 1 done\'), 500); });}function step2(prev) { return new Promise(resolve => { setTimeout(() => resolve(`${prev} → 🟡 Step 2 done`), 500); });}function step3(prev) { return new Promise(resolve => { setTimeout(() => resolve(`${prev} → 🔵 Step 3 done`), 500); });}step1() .then(res => step2(res)) // 把结果传入 step2 .then(res => step3(res)) // 把结果传入 step3 .then(res => console.log(\'✅ 结果:\', res));

🟨 输出（延迟后）：

✅ 结果: 🟢 Step 1 done → 🟡 Step 2 done → 🔵 Step 3 done

❗ 2. .catch() 错误处理

📌 用于捕获前面 .then() 中的错误

doSomething() .then(res => { throw new Error(\"出错啦！\"); }) .catch(err => { console.error(\"捕获错误：\", err.message); });

📦 示例：模拟网络失败

function fetchData() { return new Promise((resolve, reject) => { setTimeout(() => { reject(new Error(\'❌ 网络请求失败\')); }, 300); });}fetchData() .then(res => console.log(\'✅ 请求成功:\', res)) .catch(err => console.error(\'❗ 捕获错误:\', err.message));

🧵 3. 并发控制方法

🔸 3.1 Promise.all()

  • ✅ 等所有 Promise 都成功后，才进入 .then()

  • ❌ 有一个失败，就立即进入 .catch()

const p1 = Promise.resolve(1);const p2 = Promise.resolve(2);const p3 = Promise.resolve(3);Promise.all([p1, p2, p3]) .then(results => { console.log(\'✅ 所有完成:\', results); // [1, 2, 3] }) .catch(err => { console.error(\'❌ 某个失败:\', err); });

🔸 3.2 Promise.race()

  • ✅ 谁先完成/失败，就返回谁

  • 适用于：超时控制

const slow = new Promise(resolve => setTimeout(() => resolve(\'🐢 慢响应\'), 2000));const fast = new Promise(resolve => setTimeout(() => resolve(\'🐇 快响应\'), 500));Promise.race([slow, fast]) .then(result => { console.log(\'⚡ 先返回的:\', result); // 🐇 快响应 });

🔸 3.3 Promise.allSettled()

  • 💡 等所有 Promise 都完成（无论成功或失败），返回每个状态和结果。

const p1 = Promise.resolve(\'✔ 成功1\');const p2 = Promise.reject(\'✖ 失败2\');const p3 = Promise.resolve(\'✔ 成功3\');Promise.allSettled([p1, p2, p3]) .then(results => { results.forEach((res, i) => { console.log(`任务 ${i + 1}:`, res.status, res.value || res.reason); }); });

输出：

任务 1: fulfilled ✔ 成功1任务 2: rejected ✖ 失败2任务 3: fulfilled ✔ 成功3

🔸 3.4 Promise.any()

  • ✅ 返回第一个成功的值

  • ❌ 如果都失败，则报错 AggregateError

const p1 = Promise.reject(\'失败1\');const p2 = Promise.reject(\'失败2\');const p3 = Promise.resolve(\'成功3\');Promise.any([p1, p2, p3]) .then(result => { console.log(\'✅ 首个成功:\', result); // 成功3 }) .catch(err => { console.error(\'全部失败:\', err); });

📌 技巧拓展：模拟请求 + 超时处理

function fakeFetch(url, delay) { return new Promise(resolve => { setTimeout(() => resolve(`✅ 响应自 ${url}`), delay); });}const request = fakeFetch(\'/api/data\', 2000);const timeout = new Promise((_, reject) => setTimeout(() => reject(new Error(\'⏱ 请求超时\')), 1000));Promise.race([request, timeout]) .then(res => console.log(res)) .catch(err => console.error(err.message));

输出：

⏱ 请求超时

✅ 总结对照表

方法 等待全部？ 返回什么？ 失败会怎样？ Promise.all 是 所有结果 任一失败就失败 Promise.race 否 最快那个的结果 最快失败就失败 Promise.allSettled 是 所有状态和结果 不会失败 Promise.any 否 第一个成功的值 全失败时才报错

如果你需要我帮你出一些练习题、面试题，或者你想手写模拟一个 Promise.all 的实现，我也可以继续带你深入。是否继续？

网络标签：

相关问题