js封装ajax

一、背景与问题

在现代Web开发中，AJAX技术是实现动态网页交互的核心手段。然而直接使用原生的XMLHttpRequest或Fetch API会带来诸多重复代码，例如：

错误处理逻辑重复
超时处理机制缺失
请求拦截器/响应拦截器缺失
不同环境下的兼容性处理
请求参数标准化问题

特别是在大型项目中，直接调用原始API会导致代码冗余和维护困难。本篇文章将深入探讨AJAX封装的底层原理，分析不同封装方案的优劣，并提供可复用的封装方案。

二、基本原理

1. XMLHttpRequest机制

XMLHttpRequest是浏览器提供的原生AJAX接口，其核心机制包括：

同步/异步请求控制
事件驱动模型（onload/onerror等）
跨域请求支持（需服务器配置CORS）
响应数据格式支持（JSON/HTML/Text等）

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

2. Fetch API机制

Fetch API是基于Promise的现代化接口，其特点包括：

更简洁的API设计
支持async/await语法
自动处理一些HTTP头信息
需要手动处理错误（未自动触发错误回调）

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

3. 封装核心要素

优秀的AJAX封装需要包含以下核心要素：

统一错误处理：集中处理网络错误、解析错误、超时错误
请求拦截器：统一添加请求头、token、参数签名等
响应拦截器：统一处理响应数据格式、错误码、刷新token等
超时控制：设置请求超时时间，避免阻塞
兼容性处理：处理不同浏览器的差异（如IE的兼容性）
可配置性：支持自定义请求方法、头信息、超时时间等

三、环境准备

# 假设使用Node.js环境进行测试
npm init -y
npm install axios

四、核心实现

1. 基础封装方案（基于Fetch API）

function createAjax(options) {
  const {
    url,
    method = 'GET',
    headers = {},
    data = null,
    timeout = 5000,
    success,
    error
  } = options;

  return new Promise((resolve, reject) => {
    const controller = new AbortController();
    
    const fetchOptions = {
      method,
      headers: {
        ...headers,
        'Content-Type': 'application/json'
      },
      body: data ? JSON.stringify(data) : undefined,
      signal: controller.signal
    };

    const timer = setTimeout(() => {
      controller.abort();
      reject(new Error('Request timeout'));
    }, timeout);

    fetch(url, fetchOptions)
      .then(response => {
        clearTimeout(timer);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
      })
      .then(data => {
        success && success(data);
        resolve(data);
      })
      .catch(err => {
        clearTimeout(timer);
        error && error(err);
        reject(err);
      });
  });
}

关键代码解释：

使用AbortController实现超时控制
自动处理JSON格式响应
支持自定义headers和data
提供统一的成功/错误回调
自动清理超时定时器

2. 进阶封装方案（支持拦截器）

class Ajax {
  constructor(options) {
    this.options = options || {};
    this.interceptors = {
      request: [],
      response: []
    };
  }

  use(type, callback) {
    if (type === 'request') {
      this.interceptors.request.push(callback);
    } else {
      this.interceptors.response.push(callback);
    }
  }

  request(config) {
    const { url, method = 'GET', headers = {}, data = null, timeout = 5000 } = config;
    
    const requestConfig = {
      url,
      method,
      headers: {
        ...headers,
        'Content-Type': 'application/json'
      },
      data: data ? JSON.stringify(data) : null,
      timeout
    };

    // 请求拦截
    this.interceptors.request.forEach(interceptor => {
      requestConfig = interceptor(requestConfig);
    });

    return new Promise((resolve, reject) => {
      const controller = new AbortController();
      
      const timer = setTimeout(() => {
        controller.abort();
        reject(new Error('Request timeout'));
      }, timeout);

      fetch(url, {
        method,
        headers: {
          ...headers,
          'Content-Type': 'application/json'
        },
        body: data ? JSON.stringify(data) : undefined,
        signal: controller.signal
      })
        .then(response => {
          clearTimeout(timer);
          if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
          }
          return response.json();
        })
        .then(data => {
          // 响应拦截
          this.interceptors.response.forEach(interceptor => {
            data = interceptor(data, response);
          });
          resolve(data);
        })
        .catch(err => {
          clearTimeout(timer);
          reject(err);
        });
    });
  }
}

关键代码解释：

实现拦截器链式调用
支持请求拦截器和响应拦截器
拦截器可以修改配置参数
支持自定义数据处理逻辑
统一的错误处理机制

3. 高级封装方案（支持async/await）

