如何优雅手写AJAX：从封装到最佳实践的全链路解析

一、原生AJAX的底层逻辑与痛点

AJAX（Asynchronous JavaScript and XML）的核心是通过XMLHttpRequest对象实现异步通信。其原生实现包含5个关键步骤：

1. 创建实例：const xhr = new XMLHttpRequest()
2. 配置请求：xhr.open(method, url, async)
3. 设置头部：xhr.setRequestHeader('Content-Type', 'application/json')
4. 绑定事件：

   xhr.onreadystatechange = function() {
     if (xhr.readyState === 4 && xhr.status === 200) {
       console.log(JSON.parse(xhr.responseText));
     }
   };

5. 发送请求：xhr.send(data)

原生实现的三大痛点：

• 代码冗余：每次请求需重复创建实例、配置参数
• 错误处理分散：需单独处理网络错误（onerror）和业务错误（状态码）
• 功能缺失：缺乏请求取消、超时控制、进度监控等高级功能

二、优雅封装的四大核心原则

1. 参数化设计

通过配置对象解耦请求参数：

function ajax(options) {
  const {
    url,
    method = 'GET',
    data = null,
    headers = {},
    timeout = 5000,
    responseType = 'json'
  } = options;
  // ...后续实现
}

2. 链式Promise封装

将回调地狱改造为链式调用：

function ajax(options) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    // ...初始化配置
    xhr.onload = () => {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(responseType === 'json' ? JSON.parse(xhr.response) : xhr.response);
      } else {
        reject(new Error(`Request failed with status ${xhr.status}`));
      }
    };
    xhr.onerror = () => reject(new Error('Network error'));
    xhr.ontimeout = () => reject(new Error('Request timeout'));
    xhr.send(data);
  });
}

3. 防御性编程

• 参数校验：

  if (!url) throw new Error('URL is required');
  if (!['GET', 'POST', 'PUT', 'DELETE'].includes(method)) {
    throw new Error('Invalid HTTP method');
  }

• 超时控制：

  xhr.timeout = timeout;

4. 功能扩展接口

预留中间件机制支持插件化：

function createAjax() {
  const middlewares = [];
  return {
    use(fn) {
      middlewares.push(fn);
      return this;
    },
    request(options) {
      return middlewares.reduce((promise, middleware) => {
        return promise.then(res => middleware(res) || res);
      }, ajax(options));
    }
  };
}

三、完整实现示例

function createAjax() {
  return function ajax(options) {
    const { url, method = 'GET', data, headers = {}, timeout = 5000 } = options;
    return new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.open(method.toUpperCase(), url);
      xhr.timeout = timeout;
      // 设置请求头
      Object.keys(headers).forEach(key => {
        xhr.setRequestHeader(key, headers[key]);
      });
      // 响应处理
      xhr.onload = () => {
        try {
          const response = xhr.responseType === 'json' 
            ? JSON.parse(xhr.response) 
            : xhr.response;
          resolve({
            status: xhr.status,
            data: response,
            headers: xhr.getAllResponseHeaders()
          });
        } catch (e) {
          reject(new Error('Invalid JSON response'));
        }
      };
      xhr.onerror = () => reject(new Error('Network error'));
      xhr.ontimeout = () => reject(new Error('Request timeout'));
      // 发送请求
      if (method !== 'GET' && data) {
        xhr.send(typeof data === 'string' ? data : JSON.stringify(data));
      } else {
        xhr.send();
      }
    });
  };
}
// 使用示例
const request = createAjax();
request({
  url: '/api/data',
  method: 'POST',
  data: { id: 123 },
  headers: { 'Authorization': 'Bearer xxx' }
})
.then(res => console.log(res))
.catch(err => console.error(err));

四、与主流库的对比分析

特性	原生AJAX	本方案	Axios	Fetch API
Promise支持	❌	✅	✅	✅
请求取消	❌	❌（需扩展）	✅	✅
拦截器机制	❌	✅（中间件）	✅	❌
超时控制	✅	✅	✅	❌
进度监控	✅	✅	✅	✅
浏览器兼容性	✅	✅	✅	IE不支持

五、生产环境优化建议

1. 请求队列管理：

   const queue = new Map();
   function addToQueue(url, abortController) {
     if (queue.has(url)) {
       queue.get(url).abort();
     }
     queue.set(url, abortController);
   }

2. 本地缓存策略：

   const cache = new Map();
   function cachedAjax(options) {
     const cacheKey = `${options.method}:${options.url}`;
     if (cache.has(cacheKey)) {
       return Promise.resolve(cache.get(cacheKey));
     }
     return ajax(options).then(res => {
       cache.set(cacheKey, res);
       return res;
     });
   }

3. 性能监控：

   function monitorAjax(originalAjax) {
     return function(options) {
       const start = performance.now();
       return originalAjax(options).finally(() => {
         const duration = performance.now() - start;
         console.log(`Request to ${options.url} took ${duration}ms`);
       });
     };
   }

六、常见问题解决方案

1. CORS错误处理：

   • 服务器需设置Access-Control-Allow-Origin
   • 复杂请求需预检（OPTIONS）
   • 开发环境可配置代理

2. IE兼容方案：

   if (!window.XMLHttpRequest) {
     window.XMLHttpRequest = function() {
       return new ActiveXObject('Microsoft.XMLHTTP');
     };
   }

3. 大文件上传优化：

   • 使用FormData对象
   • 分片上传+断点续传
   • 进度监控：

     xhr.upload.onprogress = (e) => {
       if (e.lengthComputable) {
         const percent = (e.loaded / e.total * 100).toFixed(2);
         console.log(`Upload progress: ${percent}%`);
       }
     };

通过系统化的封装和优化，原生AJAX可以蜕变为既保持轻量级优势，又具备企业级功能特性的通信解决方案。这种实现方式特别适合对包体积敏感的项目，或需要深度定制通信逻辑的场景。实际开发中，建议根据项目需求在完全手写、部分封装、直接使用成熟库之间做出平衡选择。