Promise模式的处理异步操作

Promise模式是JavaScript中处理异步操作的一种强大工具，它通过链式调用和状态管理简化了回调地狱问题。无论是网络请求、文件读取还是定时任务，Promise都能以更清晰的方式组织代码逻辑。

Promise的基本概念

Promise对象代表一个异步操作的最终完成（或失败）及其结果值。它有三种状态：

• pending：初始状态
• fulfilled：操作成功完成
• rejected：操作失败

const promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    const success = true;
    if (success) {
      resolve('操作成功');
    } else {
      reject('操作失败');
    }
  }, 1000);
});

Promise的链式调用

Promise的真正威力在于它的链式调用能力，可以避免回调地狱：

fetchData()
  .then(processData)
  .then(saveData)
  .catch(handleError);

每个.then()返回一个新的Promise，允许我们继续链式调用。.catch()会捕获链中任何位置发生的错误。

Promise的静态方法

Promise提供了一些有用的静态方法：

Promise.all

等待所有Promise完成，或第一个Promise被拒绝：

Promise.all([
  fetch('/api/users'),
  fetch('/api/posts')
]).then(([users, posts]) => {
  console.log('所有数据加载完成');
}).catch(err => {
  console.error('有一个请求失败', err);
});

Promise.race

返回第一个完成（无论成功或失败）的Promise：

Promise.race([
  fetch('/api/data'),
  new Promise((_, reject) => 
    setTimeout(() => reject(new Error('请求超时')), 5000)
  )
]).then(data => {
  console.log('数据获取成功');
}).catch(err => {
  console.error('请求超时或失败', err);
});

Promise.allSettled

等待所有Promise完成（无论成功或失败）：

Promise.allSettled([
  Promise.resolve('成功'),
  Promise.reject('失败')
]).then(results => {
  results.forEach(result => {
    if (result.status === 'fulfilled') {
      console.log('成功:', result.value);
    } else {
      console.log('失败:', result.reason);
    }
  });
});

Promise的错误处理

Promise提供了多种错误处理方式：

// 方式1：使用catch
somePromise()
  .then(handleSuccess)
  .catch(handleError);

// 方式2：then的第二个参数
somePromise()
  .then(handleSuccess, handleError);

// 方式3：全局错误处理
window.addEventListener('unhandledrejection', event => {
  console.warn('未处理的Promise拒绝:', event.reason);
});

Promise与async/await

async/await是建立在Promise之上的语法糖：

async function fetchData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    return processData(data);
  } catch (error) {
    console.error('获取数据失败:', error);
    throw error;
  }
}

Promise的高级模式

取消Promise

虽然Promise本身不支持取消，但可以通过包装实现：

function cancellablePromise(promise) {
  let isCancelled = false;
  
  const wrappedPromise = new Promise((resolve, reject) => {
    promise.then(
      value => !isCancelled && resolve(value),
      error => !isCancelled && reject(error)
    );
  });
  
  return {
    promise: wrappedPromise,
    cancel: () => { isCancelled = true; }
  };
}

const { promise, cancel } = cancellablePromise(fetch('/api/data'));
// 稍后调用cancel()可以"取消"Promise

Promise缓存

避免重复请求相同资源：

const promiseCache = new Map();

function getWithCache(url) {
  if (promiseCache.has(url)) {
    return promiseCache.get(url);
  }
  
  const promise = fetch(url)
    .then(response => response.json())
    .finally(() => promiseCache.delete(url));
    
  promiseCache.set(url, promise);
  return promise;
}

Promise的性能考虑

虽然Promise提供了很多便利，但也需要注意性能问题：

1. 微任务队列：Promise回调作为微任务执行，可能影响性能敏感代码
2. 内存使用：长时间挂起的Promise会保持其闭包引用
3. 错误堆栈：Promise链中的错误堆栈可能不完整

// 性能测试示例
console.time('Promise');
Promise.resolve()
  .then(() => {})
  .then(() => {})
  .then(() => {
    console.timeEnd('Promise'); // 显示Promise链的执行时间
  });

