Ajax與Axios的基本概念及終極全方位對(duì)比解析

更新時(shí)間：2026年07月20日 09:39:59 作者：Technical?genius

Ajax是前端實(shí)現(xiàn)異步通信的基礎(chǔ)技術(shù),其本質(zhì)是瀏覽器通過XMLHttpRequest或Fetch API與服務(wù)器交換數(shù)據(jù)而不刷新頁(yè)面,這篇文章主要介紹了Ajax與Axios的基本概念及終極全方位對(duì)比解析的相關(guān)資料,需要的朋友可以參考下

1. 基本概念深度解析

1.1 Ajax技術(shù)本質(zhì)

Ajax（Asynchronous JavaScript and XML）不是單一技術(shù)，而是一組技術(shù)的集合，包括：

‌XMLHttpRequest對(duì)象‌：核心通信接口
‌JavaScript/DOM‌：信息顯示與交互
‌CSS‌：美化頁(yè)面樣式

// 原生Ajax實(shí)現(xiàn)示例
function makeAjaxRequest(url, method = 'GET', data = null) {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        
        xhr.open(method, url, true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    resolve(JSON.parse(xhr.responseText));
                } else {
                    reject(new Error(`請(qǐng)求失敗: ${xhr.status}`));
                }
            }
        };
        
        xhr.onerror = function() {
            reject(new Error('網(wǎng)絡(luò)錯(cuò)誤'));
        };
        
        xhr.send(data ? JSON.stringify(data) : null);
    });
}

1.2 Axios技術(shù)定位

Axios是基于Promise的現(xiàn)代化HTTP客戶端，具有以下特性：

‌瀏覽器端‌：基于XMLHttpRequest
‌Node.js端‌：基于http模塊
‌統(tǒng)一API‌：跨環(huán)境一致性
‌攔截器系統(tǒng)‌：請(qǐng)求/響應(yīng)處理管道

2. 技術(shù)實(shí)現(xiàn)對(duì)比

2.1 原生Ajax完整實(shí)現(xiàn)

class AjaxClient {
    constructor(baseURL = '') {
        this.baseURL = baseURL;
    }
    
    request(config) {
        return new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest();
            const url = config.url.startsWith('http') ? config.url : this.baseURL + config.url;
            
            xhr.open(config.method || 'GET', url, true);
            
            // 設(shè)置請(qǐng)求頭
            if (config.headers) {
                Object.keys(config.headers).forEach(key => {
                    xhr.setRequestHeader(key, config.headers[key]);
                });
            }
            
            xhr.timeout = config.timeout || 0;
            xhr.responseType = config.responseType || 'json';
            
            xhr.onload = function() {
                if (xhr.status >= 200 && xhr.status < 300) {
                    resolve({
                        data: xhr.response,
                        status: xhr.status,
                        statusText: xhr.statusText
                    });
                } else {
                    reject(new Error(`請(qǐng)求失敗: ${xhr.status}`));
                }
            };
            
            xhr.onerror = function() {
                reject(new Error('網(wǎng)絡(luò)錯(cuò)誤'));
            };
            
            xhr.ontimeout = function() {
                reject(new Error('請(qǐng)求超時(shí)'));
            };
            
            xhr.send(config.data ? JSON.stringify(config.data) : null);
        });
    }
    
    get(url, config = {}) {
        return this.request({ ...config, url, method: 'GET' });
    }
    
    post(url, data, config = {}) {
        return this.request({ ...config, url, method: 'POST', data });
    }
}

2.2 Axios核心架構(gòu)

// Axios簡(jiǎn)化實(shí)現(xiàn)原理
class Axios {
    constructor(config) {
        this.defaults = config;
        this.interceptors = {
            request: new InterceptorManager(),
            response: new InterceptorManager()
        };
    }
    
    request(config) {
        // 創(chuàng)建請(qǐng)求鏈
        const chain = [this.dispatchRequest, undefined];
        
        // 添加請(qǐng)求攔截器
        this.interceptors.request.forEach(interceptor => {
            chain.unshift(interceptor.fulfilled, interceptor.rejected);
        });
        
        // 添加響應(yīng)攔截器
        this.interceptors.response.forEach(interceptor => {
            chain.push(interceptor.fulfilled, interceptor.rejected);
        });
        
        let promise = Promise.resolve(config);
        
        while (chain.length) {
            promise = promise.then(chain.shift(), chain.shift());
        }
        
        return promise;
    }
    
    dispatchRequest(config) {
        // 實(shí)際的請(qǐng)求發(fā)送邏輯
        return adapter(config);
    }
}

3. 功能特性詳細(xì)對(duì)比

3.1 請(qǐng)求配置能力

‌Ajax配置選項(xiàng)有限：

const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/users');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Authorization', 'Bearer token');
xhr.timeout = 5000;
xhr.send(JSON.stringify({ name: 'John' }));

‌Axios豐富配置：

