JavaScript请求数据的四种方法Ajax、jQuery 、Fetch和 Axiosxiangjie详解

// 1. 创建XHR核心对象
const xhr = new XMLHttpRequest();
// 2. 初始化请求：请求方式、请求地址、是否异步(true)
xhr.open('GET', 'http://127.0.0.1:8000/server?id=100', true);
// 3. 发送请求
xhr.send();
// 4. 绑定状态改变事件，处理响应结果
xhr.onreadystatechange = function () {
    // readyState=4 表示请求生命周期完成（请求成功/失败/中断）
    if (xhr.readyState === 4) {
        // status>=200 && status<300 表示HTTP请求成功
        if (xhr.status >= 200 && xhr.status < 300) {
            console.log('请求成功：', xhr.response);
        } else {
            console.log('请求失败，状态码：', xhr.status);
        }
    }
}

xhr.open('POST', 'http://127.0.0.1:8000/server', true);
// 设置请求体格式为表单格式
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 发送请求并携带参数
xhr.send('username=ylx&age=20');

$.ajax({
    url: 'http://127.0.0.1:8000/server', // 请求地址
    type: 'GET', // 请求方法 GET/POST
    data: {id:100, vip:7}, // 请求参数（自动拼接/序列化）
    headers: {name:'admin'}, // 自定义请求头
    dataType: 'json', // 期望返回的数据类型，自动解析JSON
    success: function(res) { // 请求成功的回调
        console.log('请求成功：', res);
    },
    error: function(err) { // 请求失败的回调
        console.log('请求失败：', err);
    }
});

// Fetch返回Promise对象，支持.then/.catch链式调用
fetch('http://127.0.0.1:8000/server?id=100', {
    method: 'GET', // 请求方法，默认GET
    headers: {name: 'admin'} // 自定义请求头
})
.then(response => {
    // 核心注意：fetch的第一层then，拿到的是「响应对象」，不是真实数据
    // 需要调用对应方法解析响应体：json()/text()/blob()
    return response.json(); // 解析JSON格式数据，返回新的Promise
})
.then(data => {
    console.log('请求成功：', data);
})
.catch(err => {
    console.log('请求失败：', err);
});

fetch('http://127.0.0.1:8000/server', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json' // JSON格式请求体
    },
    body: JSON.stringify({username: 'admin', age: 20}) // 请求体必须序列化
})
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.log(err));

async function getData() {
    try {
        const response = await fetch('http://127.0.0.1:8000/server');
        const data = await response.json();
        console.log('请求成功：', data);
    } catch (err) {
        console.log('请求失败：', err);
    }
}
getData();

// 方式1：链式调用
axios.get('http://127.0.0.1:8000/server', {
    params: {id:100, vip:7}, // URL拼接参数，自动序列化
    headers: {name: 'admin'} // 自定义请求头
})
.then(res => {
    console.log('请求成功：', res.data); // axios自动解析data，直接获取
})
.catch(err => {
    console.log('请求失败：', err);
});

// 方式2：async/await 语法糖
async function getData() {
    try {
        const res = await axios.get('http://127.0.0.1:8000/server', {
            params: {id:100}
        });
        console.log(res.data);
    } catch (err) {
        console.log(err);
    }
}

axios.post('http://127.0.0.1:8000/server', 
    {username: 'admin', age:20}, // POST请求体参数，自动序列化
    {headers: {gender: '男'}}
)
.then(res => console.log(res.data))
.catch(err => console.log(err));

// 通用写法（支持所有请求方法，最灵活）
axios({
    method: 'POST',
    url: 'http://127.0.0.1:8000/server',
    params: {id:100},
    data: {username: 'admin'},
    headers: {name: 'admin'}
}).then(res => console.log(res.data));