《前端面试题：Promise指南》

于 2025-06-07 11:54:23 发布
阅读量922 收藏 6
点赞数 33
CC 4.0 BY-SA版权
分类专栏： 前端面试题集合(JavaScript) 文章标签： 前端 javascript
jyy
本文链接：https://blog.csdn.net/qq_53353440/article/details/148493298

JavaScript Promise 指南：从基础到高级实践

一、Promise 基础概念

1. 什么是 Promise？

Promise 是 JavaScript 中处理异步操作的标准化解决方案，它代表一个尚未完成但预期将来会完成的操作。Promise 对象有三种状态：

  1. pending（待定）：初始状态，既不是成功也不是失败
  2. fulfilled（已兑现）：操作成功完成
  3. rejected（已拒绝）：操作失败
// Promise 基本结构
const myPromise = new Promise((resolve, reject) => {
  // 异步操作
  if (/* 操作成功 */) {
    resolve(value); // 状态变为 fulfilled
  } else {
    reject(error); // 状态变为 rejected
  }
});

2. Promise 的特点

  • 不可逆性：状态一旦改变（从 pending 到 fulfilled 或 rejected），就不能再变
  • 链式调用：通过 .then() 和 .catch() 实现链式调用
  • 值穿透：如果 then 中不传函数，值会穿透到后面的 then
  • 错误冒泡：错误会一直向后传递，直到被捕获

二、Promise 核心方法

1. 实例方法

.then(onFulfilled, onRejected)
fetchData()
  .then(
    data => console.log('成功:', data),  // 成功回调
    error => console.error('失败:', error) // 失败回调（可选）
  );
.catch(onRejected)
fetchData()
  .then(data => processData(data))
  .catch(error => console.error('捕获错误:', error));
.finally(onFinally)
showLoading();
fetchData()
  .then(data => render(data))
  .catch(error => showError(error))
  .finally(() => hideLoading()); // 无论成功失败都会执行

2. 静态方法

Promise.resolve(value)
// 创建一个立即 resolve 的 Promise
Promise.resolve('立即值')
  .then(value => console.log(value)); // "立即值"
Promise.reject(reason)
// 创建一个立即 reject 的 Promise
Promise.reject(new Error('失败'))
  .catch(err => console.error(err)); // Error: 失败
Promise.all(iterable)
// 等待所有 Promise 完成（全部成功才算成功）
Promise.all([promise1, promise2, promise3])
  .then(values => console.log(values)) // [val1, val2, val3]
  .catch(error => console.error(error)); // 任一失败立即 reject
Promise.race(iterable)
// 竞速，第一个 settled 的 Promise 决定结果
Promise.race([promise1, promise2])
  .then(value => console.log('第一个完成:', value))
  .catch(error => console.error('第一个失败:', error));
Promise.allSettled(iterable) (ES2020)
// 等待所有 Promise 完成，不论成功失败
Promise.allSettled([promise1, promise2])
  .then(results => {
    results.forEach(result => {
      if (result.status === 'fulfilled') {
        console.log('成功:', result.value);
      } else {
        console.error('失败:', result.reason);
      }
    });
  });

三、Promise 高级应用

1. Promise 链式调用

login(user)
  .then(token => getUserInfo(token))
  .then(userInfo => getOrders(userInfo.id))
  .then(orders => renderOrders(orders))
  .catch(error => showError(error));

2. Promise 错误处理

// 方式1：每个 then 都处理错误
fetchData()
  .then(
    data => process(data),
    error => handleError(error)
  );

// 方式2：统一 catch 处理
fetchData()
  .then(data => process(data))
  .then(moreData => processMore(moreData))
  .catch(error => handleError(error));

3. Promise 与 async/await

async function fetchUserData() {
  try {
    const token = await login(user);
    const userInfo = await getUserInfo(token);
    const orders = await getOrders(userInfo.id);
    return renderOrders(orders);
  } catch (error) {
    showError(error);
    throw error; // 可以选择继续抛出
  }
}

4. 实现 Promise 超时控制

function fetchWithTimeout(url, timeout = 5000) {
  return Promise.race([
    fetch(url),
    new Promise((_, reject) => 
      setTimeout(() => reject(new Error('请求超时')), timeout)
    )
  ]);
}

四、Promise 常见面试题

1. 实现一个简单的 Promise

class MyPromise {
  constructor(executor) {
    this.state = 'pending';
    this.value = undefined;
    this.reason = undefined;
    this.onFulfilledCallbacks = [];
    this.onRejectedCallbacks = [];

    const resolve = value => {
      if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
        this.onFulfilledCallbacks.forEach(fn => fn());
      }
    };