async function ajax(url, options = {}) {
  const {
    method = 'GET',
    headers = {},
    data = null,
    timeout = 5000,
    interceptors = {
      request: [],
      response: []
    }
  } = options;

  // 请求拦截
  const config = {
    url,
    method,
    headers: {
      ...headers,
      'Content-Type': 'application/json'
    },
    data: data ? JSON.stringify(data) : null,
    timeout
  };
  
  interceptors.request.forEach(interceptor => {
    config = interceptor(config);
  });

  const controller = new AbortController();
  
  const timer = setTimeout(() => {
    controller.abort();
    throw new Error('Request timeout');
  }, timeout);

  try {
    const response = await fetch(url, {
      method,
      headers: {
        ...headers,
        'Content-Type': 'application/json'
      },
      body: data ? JSON.stringify(data) : undefined,
      signal: controller.signal
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const data = await response.json();
    
    // 响应拦截
    interceptors.response.forEach(interceptor => {
      data = interceptor(data, response);
    });

    clearTimeout(timer);
    return data;
  } catch (err) {
    clearTimeout(timer);
    throw err;
  }
}

关键代码解释：

使用async/await简化异步处理
支持拦截器的链式调用
自动处理JSON响应
精确控制超时时间
支持自定义拦截逻辑

五、完整案例

1. 项目结构

src/
├── api/
│   └── ajax.js
├── components/
│   └── Login.js
├── utils/
│   └── auth.js
└── App.js

2. 封装文件 (src/api/ajax.js)

class Ajax {
  constructor(options) {
    this.options = options || {};
    this.interceptors = {
      request: [],
      response: []
    };
  }

  use(type, callback) {
    if (type === 'request') {
      this.interceptors.request.push(callback);
    } else {
      this.interceptors.response.push(callback);
    }
  }

  request(config) {
    const {
      url,
      method = 'GET',
      headers = {},
      data = null,
      timeout = 5000
    } = config;

    const requestConfig = {
      url,
      method,
      headers: {
        ...headers,
        'Content-Type': 'application/json'
      },
      data: data ? JSON.stringify(data) : null,
      timeout
    };

    // 请求拦截
    this.interceptors.request.forEach(interceptor => {
      requestConfig = interceptor(requestConfig);
    });

    return new Promise((resolve, reject) => {
      const controller = new AbortController();
      
      const timer = setTimeout(() => {
        controller.abort();
        reject(new Error('Request timeout'));
      }, timeout);

      fetch(url, {
        method,
        headers: {
          ...headers,
          'Content-Type': 'application/json'
        },
        body: data ? JSON.stringify(data) : undefined,
        signal: controller.signal
      })
        .then(response => {
          clearTimeout(timer);
          if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
          }
          return response.json();
        })
        .then(data => {
          // 响应拦截
          this.interceptors.response.forEach(interceptor => {
            data = interceptor(data, response);
          });
          resolve(data);
        })
        .catch(err => {
          clearTimeout(timer);
          reject(err);
        });
    });
  }
}

3. 使用示例 (src/components/Login.js)

import { ajax } from '../api/ajax';

export default class Login {
  constructor() {
    this.ajax = new Ajax({
      timeout: 3000,
      interceptors: {
        request: [
          (config) => {
            const token = localStorage.getItem('token');
            if (token) {
              config.headers['Authorization'] = `Bearer ${token}`;
            }
            return config;
          }
        ],
        response: [
          (data, response) => {
            if (response.status === 401) {
              localStorage.removeItem('token');
              window.location.href = '/login';
            }
            return data;
          }
        ]
      }
    });
  }

  async login(username, password) {
    const response = await this.ajax.request({
      url: '/api/login',
      method: 'POST',
      data: { username, password }
    });
    
    if (response.token) {
      localStorage.setItem('token', response.token);
      return true;
    }
    return false;
  }
}

4. 接口示例 (mock server)

// server.js
const express = require('express');
const app = express();
const port = 3000;

app.use(express.json());

app.post('/api/login', (req, res) => {
  const { username, password } = req.body;
  
  if (username === 'admin' && password === '123456') {
    res.status(200).json({
      token: 'mock_token_123'
    });
  } else {
    res.status(401).json({
      error: 'Invalid credentials'
    });
  }
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

六、源码解析

1. 请求拦截器执行顺序

this.interceptors.request.forEach(interceptor => {
  requestConfig = interceptor(requestConfig);
});

拦截器按添加顺序依次执行
每个拦截器返回新的配置对象
最终使用最后一个拦截器返回的配置

2. 响应拦截器执行顺序

this.interceptors.response.forEach(interceptor => {
  data = interceptor(data, response);
});

响应拦截器按添加顺序依次执行
每个拦截器可以修改返回数据
最终返回的是最后一个拦截器处理后的数据

3. 超时控制机制

const timer = setTimeout(() => {
  controller.abort();
  reject(new Error('Request timeout'));
}, timeout);

使用AbortController实现超时控制
超时后触发abort，终止请求
自动清理定时器

七、进阶使用

1. 请求重试机制

use('request', (config) => {
  config.retries = 3;
  config.maxRetries = 3;
  return config;
});

use('response', (data, response) => {
  if (response.status === 503 && config.retries > 0) {
    config.retries--;
    return this.request({
      ...config,
      url: '/api/retry'
    });
  }
  return data;
});

2. 请求日志记录

use('request', (config) => {
  console.log('Request:', {
    url: config.url,
    method: config.method,
    headers: config.headers,
    data: config.data
  });
  return config;
});

use('response', (data, response) => {
  console.log('Response:', {
    status: response.status,
    data: data
  });
  return data;
});

3. 动态请求参数处理

use('request', (config) => {
  const { timestamp } = Date.now();
  config.headers['X-Request-Time'] = timestamp;
  config.data = {
    ...config.data,
    timestamp
  };
  return config;
});

八、性能与工程实践

1. 性能优化方案

优化项	实现方式	效果
缓存策略	使用缓存机制存储重复请求	减少网络请求
压缩传输	使用Gzip或Brotli压缩	减少传输体积
连接复用	使用keep-alive	减少TCP握手
参数压缩	压缩请求参数	减少数据体积
异步处理	使用Web Worker	避免阻塞主线程

2. 异常处理策略

try {
  const data = await ajax('/api/data');
  console.log(data);
} catch (error) {
  console.error('Error:', error.message);
  if (error.name === 'AbortError') {
    console.warn('Request was aborted');
  } else if (error.name === 'TypeError') {
    console.warn('Network error');
  }
}

3. 安全性考虑

安全风险	防范措施
CSRF攻击	使用CSRF token
跨域漏洞	配置CORS策略
数据泄露	使用HTTPS
假冒请求	使用签名验证
请求重放	使用时间戳和nonce

九、常见问题与踩坑

1. 常见错误示例

// 错误示例：未处理错误
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));

问题分析：

未处理网络错误（如404/500）
未处理JSON解析错误
未处理超时问题

改进方案：

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

2. 跨域问题

错误表现：

Access to fetch at 'https://api.example.com/data' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

解决方案：

服务器端配置CORS头
使用代理服务器
使用withCredentials选项（需服务器支持）

3. 超时控制问题

常见错误：

超时时间设置过短导致误判
未正确清理超时定时器
超时后未正确处理后续逻辑

改进方案：

const controller = new AbortController();
const timer = setTimeout(() => {
  controller.abort();
  reject(new Error('Request timeout'));
}, timeout);

十、最佳实践

1. 推荐实践

使用拦截器统一处理错误、日志、认证等逻辑
对敏感接口添加签名验证和时间戳
对重复请求进行缓存处理
对关键接口添加重试机制
使用统一的错误码处理机制
对大文件传输使用分块上传

2. 推荐配置

const ajaxInstance = new Ajax({
  timeout: 5000,
  interceptors: {
    request: [
      (config) => {
        const token = localStorage.getItem('token');
        if (token) {
          config.headers['Authorization'] = `Bearer ${token}`;
        }
        return config;
      }
    ],
    response: [
      (data, response) => {
        if (response.status === 401) {
          localStorage.removeItem('token');
          window.location.href = '/login';
        }
        return data;
      }
    ]
  }
});

3. 推荐架构

├── api/
│   └── ajax.js           # 核心封装逻辑
├── services/
│   └── authService.js    # 业务逻辑层
├── components/
│   └── Login.js          # 前端组件
└── utils/
│   └── config.js         # 配置文件

十一、总结

AJAX封装是现代Web开发中不可或缺的技能，其核心在于通过封装提高代码复用性和可维护性。本文深入探讨了AJAX的底层原理，分析了不同封装方案的优劣，并提供了可复用的封装方案。通过拦截器、超时控制、错误处理等机制，可以构建出一个健壮的AJAX封装体系。

实际开发中应根据项目需求选择合适的封装方案，对于复杂的业务场景建议使用拦截器和响应处理机制。同时需要注意安全风险，合理配置CORS策略，使用HTTPS传输敏感数据，添加签名验证等安全措施。

在性能优化方面，可以通过缓存、压缩、连接复用等手段提升性能，同时注意避免过度封装导致的代码臃肿。对于简单的页面加载需求，直接使用原生API可能更高效，但对于复杂的业务系统，良好的AJAX封装能显著提升开发效率和代码质量。

通过本文的深入探讨，希望开发者能够理解AJAX封装的核心原理，并在实际项目中灵活运用，构建出更加健壮、可维护的前端系统。

js封装ajax

js封装ajax

一、背景与问题

二、基本原理

1. XMLHttpRequest机制

2. Fetch API机制

3. 封装核心要素

三、环境准备

四、核心实现

1. 基础封装方案（基于Fetch API）

2. 进阶封装方案（支持拦截器）

3. 高级封装方案（支持async/await）

五、完整案例

1. 项目结构

2. 封装文件 (src/api/ajax.js)

3. 使用示例 (src/components/Login.js)

4. 接口示例 (mock server)

六、源码解析

1. 请求拦截器执行顺序

2. 响应拦截器执行顺序

3. 超时控制机制

七、进阶使用

1. 请求重试机制

2. 请求日志记录

3. 动态请求参数处理

八、性能与工程实践

1. 性能优化方案

2. 异常处理策略

3. 安全性考虑

九、常见问题与踩坑

1. 常见错误示例

2. 跨域问题

3. 超时控制问题

十、最佳实践

1. 推荐实践

2. 推荐配置

3. 推荐架构

十一、总结

评论已关闭

推荐阅读