如何利用 async 语法糖处理异构的异步 API-js教程-PHP中文网

async/await 统一处理各类异步操作：自动包装非 promise 值、兼容 thenable、安全捕获同步错误；需手动封装回调/事件/轮询等非 promise api 为 promise；混合调用时应确保各源失败必 reject，并依依赖关系选择顺序或 allsettled 并行执行。

如何利用 async 语法糖处理异构的异步 api

async/await 本身不改变异步行为，但能统一处理不同形态的异步 API——无论返回 Promise、thenable、普通值，还是可能抛出同步错误的函数，都能用一致结构收口。

统一等待所有“类 Promise”操作

async 函数内部的 await 会自动对非 Promise 值做 Promise.resolve() 包装，对 thenable（含 then 方法的对象）也会正确 await。这意味着你可以安全地 await：

标准 Promise（如 fetch()、axios.get()）
带 then 方法的自定义对象（如某些 SDK 返回的链式请求实例）
普通值（数字、字符串、null）——立即 resolve，不阻塞
同步抛错的函数（如 JSON.parse('invalid')），会被捕获进 catch

无需提前判断类型，直接 await 即可，底层已兼容。

封装不可靠 API 成可控 Promise

有些老接口返回回调函数、事件触发、或全局变量赋值（如 script 加载完成），它们不是 Promise。需手动包装：

回调型：用 Promise 构造器包裹，resolve/reject 在 callback 中调用
事件型：监听一次事件后 resolve，加超时 reject 防止挂起
轮询型：用 setTimeout + 递归 Promise 封装，避免阻塞主线程

例如封装一个依赖 window.loaded 标志的初始化逻辑：

Web前端Promise教程从入门到精通课件

下载

async function waitForLoaded() {
  return new Promise((resolve) => {
    if (window.loaded) return resolve();
    const timer = setTimeout(() => resolve(), 5000);
    window.addEventListener('loaded', () => { clearTimeout(timer); resolve(); }, { once: true });
  });
}

混合调用时保持错误语义一致

当同时调用多个异构 API（比如一个 fetch、一个 localStorage.getItem、一个第三方 SDK 的 callback 方法），可用 try/catch 统一兜底，但需注意：

localStorage.getItem 是同步的，若传入非法 key 会静默返回 null，不会 throw —— 它不属于“错误”，而是业务空值，应由业务逻辑判断
fetch 失败（网络断开、4xx/5xx）会 reject，被 await 捕获为 error
第三方 callback 封装后的 Promise 若未 reject 错误，就无法进入 catch —— 必须确保封装层把异常路径覆盖全

建议对每类异构源单独封装，并在封装层明确约定：成功返回数据，失败必须 reject（而非 return null 或 undefined）。

并行与顺序的灵活组合

异构 API 往往响应时间差异大（如本地缓存快、远程请求慢、SDK 初始化耗时）。可按需选择执行策略：

顺序执行：用 await 逐个调用，适合有依赖关系的场景（如先取 token，再用 token 请求用户信息）
并行执行：对无依赖的异构调用，用 Promise.all([awaitedA, awaitedB])，但注意其中任一 reject 会导致整个 all 失败
容错并行：用 Promise.allSettled 替代 all，确保每个异构调用的结果（fulfilled/rejected）都可单独处理

例如加载配置（localStorage）、用户数据（fetch）、插件状态（SDK 方法）三者无依赖，且允许部分失败：

const [configRes, userRes, pluginRes] = await Promise.allSettled([
  loadConfigFromCache(),
  fetchUser(),
  sdk.checkStatus()
]);
if (configRes.status === 'fulfilled') useConfig(configRes.value);
if (userRes.status === 'rejected') logError('用户加载失败');
if (pluginRes.status === 'fulfilled' && pluginRes.value.ready) initPlugin();