Promise高级应用：使用Promise.race实现请求超时控制（基于liubin/promises-book）

引言

在现代Web开发中，异步操作无处不在，而Promise作为处理异步操作的标准方式，为我们提供了优雅的解决方案。本文将深入探讨如何利用Promise.race方法实现请求超时控制，这是liubin/promises-book项目中介绍的一个高级Promise应用场景。

基础概念回顾

Promise.race简介

Promise.race是Promise的静态方法，它接收一个Promise数组作为参数，返回一个新的Promise。这个新Promise的状态由数组中第一个状态改变的Promise决定。

const promise1 = new Promise(...);
const promise2 = new Promise(...);

Promise.race([promise1, promise2])
  .then(result => {
    // 第一个完成的Promise的结果
  });

请求超时的意义

在网络请求中，超时控制是至关重要的：

1. 避免用户长时间等待无响应的请求
2. 释放系统资源
3. 提供更好的用户体验

实现Promise超时控制

第一步：创建延时Promise

要实现超时控制，首先需要创建一个在指定时间后resolve的Promise：

function delayPromise(ms) {
  return new Promise(resolve => {
    setTimeout(resolve, ms);
  });
}

这个简单的函数封装了setTimeout，返回一个Promise，使得我们可以用Promise链式调用的方式处理延时。

第二步：实现基础超时机制

结合Promise.race和delayPromise，我们可以实现基本的超时控制：

function timeoutPromise(promise, ms) {
  const timeout = delayPromise(ms).then(() => {
    throw new Error('Operation timed out');
  });
  
  return Promise.race([promise, timeout]);
}

这种实现虽然简单，但存在一个问题：无法区分超时错误和其他类型的错误。

第三步：自定义超时错误类型

为了更好地区分错误类型，我们可以创建自定义的TimeoutError：

function TimeoutError(message) {
  this.name = 'TimeoutError';
  this.message = message || '';
  this.stack = (new Error()).stack;
}

TimeoutError.prototype = Object.create(Error.prototype);
TimeoutError.prototype.constructor = TimeoutError;

使用自定义错误的好处：

1. 可以在catch中精确识别错误类型
2. 提供更详细的错误信息
3. 便于错误处理和日志记录

改进后的timeoutPromise：

function timeoutPromise(promise, ms) {
  const timeout = delayPromise(ms).then(() => {
    throw new TimeoutError('Operation timed out');
  });
  
  return Promise.race([promise, timeout]);
}

实际应用：取消XHR请求

可取消的XHR封装

要实现可取消的XHR请求，我们需要对原生XHR进行Promise封装：

function cancelableXHR(url) {
  const req = new XMLHttpRequest();
  let abort = null;
  
  const promise = new Promise((resolve, reject) => {
    abort = () => {
      req.abort();
      reject(new Error('Request aborted'));
    };
    
    req.open('GET', url, true);
    req.onload = () => resolve(req.responseText);
    req.onerror = () => reject(new Error('XHR Error'));
    req.send();
  });
  
  return {
    promise,
    abort
  };
}

结合超时控制

将可取消XHR与超时控制结合：

const { promise, abort } = cancelableXHR('http://example.com/api');

timeoutPromise(promise, 5000)
  .then(response => {
    console.log('Response:', response);
  })
  .catch(error => {
    if (error instanceof TimeoutError) {
      console.log('Request timed out');
      abort(); // 取消请求
    } else {
      console.log('Other error:', error);
    }
  });

最佳实践与模块化

代码组织建议

1. 将Promise相关工具函数单独封装
2. 分离业务逻辑和基础功能
3. 使用模块化组织代码

推荐的模块结构

promise-utils/
├── delay.js       // 延时Promise
├── timeout.js     // 超时控制
├── errors.js      // 自定义错误
└── cancelableXHR.js // 可取消XHR

使用示例

import { createXHR, abortXHR } from './promise-utils/cancelableXHR';
import { timeout } from './promise-utils/timeout';

const xhrPromise = createXHR('http://example.com/api');

timeout(xhrPromise, 5000)
  .then(handleResponse)
  .catch(handleError);

// 需要时手动取消
// abortXHR(xhrPromise);

总结与思考

通过本文，我们深入探讨了如何利用Promise.race实现请求超时控制，这是liubin/promises-book项目中介绍的高级Promise应用之一。关键点包括：

1. Promise.race的竞争机制
2. 延时Promise的实现
3. 自定义错误类型
4. XHR请求的取消
5. 代码组织的最佳实践

Promise的强大之处在于它提供了统一的异步处理接口，使得我们可以将各种异步操作（包括延时、网络请求等）以一致的方式组合和处理。超时控制只是Promise组合应用的冰山一角，掌握这些技巧可以显著提升异步代码的质量和可靠性。

在实际项目中，建议将这些工具函数封装成可复用的模块，这样不仅提高开发效率，还能保证代码的一致性和可维护性。