JavaScript Promise 方法全解：构建健壮的异步应用

// 所有Promise成功时返回结果数组
const allSuccess = Promise.all([
  fetch('/api/users'),
  fetch('/api/products'),
  fetch('/api/orders')
]);

allSuccess.then(([users, products, orders]) => {
  // 所有数据可用后才渲染页面
  renderDashboard(users, products, orders); 
}).catch(err => {
  // 任一请求失败即中断
  showError('数据加载不完整'); 
});

const createOrder = Promise.all([
  validateCart(),
  checkInventory(),
  reservePayment()
]);

createOrder.then(([validation, inventory, payment]) => {
  // 所有前置条件满足后才创建订单
  finalizeOrder(validation.cartId, payment.transactionId);
});

// 获取首个响应的CDN资源
const resourceRace = Promise.race([
  fetch('https://cdn1.example.com/asset.js'),
  fetch('https://cdn2.example.com/asset.js'),
  new Promise((_, reject) => 
    setTimeout(() => reject(new Error('Timeout')), 5000)
  )
]);

resourceRace.then(script => injectToDOM(script))
  .catch(() => loadFallbackResource());

const sensorRace = Promise.race([
  readTemperatureSensor(),
  readHumiditySensor(),
  readMotionSensor()
]);

sensorRace.then(firstData => {
  // 首个响应的传感器触发警报判断
  if(firstData.value > threshold) triggerAlarm();
});

// 多地域服务容灾
Promise.any([
  fetch('https://us-east.api.service.com'),
  fetch('https://eu-west.api.service.com'),
  fetch('https://asia-southeast.api.service.com')
]).then(firstResponse => processData(firstResponse));

// 带优先级的any实现
function priorityAny(promises, priorities) {
  return new Promise((resolve, reject) => {
    let completed = 0;
    const errors = [];
    
    promises.forEach((promise, i) => {
      promise.then(res => {
        if(priorities[i] === 'high') resolve(res); // 高优先级立即返回
        completed++;
        if(completed === promises.length) resolve(res);
      }).catch(err => {
        errors.push(err);
        if(errors.length === promises.length) {
          reject(new AggregateError(errors));
        }
      });
    });
  });
}

// 批量用户操作状态追踪
const userActions = Promise.allSettled([
  saveProfileChanges(),
  updateBillingInfo(),
  syncPreferences()
]);

userActions.then(results => {
  results.forEach((result, index) => {
    if(result.status === 'fulfilled') {
      logSuccess(`操作${index}成功`, result.value);
    } else {
      logError(`操作${index}失败`, result.reason);
    }
  });
});

// 多步骤异步流水线
getUserToken()
  .then(token => fetchUserData(token))
  .then(user => {
    if(!user.profileComplete) {
      // 返回新Promise实现条件分支
      return completeProfile(user); 
    }
    return user;
  })
  .then(finalizeAuth)
  .catch(handleAuthError);

// 避免闭包内存泄漏
processLargeData()
  .then(data => {
    const processed = heavyCompute(data);
    // 及时释放原始数据引用
    return Promise.resolve(processed).finally(() => data = null);
  });

networkRequest()
  .catch(networkError => {
    // 网络层错误恢复
    return cachedVersion(); 
  })
  .then(processContent)
  .catch(contentError => {
    // 业务逻辑错误处理
    if(contentError.code === 403) {
      return requestPermission();
    }
    throw contentError; // 重新抛出
  })
  .finally(cleanupResources);

let dbConnection;
openDatabase()
  .then(conn => {
    dbConnection = conn;
    return executeTransaction(conn);
  })
  .finally(() => {
    // 无论成功失败都释放连接
    if(dbConnection && !dbConnection.isClosed) {
      dbConnection.release();
    }
  });

// 通用并发控制器
function promisePool(tasks, concurrency) {
  let index = 0;
  const results = [];
  const workers = Array(concurrency).fill().map(async () => {
    while(index < tasks.length) {
      const currentIndex = index++;
      try {
        results;
      } catch(err) {
        results[currentIndex] = err;
      }
    }
  });
  return Promise.all(workers).then(() => results);
}

// 控制10个并发下载
const downloadQueue = promisePool(
  Array(100).fill().map((_, i) => () => downloadFile(`file${i}.zip`)),
  10
);

// 可取消的Promise包装器
function cancellablePromise(executor) {
  const controller = new AbortController();
  const promise = new Promise((resolve, reject) => {
    executor(resolve, reject, controller.signal);
    
    // 监听取消信号
    controller.signal.addEventListener('abort', () => {
      reject(new DOMException('Aborted', 'AbortError'));
    });
  });
  
  return Object.assign(promise, {
    cancel: () => controller.abort()
  });
}

// 使用示例
const searchRequest = cancellablePromise((resolve, reject, signal) => {
  fetch('/search', { signal })
    .then(resolve)
    .catch(reject);
});

// 用户取消搜索
searchInput.addEventListener('input', () => {
  if(searchRequest) searchRequest.cancel();
});

// Promise链
function fetchSequential() {
  return fetchUser()
    .then(user => fetchProfile(user.id))
    .then(profile => fetchPosts(profile.id));
}

// async/await等效实现
async function fetchSequentialAsync() {
  const user = await fetchUser();
  const profile = await fetchProfile(user.id);
  return fetchPosts(profile.id);
}

async function loadDashboard() {
  try {
    // 并行独立请求
    const [user, notifications] = await Promise.all([
      fetchUser(),
      fetchNotifications()
    ]);
    
    // 顺序依赖请求
    const permissions = await fetchPermissions(user.role);
    
    return { user, notifications, permissions };
  } catch(err) {
    if(err.name === 'AbortError') {
      console.log('Request cancelled');
    } else {
      reportError(err);
    }
  }
}

// RxJS实现竞速请求
import { race, timer } from 'rxjs';
import { mapTo } from 'rxjs/operators';

race(
  fetch('/api/primary'),
  timer(5000).pipe(mapTo({ data: 'fallback' }))
).subscribe(result => handleResponse(result));

// 全局未捕获Promise错误
window.addEventListener('unhandledrejection', event => {
  console.error('Unhandled rejection:', event.reason);
  event.preventDefault(); // 阻止默认控制台报错
  
  // 上报错误日志
  logErrorToService({
    type: 'UNHANDLED_REJECTION',
    error: event.reason
  });
});

// Promise执行时间监控
const timedPromise = fn => (...args) => {
  const start = performance.now();
  return fn(...args).finally(() => {
    const duration = performance.now() - start;
    if(duration > 1000) {
      reportSlowPromise(fn.name, duration);
    }
  });
};

// 使用示例
const monitoredFetch = timedPromise(fetch);
monitoredFetch('/api/slow-endpoint');

// Promise.resolve().then()的底层实现
function scheduleTask(fn) {
  if(typeof queueMicrotask === 'function') {
    queueMicrotask(fn);
  } else {
    Promise.resolve().then(fn);
  }
}

// 资源互斥锁管理
navigator.locks.request('cache-flush', async lock => {
  // 类似Promise的异步作用域
  await flushCache();
  await rebuildIndex();
});

// 提案：https://github.com/tc39/proposal-async-context
const context = new AsyncLocalStorage();

function processRequest(req) {
  return context.run(req, async () => {
    // 整个异步链路共享上下文
    await verifyAuth();
    await loadData();
    return generateResponse();
  });
}