// Axios完整配置示例
const config = {
    url: '/api/users',
    method: 'post',
    baseURL: 'https://api.example.com',
    headers: {
        'X-Custom-Header': 'value',
        'Authorization': 'Bearer token'
    },
    timeout: 10000,
    withCredentials: true,
    responseType: 'json',
    transformRequest: [function(data, headers) {
        // 轉(zhuǎn)換請(qǐng)求數(shù)據(jù)
        return JSON.stringify(data);
    }],
    params: {
        page: 1,
        limit: 10
    },
    data: {
        name: 'John',
        email: 'john@example.com'
    }
};

axios.request(config);

3.2 攔截器機(jī)制對(duì)比

‌Ajax無(wú)內(nèi)置攔截器：

// 需要手動(dòng)實(shí)現(xiàn)類似功能
function addRequestInterceptor(callback) {
    const originalOpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function(...args) {
        callback(this);
        return originalOpen.apply(this, args);
    };
}

‌Axios攔截器系統(tǒng)：

// 請(qǐng)求攔截器
axios.interceptors.request.use(
    config => {
        // 添加認(rèn)證token
        const token = localStorage.getItem('token');
        if (token) {
            config.headers.Authorization = `Bearer ${token}`;
        }
        console.log('發(fā)送請(qǐng)求:', config);
        return config;
    },
    error => {
        return Promise.reject(error);
    }
);

// 響應(yīng)攔截器
axios.interceptors.response.use(
    response => {
        // 統(tǒng)一處理響應(yīng)數(shù)據(jù)
        return response.data;
    },
    error => {
        // 統(tǒng)一錯(cuò)誤處理
        if (error.response?.status === 401) {
            window.location.href = '/login';
        }
        return Promise.reject(error);
    }
);

4. 實(shí)際應(yīng)用場(chǎng)景對(duì)比

4.1 簡(jiǎn)單GET請(qǐng)求

‌Ajax實(shí)現(xiàn)：

function ajaxGet(url) {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    resolve(JSON.parse(xhr.responseText));
                } else {
                    reject(new Error(`GET請(qǐng)求失敗: ${xhr.status}`));
            }
        };
        xhr.send();
    });
}

‌Axios實(shí)現(xiàn)：

// 多種調(diào)用方式
axios.get('/api/users')
    .then(response => console.log(response.data))
    .catch(error => console.error('請(qǐng)求失敗:', error));

// 或使用async/await
async function fetchUsers() {
    try {
        const response = await axios.get('/api/users');
        return response.data;
    } catch (error) {
        console.error('獲取用戶失敗:', error);
        throw error;
    }
}

4.2 復(fù)雜POST請(qǐng)求

‌Ajax復(fù)雜實(shí)現(xiàn)：

function ajaxPost(url, data) {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open('POST', url, true);
        xhr.setRequestHeader('Content-Type', 'application/json');
    
        xhr.onload = function() {
            if (xhr.status === 200 || xhr.status === 201) {
                resolve({
                    data: JSON.parse(xhr.responseText),
                    status: xhr.status,
                    headers: xhr.getAllResponseHeaders()
                });
            } else {
                reject(new Error(`POST請(qǐng)求失敗: ${xhr.status}`));
            }
        };
    
        xhr.onerror = function() {
            reject(new Error('網(wǎng)絡(luò)錯(cuò)誤'));
        };
    
        xhr.ontimeout = function() {
            reject(new Error('請(qǐng)求超時(shí)'));
        };
    
        xhr.send(JSON.stringify(data));
    });
}

‌Axios簡(jiǎn)化實(shí)現(xiàn)：

// 上傳文件示例
const formData = new FormData();
formData.append('file', file);
formData.append('name', 'document');

axios.post('/api/upload', formData, {
    headers: {
        'Content-Type': 'multipart/form-data'
    },
    onUploadProgress: progressEvent => {
        const percentCompleted = Math.round(
            (progressEvent.loaded * 100) / progressEvent.total
    );
    console.log(`上傳進(jìn)度: ${percentCompleted}%`);
    }
});

5. 性能與兼容性分析

5.1 性能對(duì)比

指標(biāo)	Ajax	Axios
請(qǐng)求速度	原生最快	輕微封裝開銷
內(nèi)存占用	最低	稍高
包大小	0KB（原生）	13KB（壓縮后）
并發(fā)處理	手動(dòng)管理	自動(dòng)Promise.all

5.2 瀏覽器兼容性

Ajax兼容性處理：

function createXHR() {
    if (typeof XMLHttpRequest !== 'undefined') {
        return new XMLHttpRequest();
    } else if (typeof ActiveXObject !== 'undefined') {
        // IE6及以下版本
        return new ActiveXObject('Microsoft.XMLHTTP');
    } else {
        throw new Error('瀏覽器不支持Ajax');
    }
}

‌Axios自動(dòng)兼容：

// Axios自動(dòng)處理兼容性
function getDefaultAdapter() {
    let adapter;
    
    if (typeof XMLHttpRequest !== 'undefined') {
        // 瀏覽器環(huán)境
        adapter = require('./adapters/xhr');
    } else if (typeof process !== 'undefined') {
        // Node.js環(huán)境
        adapter = require('./adapters/http');
    }
    
    return adapter;
}

