在ES6+时代，JavaScript异步编程经历了重大变革。虽然async/await语法显著提升了代码可读性，但在某些场景下直接操作Promise和利用新特性能带来更精细的控制。今天，我们要介绍一些不依赖async/await的现代JavaScript异步编程技巧，帮助你构建高性能的异步系统。

一、Promise链式操作

Promise链式操作是处理异步任务的一种经典方式。通过链式调用.then()和.catch()，可以清晰地定义数据流向和错误处理逻辑。

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) throw new Error('Network issue');
    return response.json();
  })
  .then(data => {
    console.log('Processed data:', data);
    return processFurther(data);
  })
  .then(finalResult => {
    saveToDB(finalResult);
  })
  .catch(error => {
    console.error('Error chain:', error);
    showUserError(error);
  })
  .finally(() => {
    hideLoadingIndicator();
  });

优势特征：

• 显式数据流向：数据处理流程清晰可见。
• 统一错误处理：所有错误都在一个地方处理。
• 资源清理保证：通过.finally()确保资源释放。

二、高级Promise组合器

1.并行控制

Promise.all()可以并行执行多个异步任务，并在所有任务完成时返回结果。

Promise.all([
  fetch('/user').then(r => r.json()),
  fetch('/posts').then(r => r.json())
]).then(([userData, postsData]) => {
  renderDashboard(userData, postsData);
}).catch(handleGlobalError);

2.全量结果收集

Promise.allSettled()可以收集所有异步任务的结果，无论成功还是失败。

Promise.allSettled([
  fetch('/primary'),
  fetch('/fallback')
]).then(results => {
  const successful = results.filter(r => r.status === 'fulfilled');
  const errors = results.filter(r => r.status === 'rejected');
  // 构建弹性系统
});

3.竞速策略

Promise.any()可以返回第一个成功的异步任务结果。

Promise.any([
  fetchFastEndpoint(),
  fetchSlowButReliableEndpoint()
]).then(firstResponse => {
  // 获取首个成功响应
}).catch(allErrored => {
  // 所有请求失败处理
});

三、微任务调度优化

通过queueMicrotask()可以优化微任务调度，确保任务在当前任务完成后立即执行。

function batchUpdates(callback) {
  let queue = [];
  return function(...args) {
    queue.push(args);
    queueMicrotask(() => {
      if (queue.length > 0) {
        const snapshot = queue;
        queue = [];
        callback(snapshot);
      }
    });
  };
}

四、事件驱动模式

通过EventTarget和CustomEvent可以实现事件驱动模式，适合复杂的异步任务。

class AsyncProcessor extends EventTarget {
  constructor() {
    super();
    this.addEventListener('process', this.handleEvent);
  }
  handleEvent = (e) => {
    intensiveCalculation(e.detail)
      .then(result => {
        this.dispatchEvent(new CustomEvent('completed', { detail: result }));
      });
  };
}

五、响应式编程模式

通过createObservable可以实现响应式编程模式，适合数据流处理。

function createObservable(fn) {
  const subscribers = new Set();
  const notify = value => {
    queueMicrotask(() => {
      subscribers.forEach(sub => sub(value));
    });
  };
  fn({
    next: notify,
    error: err => notify({ error: err }),
    complete: () => notify({ done: true })
  });
  return {
    subscribe: callback => {
      subscribers.add(callback);
      return () => subscribers.delete(callback);
    }
  };
}

六、错误处理示例

通过层级化错误处理和局部恢复机制，可以构建健壮的错误处理系统。

fetchCriticalData()
  .then(validateResponse)
  .then(data =>
    transformData(data).catch(transformationError => {
      return getFallbackData();
    })
  )
  .then(finalizeProcessing)
  .catch(rootError => {
    logToMonitoring(rootError);
    emergencyRecovery();
  });

七、性能优化

1.请求竞速

Promise.race()可以实现请求竞速，返回第一个完成的任务结果。

2.惰性加载

通过new Promise()可以实现惰性加载，按需初始化资源。

3.缓存策略

通过Map可以实现简单的缓存策略，减少重复请求。

const apiCache = new Map();
function cachedFetch(url) {
  if (apiCache.has(url)) {
    return Promise.resolve(apiCache.get(url));
  }
  return fetch(url)
    .then(r => r.json())
    .then(data => {
      apiCache.set(url, data);
      return data;
    });
}

八、现代浏览器API整合

通过navigator.serviceWorker可以实现服务端推送和离线缓存。

navigator.serviceWorker.ready
  .then(registration => {
    return registration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey: VAPID_KEY
    });
  })
  .then(subscription => {
    return sendToServer('/register', subscription);
  })
  .then(confirmSubscription);

注意事项

0. 优先选择声明式编程风格：代码更清晰易读。
1. 保持Promise链的纯净性：避免混合回调。
2. 善用finally进行状态清理：确保资源释放。
3. 复杂场景优先使用组合器：如Promise.all()、Promise.allSettled()等。
4. 浏览器兼容性检测：确保新特性在目标浏览器中可用。

if (typeof Promise.allSettled === 'function') {
  // 使用现代特性
} else {
  // 加载polyfill
}

通过合理运用Promise链式调用、组合器、微任务控制等现代特性，可以在不依赖async/await语法的情况下，构建出高性能、高可维护性的异步系统。这些方案不仅适用于现代浏览器环境，在Serverless、Web Worker等场景中也展现出色表现。如果你对这些技巧感兴趣，不妨在项目中尝试一下，提升你的异步编程能力。