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

2025-06-26 06:19:56作者：平淮齐Percy

前言

在现代前端开发中，异步请求处理是核心能力之一。本文将深入解析一个轻量级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();

关键点解析：

XMLHttpRequest对象是AJAX的核心
open()方法初始化请求参数
通过事件监听处理响应
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: 基础路径

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

直接调用方式：

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

链式调用方式：

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

Promise风格实现

核心架构

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

入口函数ajax()：处理配置并返回适当的方法
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));
      }
    }
  };
}