前端Ajax、Axios和Fetch的用法和区别笔记

前端 JavaScript 开发中,进行 HTTP 请求的三种主要方式是 Ajax、Axios 和 Fetch。这三种方式各有优缺点,并且适用于不同的场景。在合适的业务场景下使用,以下是它们的区别和使用举例。

1. Ajax

Ajax(Asynchronous JavaScript and XML)是一种使用 JavaScript 和 XML 进行异步网页更新的技术。尽管其名称中包含 XML,但它可以处理多种数据格式,包括 JSON、HTML 和纯文本。传统上,Ajax 使用的是XMLHttpRequest对象。

Ajax 示例

复制代码
<!DOCTYPE html>
<html>
<head>
    <title>Ajax Example</title>
</head>
<body>
    <button id="loadData">Load Data</button>
    <div id="result"></div>

    <script>
        document.getElementById('loadData').addEventListener('click', function() {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', 'https://mybj123.com/22015.html', true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    document.getElementById('result').innerHTML = xhr.responseText;
                }
            };
            xhr.send();
        });
    </script>
</body>
</html>

2. Axios

Axios 是一个基于 Promise 的 HTTP 库,可以用于浏览器和 Node.js。它具有简单易用的 API,支持拦截请求和响应、取消请求、自动转换 JSON 数据等功能。

安装 Axios

在使用 Axios 之前,需要安装它:

复制代码
npm install axios

Axios 示例

复制代码
<!DOCTYPE html>
<html>
<head>
    <title>Axios Example</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <button id="loadData">Load Data</button>
    <div id="result"></div>

    <script>
        document.getElementById('loadData').addEventListener('click', function() {
            axios.get('https://mybj123.com/22015.html')
                .then(function(response) {
                    document.getElementById('result').innerHTML = JSON.stringify(response.data, null, 2);
                })
                .catch(function(error) {
                    console.error('Error:', error);
                });
        });
    </script>
</body>
</html>

3. Fetch

Fetch API 是现代浏览器中用来替代XMLHttpRequest的,提供了一个更强大和灵活的方式来发起网络请求。它基于 Promise,语法更加简洁。

Fetch 示例

复制代码
<!DOCTYPE html>
<html>
<head>
    <title>Fetch Example</title>
</head>
<body>
    <button id="loadData">Load Data</button>
    <div id="result"></div>

    <script>
        document.getElementById('loadData').addEventListener('click', function() {
            fetch('https://mybj123.com/22015.html')
                .then(response => response.json())
                .then(data => {
                    document.getElementById('result').innerHTML = JSON.stringify(data, null, 2);
                })
                .catch(error => {
                    console.error('Error:', error);
                });
        });
    </script>
</body>
</html>

区别与比较

  1. 使用简便性
    • Ajax:使用XMLHttpRequest对象,需要处理各种状态和事件,代码较为冗长。
    • Axios:基于 Promise,API 设计更简洁,使用更方便,支持更多功能。
    • Fetch:原生 Promise 支持,语法简洁,但需要处理一些低级错误(例如网络错误不会被捕捉到,需要手动处理response.ok)。
  2. 浏览器支持
    • Ajax:所有现代浏览器都支持。
    • Axios:需要引入外部库,但支持所有现代浏览器。
    • Fetch:所有现代浏览器(Edge 开始支持),但对于老版本浏览器(如 IE)需要使用 polyfill。
  3. 功能特性
    • Ajax:功能较为基础,需要手动处理各种请求和响应。
    • Axios:支持请求和响应拦截器、自动转换 JSON 数据、取消请求等高级功能。
    • Fetch:提供基本功能,响应处理需要手动转换(例如 JSON),且不支持progress事件和取消请求。

通过上述示例和详细解释,你可以根据项目需求选择合适的 HTTP 请求方式。Ajax 适合处理传统项目中的简单请求,Axios 提供了更高级的功能和便捷的 API,而 Fetch 则是现代前端开发中的主流选择。

相关推荐
编程猪猪侠16 分钟前
Tailwind CSS 自定义工具类与主题配置指南
前端·css
qhd吴飞20 分钟前
mybatis 差异更新法
java·前端·mybatis
YGY Webgis糕手之路42 分钟前
OpenLayers 快速入门(九)Extent 介绍
前端·经验分享·笔记·vue·web
花月mmc43 分钟前
CanMV-K230 AI学习笔记系列
人工智能·笔记·学习
患得患失94944 分钟前
【前端】【vueDevTools】使用 vueDevTools 插件并修改默认打开编辑器
前端·编辑器
ReturnTrue8681 小时前
Vue路由状态持久化方案,优雅实现记住表单历史搜索记录!
前端·vue.js
UncleKyrie1 小时前
一个浏览器插件帮你查看Figma设计稿代码图片和转码
前端
遂心_1 小时前
深入解析前后端分离中的 /api 设计:从路由到代理的完整指南
前端·javascript·api
你听得到111 小时前
Flutter - 手搓一个日历组件,集成单日选择、日期范围选择、国际化、农历和节气显示
前端·flutter·架构
风清云淡_A1 小时前
【REACT18.x】CRA+TS+ANTD5.X封装自定义的hooks复用业务功能
前端·react.js