javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JS Ajax、jQuery 、Fetch和 Axiosxiangjie

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

作者：搬砖的阿wei

fetch、axios和ajax是三种常用的在前端发送网络请求的方法,这篇文章主要介绍了JavaScript请求数据的四种方法Ajax、jQuery 、Fetch和 Axiosxiangjie的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下

前言

在前端开发的整个历程中，与后端进行数据交互、发送网络请求 是核心业务需求。从早期的原生 AJAX 解决「无刷新请求」的痛点，到 jQuery 封装的便捷 AJAX，再到 ES6 原生的 Fetch API，最后到如今前端工程化标配的 Axios 库，前端请求方案一直在迭代优化。

一、为什么需要前端网络请求方案？

在前端发展的早期，网页是「静态」的，数据由后端渲染完成后一次性返回给浏览器，页面和数据强耦合。如果想要更新页面中的某一部分数据，必须刷新整个页面，体验极差，且浪费网络资源。

为了解决这个问题，异步 JavaScript 和 XML（Asynchronous JavaScript And XML） 技术应运而生，核心思想是：在不刷新整个页面的情况下，通过 JavaScript 异步向服务器发送请求、获取数据、更新页面局部内容。

这个技术被我们统称为 AJAX，它不是一门新语言，而是一套技术组合方案。后续所有的请求库 / API（jQuery-AJAX、Fetch、Axios），本质都是对「异步请求核心逻辑」的封装和优化，底层依然基于浏览器的原生能力，只是在语法、兼容性、易用性上做了升级。

补充：早期 AJAX 主要用来请求 XML 格式数据，如今主流是 JSON 格式，但「AJAX」这个名称被保留了下来，泛指所有前端异步网络请求。

二、原生 AJAX（XMLHttpRequest）

Ajax（Asynchronous JavaScript and XML）是一种在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。它使用 XMLHttpRequest 对象发送异步请求，并处理服务器返回的数据。Ajax 可以实现无刷新加载数据，提高用户体验。

// 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);
        }
    }
}

POST 请求需额外设置请求头 + 传参：

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');

三、jQuery AJAX

jQuery 是一个轻量级的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。通过 jQuery，我们可以使用 $.ajax() 方法发送 Ajax 请求，该方法提供了更丰富的配置选项，并且支持多种请求类型（GET、POST 等）。

$.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 API

Fetch API 是一种现代的替代方案，用于在浏览器中发送 HTTP 请求。Fetch API 基于 Promise，使得异步操作更加简洁明了。Fetch API 支持同步和异步请求，返回一个 Promise 对象，可以方便地处理响应数据。

// 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);
});

POST 请求示例：

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/await 语法糖:

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();

五、Axios

Axios 是一个基于 Promise 的 HTTP 客户端，可以在浏览器和 Node.js 中使用。它提供了一种简单的方法来发送 GET、POST 等请求，并处理响应数据。Axios 具有许多实用的特性，如拦截请求和响应、转换请求和响应数据、取消请求等。

// 方式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);
    }
}

POST 请求示例:

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));

这四种方法各有优缺点，您可以根据项目需求和实际情况选择合适的方法来发送 HTTP 请求。其中，Fetch API 和 Axios 是目前比较推荐的选择，因为它们提供了更好的错误处理和更丰富的配置选项。同时，这些方法都需要进行适当的错误处理和异常捕获，以确保应用程序的稳定性和可靠性。

总结

到此这篇关于JavaScript请求数据的四种方法Ajax、jQuery 、Fetch和 Axiosxiangjie的文章就介绍到这了,更多相关JS Ajax、jQuery 、Fetch和 Axiosxiangjie内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文