fdaciuk/ajax 项目核心原理剖析：从原生XHR到Promise封装

前言

在现代前端开发中，异步请求处理是核心能力之一。本文将深入解析一个轻量级AJAX库的实现原理，帮助开发者理解从原生XMLHttpRequest到Promise风格封装的完整演进过程。

原生XHR基础

GET请求实现

原生JavaScript中发起GET请求的基本流程如下：

var request = new XMLHttpRequest();  
request.open('GET', '/api/data', true);

request.onload = function() {  
  if (request.status >= 200 && request.status < 400) {
    var data = JSON.parse(request.responseText);
    // 成功处理逻辑
  } else {
    // 服务器返回错误处理
  }
};

request.onerror = function() {  
  // 网络错误处理
};

request.send(); 

关键点解析：

1. XMLHttpRequest对象是AJAX的核心
2. open()方法初始化请求参数
3. 通过事件监听处理响应
4. send()方法实际发起请求

POST请求实现

POST请求与GET类似，但需要设置请求头和发送数据：

var request = new XMLHttpRequest();  
request.open('POST', '/api/data', true);  
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');  
request.send('key1=value1&key2=value2'); 

封装思路分析

基于原生XHR的繁琐操作，我们可以抽象出几个核心配置项：

• method: 请求方法(GET/POST等)
• url: 请求地址
• data: 请求数据
• headers: 请求头
• baseURL: 基础路径

理想的封装应该提供两种使用方式：

1. 直接调用方式：

ajax({
  method: 'POST',
  url: '/api/users',
  data: {name: 'John'}
})

2. 链式调用方式：

ajax().post('/api/users', {name: 'John'})

Promise风格实现

核心架构

库的核心架构分为两部分：

1. 入口函数ajax()：处理配置并返回适当的方法
2. xhrConnection()：实际处理XHR请求并返回Promise-like对象

入口函数实现

function ajax(options) {
  var methods = ['get', 'post', 'put', 'delete'];
  options = options || {};
  options.baseUrl = options.baseUrl || '';
  
  // 直接调用方式
  if (options.method && options.url) {
    return xhrConnection(
      options.method,
      options.baseUrl + options.url,
      maybeData(options.data),
      options
    );
  }
  
  // 链式调用方式
  return methods.reduce(function(acc, method) {
    acc[method] = function(url, data) {
      return xhrConnection(
        method,
        options.baseUrl + url,
        maybeData(data),
        options
      );
    };
    return acc;
  }, {});
}

XHR连接处理

xhrConnection函数是真正的核心：

function xhrConnection(type, url, data, options) {
  // 初始化Promise方法
  var returnMethods = ['then', 'catch', 'always'];
  var promiseMethods = returnMethods.reduce(function(promise, method) {
    promise[method] = function(callback) {
      promise[method] = callback;
      return promise;
    };
    return promise;
  }, {});
  
  // 创建XHR对象
  var xhr = new XMLHttpRequest();
  xhr.open(type, url, true);
  
  // 设置配置
  xhr.withCredentials = options.hasOwnProperty('withCredentials');
  setHeaders(xhr, options.headers);
  
  // 事件监听
  xhr.addEventListener('readystatechange', ready(promiseMethods, xhr), false);
  
  // 发送请求
  xhr.send(objectToQueryString(data));
  
  // 添加abort方法
  promiseMethods.abort = function() {
    return xhr.abort();
  };
  
  return promiseMethods;
}

Promise方法实现原理

通过reduce方法动态构建Promise-like对象：

['then', 'catch', 'always'].reduce(function(promise, method) {
  promise[method] = function(callback) {
    promise[method] = callback;
    return promise;
  };
  return promise;
}, {});

这段代码相当于手动创建了一个包含then/catch/always方法的对象，实现了类似Promise的链式调用能力。

响应处理机制

请求状态变化的处理是核心中的核心：

function ready(promiseMethods, xhr) {
  return function handleReady() {
    if (xhr.readyState === xhr.DONE) {
      xhr.removeEventListener('readystatechange', handleReady, false);
      
      // 无论成功失败都会执行always
      promiseMethods.always.apply(promiseMethods, parseResponse(xhr));
      
      // 根据状态码决定执行then还是catch
      if (xhr.status >= 200 && xhr.status < 300) {
        promiseMethods.then.apply(promiseMethods, parseResponse(xhr));
      } else {
        promiseMethods.catch.apply(promiseMethods, parseResponse(xhr));
      }
    }
  };
}

设计亮点解析

1. 灵活的调用方式：同时支持配置对象和链式调用两种风格
2. Promise-like实现：通过手动构建实现了类似Promise的then/catch机制
3. always方法：无论成功失败都会执行，适合清理操作
4. 请求中止：提供了abort方法取消请求
5. 配置继承：baseURL等配置可以全局设置

总结

这个轻量级AJAX库的实现展示了如何将原生XHR封装成更易用的形式。核心思路包括：

1. 抽象通用请求参数
2. 提供多种调用方式
3. 实现Promise-like接口
4. 完善错误处理机制
5. 提供请求控制能力

理解这种封装方式有助于开发者更好地处理网络请求，也为实现自己的工具库提供了参考。这种实现既保持了轻量级特性，又提供了现代API的使用体验。