如何在async函数中正确处理Promise挂起状态的实用方法

时间：2026-07-18 22:11

在async函数中，Promise的pending状态无法直接观测，避免pending积压的关键方法包括：使用加载状态反馈、设置超时保护、利用AbortController实现可取消请求，以及采用防抖或主动取消策略。这些措施能有效控制异步操作的生命周期，防止资源泄漏和状态混乱。

在 async 函数里，Promise 的 pending 状态就像一个看不见的“黑箱”——你不能直接伸手进去探测它，也干预不了它。说到底，它只是个中间态，async/await 自己会搞定后续的“成功或失败”。所以，真正棘手的问题不在于怎么“看”到它，而在于当程序处在这个等待期时，我们该如何进行有效的“响应”与“控制”：比如，给用户一个加载反馈、防止请求卡死、支持中途取消，或是避免因为手滑点了两下而触发重复请求。

如何在 async 函数中处理 Promise 的挂起状态

让加载状态“看得见”

前端开发中最常见的需求：用户点个按钮，你得告诉他“正在加载”。这个场景大家肯定不陌生。async 函数不给你暴露 pending 状态，但我们可以用状态变量和 await 巧妙地“打个配合”。

先定义一个响应式的状态变量（React 的 useState，Vue 的 ref，或就是一个普通布尔值）。
在 await 之前，干脆利落地把它设为 loading = true；等 await 执行完，再利落地设回 false。
注意一个坑：如果 Promise 永远处于 pending 状态（比如网络断了没反应），你的 loading 状态就会一直转圈，用户界面也就跟着一起“死锁”了。所以，超时机制是必须的。

给 Promise 上个“闹钟”：超时保护

原生 Promise 没有超时时间这个概念。一个请求挂起太久，界面就假死了，这是实战中最让人头疼的问题之一。解决办法也不复杂，用 Promise.race 给它套个“定时冲击波”：

function timeout(ms, promise) {
  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), ms);

  return Promise.race([
    promise,
    new Promise((_, reject) =>
      controller.signal.addEventListener('abort', () =>
        reject(new Error('Request timed out'))
      )
    )
  ]).finally(() => clearTimeout(timeoutId));
}

// 在 async 函数中使用
async function fetchData() {
  try {
    const data = await timeout(5000, fetch('/api/data').then(r => r.json()));
    return data;
  } catch (err) {
    console.error(err.message); // 输出 "Request timed out" 或其他错误
  }
}

“不想等了，我要取消”：支持可取消的异步操作

你发出的请求，万一用户想取消怎么办？挂起中的 Promise 是无法从外部“掐断”的。但好在我们有 AbortSignal 这个利器，它可以让底层 API（比如 fetch）响应你的取消指令。

创建一个 AbortController 实例，把它身上的 signal 传给 fetch 或你的自定义异步函数。
在 await 之前保存好这个 controller，当你想要取消时，直接调用 controller.abort() 即可。
被取消的 fetch 会立刻 reject，并抛出一个 DOMException("AbortError")。

来看个例子，更直观：

let controller;

async function startRequest() {
  // 取消上一次未完成的请求，避免混乱
  controller?.abort();
  controller = new AbortController();

  try {
    const res = await fetch('/slow-api', { signal: controller.signal });
    return await res.json();
  } catch (err) {
    if (err.name === 'AbortError') {
      console.log('请求已被取消');
    } else {
      throw err;
    }
  }
}