原生AJAX、axios与fetch网络请求对比全解析

在前端开发中，网络请求是非常重要的一环。本文将详细对比三种主流的网络请求方式：原生AJAX、axios和fetch。

📦 原生AJAX (XMLHttpRequest)

原生AJAX是最基础的请求方式，了解它有助于理解其他请求库的原理。

特点

• 兼容性最好
• 配置相对繁琐
• 需要手动处理数据转换

代码示例

// GET 请求
const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://api.example.com/data?name=张三&age=18');
xhr.send();
xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
        const data = JSON.parse(xhr.responseText);
        console.log(data);
    }
};

// POST 请求
const xhr = new XMLHttpRequest();
xhr.open('POST', 'http://api.example.com/create');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('name=张三&age=18');
xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
        const data = JSON.parse(xhr.responseText);
        console.log(data);
    }
};

🔥 axios

axios是目前最流行的HTTP客户端，基于Promise封装。

特点

• 支持Promise API
• 提供拦截器机制
• 自动转换JSON数据
• 支持请求和响应的拦截
• 可以同时支持浏览器和Node.js环境

代码示例

const instance = axios.create({
    baseURL: 'http://api.example.com',
    timeout: 5000,
    headers: {'X-Custom-Header': 'value'}
});

// 请求拦截器
instance.interceptors.request.use(config => {
    console.log('请求发送前的处理');
    return config;
});

// 响应拦截器
instance.interceptors.response.use(response => {
    console.log('响应数据的处理');
    return response.data;
});

// GET 请求
const getData = async () => {
    try {
        const response = await instance.get('/data', {
            params: { name: '张三', age: 18 }
        });
        console.log(response);
    } catch (error) {
        console.error('请求失败:', error);
    }
};

// POST 请求
const postData = async () => {
    try {
        const response = await instance.post('/create', {
            name: '张三',
            age: 18
        });
        console.log(response);
    } catch (error) {
        console.error('请求失败:', error);
    }
};

⚡️ Fetch API

Fetch是浏览器原生提供的现代化网络请求API。

特点

• 原生支持Promise
• 更加简洁的API
• 不需要额外依赖
• 需要手动检查响应状态
• 不支持请求取消和超时控制（可通过AbortController实现）

代码示例

// GET 请求
const fetchData = async () => {
    try {
        const response = await fetch('http://api.example.com/data?name=张三&age=18');
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('请求失败:', error);
    }
};

// POST 请求
const postData = async () => {
    try {
        const response = await fetch('http://api.example.com/create', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                name: '张三',
                age: 18
            })
        });
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('请求失败:', error);
    }
};

🎯 选择建议

1. 如果是新项目，推荐使用：

   • 中小型项目：Fetch API
   • 大型项目：axios

2. 考虑因素：

   • 项目规模和复杂度
   • 浏览器兼容性要求
   • 是否需要更多的功能（如拦截器、请求取消等）

3. 注意事项：

   • 所有请求都应该做好错误处理
   • 考虑添加请求超时处理
   • 注意跨域问题的处理
   • 敏感数据的安全传输