【面试题】Promise在异步操作中到底扮演什么角色？若将其理解为状态管理器，有哪些更丰富的应用场景？

森叶

已于 2025-03-28 18:51:45 修改

阅读量712

点赞数 26

分类专栏： Javascript 文章标签： javascript

于 2025-03-27 19:23:35 首次发布

本文链接：https://blog.youkuaiyun.com/wangsenling/article/details/146567704

版权

Javascript 专栏收录该内容

45 篇文章

订阅专栏

前言

很多同学都不理解Promise，Promise一度都是前端同学的摆设，基本都是封装一下Ajax请求就完了，其他的功能也就没用过了，这个面试题是一个启发式面试题，启发前端同学对知识有一种思考，真正理解知识，在理解的基础上，用起来。

如果你仅仅知道这玩意解决了回调地狱的问题，那就太小瞧了Promise重要性，它比你想象的更重要，更强大，更不可或缺。

举一个让你纠结的场景

大家都知道stable diffusion里面有很多按钮和参数，如果每个按钮都可能触发异步请求，但要保证异步返回的顺序，因为请求的顺序一旦打乱，生成的图片的就不同，当然stable diffusion并没有这么干，我只是是举个形象的例子，以反映Promise如何简单地解决这个问题。

如果没有Promise，你需要搞一个队列，还要给每个请求设定一个request_id，还要后端配合你要把request_id返回来等等，还要写个轮询来监听所有的返回结果，让他们按顺序排好，但是有了Promise就变得特别简单，如下（之前给的代码太粗糙，这里是通用代码）：

function asyncRequest(param) {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(`请求参数: ${param} 已完成`);
      resolve(`结果: ${param}`);
    }, 1000);
  });
}

let promiseChain = Promise.resolve(); // 初始化一个已完成的Promise

function addRequest(param) {
  promiseChain = promiseChain.then(() => asyncRequest(param).then(console.log));
}

// 模拟用户动态点击
addRequest("param1");
addRequest("param2");
addRequest("param3");

因为我们把Promise作为一个状态监控器，而不是回调地狱解决者。什么意思呢？意思就是Promise可以互相包裹，状态监控器再监视状态监控器，这个过程是循环往复的，这也解释了为何Promise可以无限嵌套的原因。

再举一个例子

谷歌插件开发中，popup.html需要与网页进行通信，并且还需要阻塞式响应，如果没有Promise，那你就得用生成器来写了，而如果你有Promise，应该是这样的

function sendMessageWithPromise(action) {
  return new Promise((resolve, reject) => {
    const messageId = Math.random().toString(36).substr(2); // 生成唯一ID
    // 发送消息
    chrome.runtime.sendMessage({ from: 'popup', action, messageId });
    // 添加监听器
    chrome.runtime.onMessage.addListener(function listener(response) {
      if (response.messageId === messageId) {
        // 监听到匹配的响应后移除监听器
        chrome.runtime.onMessage.removeListener(listener);
        if (response.error) {
          reject(response.error); // 处理错误
        } else {
          resolve(response.data); // 处理成功结果
        }
      }
    });
  });
}

// 使用示例
const result = await sendMessageWithPromise('getData');

所以，要将Promise 从异步操作中拆分来看，它是异步状态的监控器，而不是执行异步过程，就像你是个律师，一定会给原告一个结果，但结果是法官来判决的，而你负责传达，这样原告就不用天天来问法官了。这就是Promise。

再举个例子？

我们一直都是将ajax封装成 await request("url"， data)的方式，那么如果给你websocket，你封装成 await wdRequest(data) 方式?

如果你有点不知所措，那么说明还没有掌握Promise，如果你一下子，思路就来了，说明你已经对Promise了如指掌，以后再页没有人能阻止你使用Promise了，来看这篇文章