Promise的常见陷阱

1. 忘记返回Promise链中的值：

// 错误示例
somePromise()
  .then(result => {
    processResult(result); // 忘记return
  })
  .then(processed => {
    // processed将是undefined
  });

// 正确示例
somePromise()
  .then(result => {
    return processResult(result); // 显式返回
  });

2. 错误处理不当：

// 错误示例 - catch之后继续then
somePromise()
  .catch(handleError)
  .then(() => {
    // 这里仍然会执行，即使发生了错误
  });

// 正确示例 - 重新抛出错误
somePromise()
  .catch(err => {
    handleError(err);
    throw err; // 或者返回一个被拒绝的Promise
  })
  .then(() => {
    // 只有没有错误时才执行
  });

Promise的实际应用案例

顺序执行异步任务

function executeSequentially(promises) {
  return promises.reduce((chain, promise) => {
    return chain.then(() => promise);
  }, Promise.resolve());
}

executeSequentially([
  () => fetch('/api/step1'),
  () => fetch('/api/step2'),
  () => fetch('/api/step3')
]);

带重试机制的Promise

function retry(fn, retries = 3, delay = 1000) {
  return new Promise((resolve, reject) => {
    const attempt = (n) => {
      fn()
        .then(resolve)
        .catch(err => {
          if (n === 0) {
            reject(err);
          } else {
            setTimeout(() => attempt(n - 1), delay);
          }
        });
    };
    attempt(retries);
  });
}

retry(() => fetch('/api/unstable'), 5, 2000);

Promise与事件循环

理解Promise在事件循环中的行为很重要：

console.log('脚本开始');

setTimeout(() => console.log('setTimeout'), 0);

Promise.resolve()
  .then(() => console.log('Promise 1'))
  .then(() => console.log('Promise 2'));

console.log('脚本结束');

// 输出顺序:
// 脚本开始
// 脚本结束
// Promise 1
// Promise 2
// setTimeout

Promise的单元测试

测试Promise代码需要特殊处理：

// 使用Jest测试Promise
test('fetchData返回预期数据', () => {
  // 确保返回Promise
  return fetchData().then(data => {
    expect(data).toEqual(expectedData);
  });
});

// 或者使用async/await
test('fetchData返回预期数据', async () => {
  const data = await fetchData();
  expect(data).toEqual(expectedData);
});

// 测试错误情况
test('fetchData处理错误', async () => {
  await expect(fetchDataWithError()).rejects.toThrow('请求失败');
});

Promise的浏览器兼容性

虽然现代浏览器都支持Promise，但在旧环境中可能需要polyfill：

<!-- 引入Promise polyfill -->
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>

或者通过Babel等工具转译：

// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', {
      useBuiltIns: 'usage',
      corejs: 3
    }]
  ]
};

Promise与Web Worker

Promise可以很好地与Web Worker配合：

// main.js
const worker = new Worker('worker.js');

function workerPromise(message) {
  return new Promise((resolve, reject) => {
    worker.onmessage = e => resolve(e.data);
    worker.onerror = e => reject(e.error);
    worker.postMessage(message);
  });
}

workerPromise('heavy task')
  .then(result => console.log('Worker完成:', result));

// worker.js
self.onmessage = function(e) {
  const result = doHeavyTask(e.data);
  self.postMessage(result);
};

Promise的调试技巧

调试Promise链可能具有挑战性：

1. 使用.then插入调试点：

somePromise()
  .then(data => {
    console.log('调试点1:', data);
    return data;
  })
  .then(processData)
  .then(result => {
    console.log('调试点2:', result);
    return result;
  });

2. 使用async/await简化调试：

async function debugFlow() {
  const data = await somePromise();
  debugger; // 可以在这里检查data
  const processed = await processData(data);
  debugger; // 检查processed
  return processed;
}

3. 使用第三方库如bluebird提供更强大的调试支持：

const Promise = require('bluebird');
Promise.config({ longStackTraces: true });