6. 錯(cuò)誤處理機(jī)制對(duì)比

6.1 Ajax錯(cuò)誤處理

function ajaxWithErrorHandling(url) {
    const xhr = new XMLHttpRequest();
    
    xhr.addEventListener('error', handleNetworkError);
    xhr.addEventListener('timeout', handleTimeoutError);
    xhr.addEventListener('load', function() {
        if (this.status >= 400) {
            handleHttpError(this.status, this.statusText);
        }
    });
    
    // 需要手動(dòng)處理各種錯(cuò)誤狀態(tài)
    if (xhr.status === 0) {
        console.error('網(wǎng)絡(luò)連接失敗');
    } else if (xhr.status === 404) {
        console.error('請(qǐng)求的資源不存在');
    }
}

6.2 Axios錯(cuò)誤處理

// 統(tǒng)一錯(cuò)誤處理
axios.get('/api/data')
    .then(response => {
        // 處理成功響應(yīng)
    })
    .catch(error => {
        if (error.response) {
            // 服務(wù)器返回錯(cuò)誤狀態(tài)碼
            console.error('服務(wù)器錯(cuò)誤:', error.response.status);
        } else if (error.request) {
            // 請(qǐng)求發(fā)送失敗
            console.error('網(wǎng)絡(luò)錯(cuò)誤:', error.message);
        } else {
            // 其他錯(cuò)誤
            console.error('請(qǐng)求配置錯(cuò)誤:', error.message);
        }
    });

7. 現(xiàn)代化項(xiàng)目中的應(yīng)用

7.1 Vue項(xiàng)目中Axios封裝

// api/client.js
import axios from 'axios';

const service = axios.create({
    baseURL: process.env.VUE_APP_API_BASE_URL,
    timeout: 10000
});

// 響應(yīng)錯(cuò)誤統(tǒng)一處理
service.interceptors.response.use(
    response => response,
    error => {
        const { status, data } = error.response;
        
        switch (status) {
            case 400:
                showError(data.message || '請(qǐng)求參數(shù)錯(cuò)誤');
                break;
            case 401:
                redirectToLogin();
                break;
            case 500:
                showError('服務(wù)器內(nèi)部錯(cuò)誤');
                break;
            default:
                showError('網(wǎng)絡(luò)請(qǐng)求失敗');
        }
        
        return Promise.reject(error);
    }
);

7.2 React Hooks中的使用

// hooks/useApi.js
import { useState, useEffect } from 'react';
import axios from 'axios';

export function useApi(url) {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        const source = axios.CancelToken.source();
        
        axios.get(url, {
            cancelToken: source.token
        })
        .then(response => {
            setData(response.data);
            setLoading(false);
        })
        .catch(err => {
            if (!axios.isCancel(err)) {
                setError(err);
                setLoading(false);
            }
        });

        return () => {
            source.cancel('組件卸載，取消請(qǐng)求');
        };
    }, [url]);

    return { data, loading, error };
}

8. 總結(jié)與選擇建議

8.1 技術(shù)選型矩陣

場(chǎng)景	推薦方案	理由
學(xué)習(xí)HTTP基礎(chǔ)	原生Ajax	理解底層原理
小型項(xiàng)目	原生Ajax	減少依賴
大中型項(xiàng)目	Axios	功能完善，開發(fā)高效
需要攔截器	Axios	內(nèi)置支持
跨環(huán)境項(xiàng)目	Axios	統(tǒng)一API
性能極致要求	原生Ajax	無(wú)額外開銷

8.2 發(fā)展趨勢(shì)分析

‌Ajax‌：作為底層技術(shù)將持續(xù)存在，但在新項(xiàng)目中直接使用頻率下降。

‌Axios‌：在現(xiàn)代化前端生態(tài)中已成為事實(shí)標(biāo)準(zhǔn)，持續(xù)迭代優(yōu)化。

8.3 最佳實(shí)踐建議

‌學(xué)習(xí)階段‌：掌握原生Ajax實(shí)現(xiàn)原理
‌項(xiàng)目開發(fā)‌：優(yōu)先選擇Axios提高效率
‌性能優(yōu)化‌：在關(guān)鍵路徑可考慮原生實(shí)現(xiàn)
‌團(tuán)隊(duì)協(xié)作‌：建立統(tǒng)一的HTTP請(qǐng)求規(guī)范

Ajax作為前端異步通信的基石技術(shù)，Axios作為其現(xiàn)代化封裝，兩者在前端技術(shù)棧中各有定位。理解Ajax有助于深入掌握網(wǎng)絡(luò)請(qǐng)求本質(zhì)，使用Axios則能顯著提升開發(fā)效率和代碼質(zhì)量。在實(shí)際項(xiàng)目中，建議根據(jù)具體需求和團(tuán)隊(duì)技術(shù)棧做出合理選擇。