    const reject = reason => {
      if (this.state === 'pending') {
        this.state = 'rejected';
        this.reason = reason;
        this.onRejectedCallbacks.forEach(fn => fn());
      }
    };

    try {
      executor(resolve, reject);
    } catch (err) {
      reject(err);
    }
  }

  then(onFulfilled, onRejected) {
    const promise2 = new MyPromise((resolve, reject) => {
      if (this.state === 'fulfilled') {
        setTimeout(() => {
          try {
            const x = onFulfilled(this.value);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      }

      if (this.state === 'rejected') {
        setTimeout(() => {
          try {
            const x = onRejected(this.reason);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      }

      if (this.state === 'pending') {
        this.onFulfilledCallbacks.push(() => {
          setTimeout(() => {
            try {
              const x = onFulfilled(this.value);
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          }, 0);
        });

        this.onRejectedCallbacks.push(() => {
          setTimeout(() => {
            try {
              const x = onRejected(this.reason);
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          }, 0);
        });
      }
    });

    return promise2;
  }
}

function resolvePromise(promise2, x, resolve, reject) {
  // 实现 Promise 解决过程
  if (promise2 === x) {
    return reject(new TypeError('Chaining cycle detected'));
  }
  
  if (x instanceof MyPromise) {
    x.then(resolve, reject);
  } else {
    resolve(x);
  }
}

2. Promise.all 的实现

Promise.myAll = function(promises) {
  return new Promise((resolve, reject) => {
    const results = [];
    let completed = 0;
    
    if (promises.length === 0) {
      resolve(results);
      return;
    }

    promises.forEach((promise, index) => {
      Promise.resolve(promise)
        .then(value => {
          results[index] = value;
          completed++;
          if (completed === promises.length) {
            resolve(results);
          }
        })
        .catch(reject);
    });
  });
};

3. 如何取消一个 Promise？

JavaScript 原生 Promise 无法直接取消，但可以通过以下模式实现：

function cancellablePromise(executor) {
  let rejectFn;
  
  const promise = new Promise((resolve, reject) => {
    rejectFn = reject;
    executor(resolve, reject);
  });
  
  promise.cancel = () => {
    rejectFn(new Error('Promise cancelled'));
  };
  
  return promise;
}

// 使用示例
const cp = cancellablePromise((resolve, reject) => {
  setTimeout(() => resolve('Done'), 2000);
});

cp.then(console.log).catch(console.error);
cp.cancel(); // 取消 Promise

4. 解释 Promise 链中的值穿透

Promise.resolve('foo')
  .then(Promise.resolve('bar')) // 这里传入的不是函数！
  .then(value => console.log(value)); // 输出什么？

答案：输出 'foo'。因为 .then() 期望接收函数作为参数，如果传递的不是函数，Promise 会执行"值穿透"，直接将上一个 Promise 的值传递下去。

5. 实现一个 Promise 重试机制

function retry(fn, times, delay) {
  return new Promise((resolve, reject) => {
    const attempt = currentTimes => {
      fn()
        .then(resolve)
        .catch(error => {
          if (currentTimes <= 1) {
            reject(error);
          } else {
            setTimeout(() => attempt(currentTimes - 1), delay);
          }
        });
    };
    
    attempt(times);
  });
}

// 使用示例
retry(() => fetch('https://api.example.com'), 3, 1000)
  .then(console.log)
  .catch(console.error);

五、Promise 最佳实践

  1. 总是返回 Promise：在 then 回调中返回 Promise 或值，确保链式调用

    // 好的做法
fetchData()
  .then(data => process(data))
  .then(processed => save(processed));

// 不好的做法
fetchData()
  .then(data => {
    process(data); // 没有返回
  })
  .then(processed => { // processed 是 undefined
    save(processed);
  });

  2. 永远捕获错误：使用 .catch() 或 try/catch 处理错误

    // 方式1
fetchData()
  .then(process)
  .catch(handleError);

// 方式2 (async/await)
try {
  const data = await fetchData();
  const result = await process(data);
} catch (error) {
  handleError(error);
}

  3. 避免 Promise 嵌套：使用链式调用而非嵌套

    // 好的做法
fetchData()
  .then(process)
  .then(save)
  .then(log);

// 不好的做法
fetchData().then(data => {
  process(data).then(processed => {
    save(processed).then(() => {
      log();
    });
  });
});

  4. 合理使用 Promise 静态方法：

    • Promise.all：并行执行多个独立操作
    • Promise.race：超时控制或竞速场景
    • Promise.allSettled：需要知道所有操作结果时

  5. 避免同步代码中的 Promise：Promise 设计用于处理异步操作

六、Promise 与事件循环

Promise 的回调作为**微任务（microtask）执行，优先级高于宏任务（macrotask）**如 setTimeout：

console.log('Script start');

setTimeout(() => console.log('setTimeout'), 0);

Promise.resolve()
  .then(() => console.log('Promise 1'))
  .then(() => console.log('Promise 2'));

console.log('Script end');

// 输出顺序:
// Script start
// Script end
// Promise 1
// Promise 2
// setTimeout

七、Promise 的现代替代方案

虽然 Promise 是处理异步操作的基础，但现代 JavaScript 提供了更高级的抽象：

1. async/await

async function getUserData(userId) {
  try {
    const user = await fetchUser(userId);
    const posts = await fetchPosts(user.id);
    return { user, posts };
  } catch (error) {
    console.error('Failed to load data:', error);
    throw error;
  }
}

2. Observable (RxJS)

import { from } from 'rxjs';

from(fetch('https://api.example.com/data'))
  .pipe(
    map(response => response.json()),
    retry(3),
    catchError(error => of({ error: true }))
  )
  .subscribe(data => console.log(data));

总结：Promise 核心要点

  1. 状态不可逆：pending → fulfilled 或 pending → rejected
  2. 链式调用：.then() 返回新 Promise，支持链式操作
  3. 错误冒泡：错误会一直向后传递，直到被 .catch() 捕获
  4. 微任务队列：Promise 回调在微任务队列执行，优先级高于宏任务
  5. 现代异步基础：async/await 基于 Promise 实现

掌握 Promise 的重要性：
Promise 是现代 JavaScript 异步编程的基石，理解 Promise 的工作原理和使用模式，是成为高级 JavaScript 开发者的必备技能。通过合理运用 Promise 链、错误处理和组合方法，可以构建出健壮、可维护的异步代码。

前端性能优化高频面试题解析与实战指南（2025版）
weimengen的博客
04-09 1605
前端性能优化是一个系统性工程，需从「网络加载→渲染执行→用户体验」全链路分析。面试中不仅要掌握具体技术点，更要理解背后的原理（如浏览器渲染机制、网络协议特性），并能结合实际项目阐述优化成果。记住：性能优化没有银弹，需根据项目特点选择合适的策略，平衡开发成本与收益。建议在面试前梳理个人项目中的优化经历，用具体数据（如加载时间减少X%、内存泄漏修复案例）证明技术能力，同时关注行业前沿动态（如HTTP/3、WebAssembly），展现持续学习的热情。
前端面试题：对promise的理解
qq_46582421的博客
01-06 2292
优点：可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。 缺点： 无法取消Promise，一旦新建它就会立即执行，无法中途取消。 如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。 当处于Pending状态时，无法得知目前进展到哪一个阶段。 promise内部有三种状态，pedding，fulfilled，rejected： pedding表示程序正在执行但未得到结果，即异步操作没有执行完毕。 fulfi
前端 | 深入理解Promise
2502_90366796的博客
02-01 2131
JavaScript 作为单线程语言，利用回调函数处理异步操作，但回调地狱使得代码难以维护。ES6 引入 Promise 解决异步编程问题，使异步操作更清晰。Promise 具有 pending、resolved 和 rejected 三种状态，并且状态一旦改变就不可逆。Promise 提供 then、catch、all、race 等方法，其中 async/await 进一步简化了异步操作，使代码更清晰、易读，同时支持 try/catch 捕获错误。此外，文中还介绍了 Promise 及其方法的手写实现，帮
面试题：Promise用法及理解
q879936814的博客
08-18 495
es6之前，我们处理异步函数非常麻烦，需要自己定义回调函数让使用者传入，才可以进行正常的回调；但是这样做没有一个固定的格式，那么不同开发者开发的方法，需要传入的回调函数顺序，格式也各不相同，对于需要使用其他框架的开发者来说非常痛苦，学习成本很高；而且ajax很容易出现回调地狱，es6推出了Promise类，就是为了解决这一现象的。...
ES6中的Promise对象
weixin_34008805的博客
07-17 234
什么是Promise对象？ Promise是异步编程的一种解决方案，比起传统的解决方案（回调函数和事件），它显得更加的强大和方便（具体请看下文）。从语法上来讲，Promise是一个对象，从它可以获取异步操作的消息。Promise对象提供统一的API，各种异步操作都可以用同样的方法进行处理。 Promise有什么用？ 大家一致会回答，解决回调地狱。那什么又是回调地狱？它有什么缺点？ 如果要执行四个步...
Promise
weixin_44932552的博客
07-24 471
一、定义： 所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。 Promise对象有以下两个特点。 （1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态. 2）一旦状态改变，就不会再变，任何时候都可以得到这
Vue前端面试指南：高频面试题与算法解析
"Vue初级前端1-2年常见面试题，包括浏览器相关、HTML、CSS、JavaScript+TypeScript、Vue2+3、Webpack、Nginx、React等内容，旨在帮助面试者准备Vue方向的初级前端职位。文档提供高频、中频、低频面试题和算法题，...
前端开发基于200道高频面试题的JavaScript核心技术解析：互联网大厂面试指南了互联网大厂
最新发布
04-09
内容概要：本文档《互联网大厂200道高频Javascript面试题.pdf》涵盖了广泛的JavaScript知识点，针对200道高频面试题进行了详细解析。内容涉及JavaScript的核心概念（如闭包、原型链、事件循环）、异步编程（如...
2021年最新前端面试题.rar
04-11
这份名为"2021年最新前端面试题.rar"的压缩包文件，旨在为应聘者提供详尽的面试指南，帮助他们克服面试中的难题。资源涵盖了前端领域的多种关键知识点，确保你能对大前端开发有全面深入的理解。 首先，让我们探讨...
前端面试题 — — vue篇_前端vue面试题
2401_84434237的博客
07-12 368
,watch: {},submit(){父组件//Vue2count: 0get() {},})//Vue3count: 0})阻止单击事件继续传播提交事件不再重载页面修饰符可以串联只有修饰符添加事件监听器时使用事件捕获模式即内部元素触发的事件先在此处理，然后才交由内部元素进行处理只当在 event.target 是当前元素自身时触发处理函数即事件不是从内部元素触发的点击事件将只会触发一次。
Promise入门/面试必看
Twinkle_sone的博客
06-13 589
Promise入门/面试必看 一、理解 1、抽象表达 是JS中进行异步编程的新的解决方案（旧->纯回调函数） 2、具体表达 （1）语法上：Promise是一个构造函数 （2）功能上：Promise对象用来封装一个异步操作并可以获取其结果 二、状态的改变 1、pending（未确定）-> resolved（成功） (1)resolve(value) 2、pending（未确定） -> rejected（失败） (1)reject(reason) (2)throw new Error(erro
前端面试 | 必知必会的10道Promise题
IT_studied的博客
05-13 2147
Promise 想必大家都十分熟悉，想想就那么几个 api，可是你真的了解 Promise 吗？本文根据 Promise 的一些知识点总结了十道题，看看你能做对几道。 以下 promise 均指代 Promise 实例，环境是 Node.js。 题目一 constpromise=newPromise((resolve,reject)=>{ console.log(1) resolve() console.log(2) }) promise.then(()=&g...
前端面试重点--promise
2401_85123379的博客
06-20 710
前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档//添加 resolve 方法//返回promise对象resolve(v);})}else{//状态设置为成功});//添加 reject 方法});//添加 all 方法//返回结果为promise对象//声明变量//遍历i++){////得知对象的状态是成功//每个promise对象 都成功count++;
【前端面试】Promise面试题总结
weixin_44806635的博客
01-25 272
promise
前端基本功——面试必问系列（1）：都2024了，还没吃透Promise？一文搞懂
qq_45900435的博客
09-14 1378
该系列文章是为了帮助大家不管面试还是开发对前端的一些基本但是很重要的知识点认识更加深入和全面。想写这个系列文章的初衷是：我发现前端的很多基本知识。为什么用？怎么用会更好？原理是什么？很多人并不清楚
JS - Promise的各种面试问题及分析
kelly0721的博客
10-19 1224
Promise的各种面试问题及分析
常见 Promise 面试问题
weixin_38300263的博客
11-23 3628
前端面试过程中，基本都会问到 Promise，如果你足够幸运，面试官问的比较浅，仅仅问 Promise 的使用方式，那么恭喜你。事实上，大多数人并没有那么幸运。所以，我们要准备好九浅一深的知识。 常见的promise面试问题 我们看一些 Promise 的常见面试问法，由浅至深。 了解 Promise 吗？ Promise 解决的痛点是什么？ Promise 解决的痛点还有其他方法可以解决吗？如果有，请列举。 Promise 如何使用？ Promise 常用的方法有哪些？它们的作用是什么..
前端面试题浅答
qq_44428688的博客
12-05 1186
1.vue双向绑定的原理是什么？里面的关键点在哪里？vue2的双向绑定时通过object.defineProperty()去劫持各个属性的setter,getter，在数据变动时，发布消息给订阅者，触发相应的监听回调来渲染视图。直接定义一个新属性，或者修改一个现有属性，并返回此对象缺点：检测不到对象属性的添加和删除数组API方法无法监听到 数组的api方法在vue2里面进行了重写需要对每个属性进行遍历监听，如果嵌套对象，需要深层监听，造成性能问题vue3 es6新增的Proxy的监听是针对一个对象的，那么对
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

站在风口的猪1108

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值