【学一点儿前端】ajax、axios和fetch的概念、区别和易混淆点

省流读法

ajax是js异步技术的术语,早期相关的api是xhr,它是一个术语。
fetch是es6新增的用于网络请求标准api,它是一个api。
axios是用于网络请求的第三方库,它是一个库。

1.Ajax

它的全称是:Asynchronous JavaScript And XML,翻译过来就是“异步的 Javascript 和 XML”。
很多小伙伴可能会误以为 Ajax 是发请求的一种方式,或者把XMLHttpRequest 与 Ajax 划等号,其实这是错误和片面的。

正解:

Ajax 是一个技术统称,是一个概念模型,它囊括了很多技术,并不特指某一技术,它很重要的特性之一就是让页面实现局部刷新。

特点:

局部刷新页面,无需重载整个页面。

简单来说,Ajax 是一种思想,XMLHttpRequest 只是实现 Ajax 的一种方式。其中 XMLHttpRequest 模块就是实现 Ajax 的一种很好的方式,这也是很多面试官喜欢让面试者手撕的代码之一。
利用 XMLHttpRequest 模块实现 Ajax。

XMLHttpRequest示例代码

<body><script>function ajax(url) {const xhr = new XMLHttpRequest();xhr.open("get", url, false);xhr.onreadystatechange = function () {// 异步回调函数if (xhr.readyState === 4) {if (xhr.status === 200) {console.info("响应结果", xhr.response)}}}xhr.send(null);}ajax('https://smallpig.site/api/category/getCategory')</script>
</body>

2.Fetch

Fetch 是在 ES6 出现的,它使用了 ES6 提出的 promise 对象。它是 XMLHttpRequest 的替代品。
很多小伙伴会把它与 Ajax 作比较,其实这是不对的,我们通常所说的 Ajax 是指使用 XMLHttpRequest 实现的 Ajax,所以真正应该和 XMLHttpRequest 作比较。

正解:

Fetch 是一个 API,它是真实存在的,它是基于 promise 的。

特点:

使用 promise,不使用回调函数。 采用模块化设计,比如 rep、res 等对象分散开来,比较友好。
通过数据流对象处理数据,可以提高网站性能。

所以这里就和 Ajax 又很大不同了,一个是思想,一个是真实存在的 API,不过它们都是用来给网络请求服务的,我们一起来看看利用 Fetch 实现网络请求。

fetch示例代码

<body><script>function ajaxFetch(url) {fetch(url).then(res => res.json()).then(data => {console.info(data)})}ajaxFetch('https://smallpig.site/api/category/getCategory')</script>
</body>

上段代码利用 Fetch 发送了一个最简单的 get 请求,其中最重要的特点之一就是采用了.then 链式调用的方式处理结果,这样不仅利于代码的可读,而且也解决了回调地狱的问题。

3.axios

Axios 是用于发出网络请求的第三方 HTTP 客户端库。绝大部分使用基于xhr封装,截止文章编写时间也已经支持fetch,可以在浏览器和 Node.js 中使用。它提供了更高级别的封装,使发送请求和处理响应更加简单和灵活。axios 支持以简洁的方式设置请求参数、处理请求和响应拦截器,并提供了更好的错误处理和取消请求的支持。

正解:

Axios 是用于发出网络请求的第三方 HTTP 客户端库。

特点:

使用 Promise 对象来处理异步请求的结果,可以更加方便地进行链式调用和错误处理。

axios示例代码

axios.get('https://api.example.com/data').then(function(response) {console.log(response.data);}).catch(function(error) {console.log(error);});

总结

ajax是js异步技术的术语,早期相关的api是xhr,它是一个术语。
fetch是es6新增的用于网络请求标准api,它是一个api。
axios是用于网络请求的第三方库,它是一个库。

易混淆点以及注意点

  1. xhr是ajax的一种实现
  2. fetch应该和xhr作比较,不能和ajax和axios做比较
  3. axios和fetch都基于promise
  4. fetch使用了关注分离的设计思想(请求和响应结果分开处理)
  5. axios目前也支持fetch

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/109564.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

核酸管外观缺陷检测(一)

1.1 应用示例思路 (1) 对核酸管图像进行灰度化、阈值分割和连通域分析&#xff1b; (2) 筛选出待检测的区域&#xff0c;并对该区域进行变换校正&#xff1b; (3) 进一步获取待检测的ROI区域&#xff0c;并根据几何特征和阈值条件&#xff0c;来对核酸管外观进行检测&#x…

Windows10 Docker 安装教程

Docker Desktop是什么&#xff1f; Docker Desktop是适用于Windows的Docker桌面&#xff0c;是Docker设计用于在Windows 10上运行。它是一个本地 Windows 应用程序&#xff0c;为构建、交付和运行dockerized应用程序提供易于使用的开发环境。Docker Desktop for Windows 使用 …

Cron表达式每月20号晚18点执行

Cron表达式每月20号晚18点执行 0 0 18 20 * ?验证正确性

node.js的版本管理nvm

一、nvm是什么&#xff1f; nvm是一个node的版本管理工具&#xff0c;可以简单操作node版本的切换、安装、查看等等&#xff0c;与npm不同的是&#xff0c;npm是依赖包的管理工具。 二、nvm的安装 1.下载 2.安装 安装后的目录&#xff1a;C:\Users\admin\AppData\Roaming\nv…

Double 4 VR智能互动教学系统的教学应用

1. 激发学习兴趣 Double 4 VR智能互动教学系统通过虚拟现实技术为学生创造了一个身临其境的学习环境。学生可以通过戴上VR头盔&#xff0c;进入虚拟世界中与教学内容互动。这种沉浸式的学习方式能够激发学生的学习兴趣&#xff0c;使他们更加主动地参与到课堂中来。 2. 提供直…

DSP移相控制

//############################################################################################### // Description: // program for 4路PWM信号&#xff0c;每路以A为准&#xff0c;B与之互补&#xff0c;带死区。移相以第一路信号&#xff08;EPWM1A&#xff09;为基准…

Java10年技术架构演进

一、前言 又快到了1024&#xff0c;现代人都喜欢以日期的特殊含义来纪念属于自己的节日。虽然有点牵强&#xff0c;但是做件事情&#xff0c;中国人总喜欢找个节日来纪念&#xff0c;程序员也是一样。甚至连1111被定义成光棍节&#xff0c;这也算再无聊不过了。不过作为程序员…

报考阿里云acp认证,你得到的是什么?

放眼全球能够和亚马逊AWS、微软Azure竞争的&#xff0c;国内也就只有阿里云了。 阿里云目前稳居国内云计算市场第一&#xff0c;比排后面5名同行市场占有率的总和还要多&#xff0c;全球云计算市场&#xff0c;阿里云目前排名第3位。 阿里云的市场占有率说明市场对于阿里云产…

kafka、zookeeper、flink测试环境、docker

1、kafka环境单点 根据官网版本说明(3.6.0)发布&#xff0c;zookeeper依旧在使用状态&#xff0c;预期在4.0.0大版本的时候彻底抛弃zookeeper使用KRaft(Apache Kafka)官方并给出了zk迁移KR的文档 2、使用docker启动单点kafka 1、首先将kafka启动命令&#xff0c;存储为.servi…

小程序:uniapp解决主包体积过大的问题

已经分包但还是体积过大 运行时勾选“运行时是否压缩代码”进行压缩 在manifest.json配置&#xff08;开启分包优化&#xff09; "mp-weixin" : {"optimization" : {"subPackages" : true}//.... },在app.json配置&#xff08;设置组件按需注入…

ubuntu 22.04修改永久修改 mac 地址

使用 rc-local.service rc-local.service 是系统自带的一个开机自启服务&#xff0c;但是在 ubuntu 20.04 上&#xff0c;该服务默认没有开启。 在文件的最后面添加 [Install] 段的内容&#xff0c; cat >> /lib/systemd/system/rc-local.service << EOF # SPD…

TCP通信-同时接受多个客户端消息

同时处理多个客户端消息的原理 代码实现 public class ClientDemo1 {public static void main(String[] args) {try {System.out.println("客户端启动");// 1、创建Socket通信管道请求有服务端的连接// public Socket(String host, int port)// 参数一&#xff1a;服…

现代 ERP 系统,如何使中小企业智能制造商受益?

中小企业智能制造商大多依靠手工操作或电子表格模式&#xff0c;或少数几个软件组成的集合体&#xff0c;或是依靠传统的ERP系统来管理企业运营。经营利润率低、订单到现金的周期缓慢、客户付款延迟、管理成本增加&#xff0c;使他们的生存变得更加困难。许多企业一直在以最少的…

视频模板SDK,为企业带来无限创意与效率

在当今的数字化时代&#xff0c;视频已经成为了信息传播的主流方式之一&#xff0c;对于企业来说&#xff0c;制作高质量的视频已经成为了一项重要的业务需求。然而&#xff0c;制作一部高质量的企业视频需要耗费大量时间和金钱&#xff0c;对于许多企业来说是一个不小的负担。…

Flask项目数据库配置、redis配置、session配置、csrf配置

1. 在app.py文件中 from datetime import timedelta from flask_wtf.csrf import CSRFProtect from flask import Flask, session from flask_sqlalchemy import SQLAlchemy from redis import StrictRedis from flask_session import Sessionapp Flask(__name__)class Confi…

软件测试基础知识整理(详细版)

一、软件测试概述 1、软件缺陷 软件缺陷&#xff1a;又称之为“Bug”。即计算机软件或程序中存在的某种破坏正常运行能力的问题、错误&#xff0c;或者隐藏的功能缺陷。 缺陷的表现形式&#xff1a; 软件没有实现产品规格说明书所要求的功能模块&#xff1b; 软件中出现了产…

数据结构 优先级队列(堆)

数据结构 优先级队列(堆) 文章目录 数据结构 优先级队列(堆)1. 优先级队列1.1 概念 2. 优先级队列的模拟实现2.1 堆的概念2.2 堆的存储方式2.3 堆的创建2.3.1 堆向下调整2.3.2 堆的创建2.3.3 建堆的时间复杂度 2.4 堆的插入与删除2.4.1 堆的插入2.4.2 堆的删除 2.5 用堆模拟实现…

再见Jenkins!你好,GitLink引擎,更强大的自动化部署工具!

文章目录 写在前面一、准备工作1.1 注册GitLink账号1.2 托管项目1.3 新建项目管理引擎流水线 二、开始构建流水线2.1 进入图形流水线编辑页2.2 添加git clone节点2.3 添加shell节点2.4 添加allure html节点2.5 添加新建GitLink疑修节点2.6 添加钉钉通知节点2.7 设置任务触发器2…

碰到一个用pip死活装不上模块的问题(ModuleNotFoundError: No module named ‘triton‘)

折腾了半天才发现问题的根源在于平台不同。 当我在windows上尝试用pip install triton命令安装该模块的时候&#xff0c;总会提示 A matching Triton is not available, some optimizations will not be enabled. Error caught was: No module named triton而一个模块如果只在…

Python学习基础笔记七十五——Python调用其他程序

Python经常被用来开发自动化程序。自动化程序往往需要调用其他的程序。 例如&#xff0c;我们可以代码中调用wget程序&#xff0c;而不是自己开发下载的代码。 这就是我们经常做的&#xff0c;在我们的Python程序中调佣其它程序&#xff0c;帮我们实现功能。 Python中调用外部…