【面试题】利用Promise实现Websocket阻塞式await wsRequest() 请求-优快云博客文章浏览阅读540次，点赞8次，收藏6次。目标：实现一个类似 HTTP 请求的阻塞式调用接口（如 await wsRequest(...)），让开发者无需手动处理 WebSocket 的事件回调，而是通过 Promise 和 async/await 获得同步体验。onmessage：解析收到的消息，提取 requestId 和 data，通过 requestMap 找到对应的 Promise 并完成它。用 Promise 封装请求，监听 onmessage 时根据 requestId 完成对应的 Promise。https://blog.youkuaiyun.com/wangsenling/article/details/146567335

以下是 Grok 对Promise 的进一步解释

如果我们将 Promise 视为异步操作的状态管理器，它不仅仅是处理异步性的工具，还可以用来管理复杂任务的生命周期。这种视角揭示了 Promise 在以下场景中的强大应用：

1. 工作流管理

场景：在需要按顺序执行多个异步任务时（例如，先获取用户信息，再获取用户的帖子，最后获取评论），Promise 可以管理每个步骤的状态。

示例：

javascript

fetchUser()
  .then(user => fetchPosts(user.id))
  .then(posts => fetchComments(posts[0].id))
  .then(comments => console.log(comments))
  .catch(error => console.error("工作流出错:", error));

优势：每个 .then() 表示一个状态转换，清晰地展示了工作流的进展。

2. 并行任务执行

场景：需要同时加载多个资源（例如图片、脚本或 API 数据），并在所有任务完成后继续处理。

示例：

javascript

Promise.all([fetchImage(), fetchScript(), fetchData()])
  .then(results => console.log("所有资源加载完成:", results))
  .catch(error => console.error("某个资源加载失败:", error));

优势：Promise.all() 管理多个 Promise 的集体状态，只有当所有任务都完成时才进入下一步。

3. 超时与延迟

场景：为可能耗时过长的操作设置超时，或故意延迟某些操作。

示例：

javascript

const timeoutPromise = new Promise((_, reject) =>
  setTimeout(() => reject(new Error("操作超时")), 5000)
);
Promise.race([fetchData(), timeoutPromise])
  .then(data => console.log("数据:", data))
  .catch(error => console.error("错误或超时:", error));

优势：Promise.race() 管理竞争状态，优先处理最先完成（或失败）的 Promise。

4. 缓存与记忆化

场景：避免重复执行相同的异步操作，通过缓存 Promise 的结果。

示例：

javascript

let cachedPromise = null;
function getData() {
  if (!cachedPromise) {
    cachedPromise = fetchData().then(data => data);
  }
  return cachedPromise;
}

优势：Promise 管理操作的状态，确保只执行一次请求，后续调用直接使用缓存结果。

5. 事件处理

场景：将基于事件的异步操作转换为 Promise，便于与其他异步代码整合。

示例：

javascript

function waitForClick(element) {
  return new Promise(resolve => {
    element.addEventListener("click", resolve, { once: true });
  });
}
waitForClick(button).then(() => console.log("按钮被点击!"));

优势：Promise 管理事件的状态，在事件触发时决议，使代码更简洁。

6. 测试异步代码

场景：为异步函数编写单元测试。

示例：

javascript

test("fetchData 返回正确数据", async () => {
  const data = await fetchData();
  expect(data).toEqual(expectedData);
});

优势：结合 async/await，Promise 让异步测试更直观和可读。

7. 资源清理

场景：在异步操作完成后（无论成功或失败），确保清理资源。

示例：

javascript

openResource()
  .then(resource => {
    // 使用资源
  })
  .catch(error => console.error("错误:", error))
  .finally(() => closeResource());

优势：.finally() 管理状态的最终转换，确保清理逻辑始终执行。

三、为何这种理解有价值

将 Promise 视为状态管理器提供了一种更清晰的思维模型：

生命周期清晰：异步任务的每个阶段（开始、进行、结束）通过状态体现出来，便于追踪。
代码可预测：Promise 只能决议一次（fulfilled 或 rejected），避免了重复执行或竞争条件。
组合性强：通过 Promise.all()、Promise.race() 等方法，可以轻松组合多个异步任务的状态。
错误管理直观：将错误视为状态的一部分，使得错误处理更加集中和自然。