Fetch、Axios 和 jQuery(Ajax) 三种常用的网络请求技术

Fetch、Axios 和 jQuery(Ajax) 是三种常用的网络请求技术,它们各自有着不同的特点和优势。本文将对这三种技术进行详细的介绍和比较,以帮助开发者更好地选择和使用合适的网络请求技术。


一、Fetch

Fetch(浏览器自带) 是一种现代的网络请求 API,它是基于 Promise 设计的,可以用于替代传统的 XMLHttpRequest。Fetch 提供了一种更简洁、更强大的方式来处理网络请求和响应。

  1. 特点:
  • 基于 Promise 设计,支持异步操作;
  • 返回的 response 对象包含完整的响应信息,如状态码、响应头等;
  • 支持请求和响应的拦截;
  • 支持请求取消。
  1. 示例代码:
简单请求
fetch('http://loalhost:8080')
返回值
fetch('http://loalhost:8080')
  .then(response => response.json())
  .then(data => console.log(data))
表单方式提交
fetch('http://loalhost:8080',{
	method:'POST',
	headers:{'content-type':'application/x-www-form-urlencoded'},
	body:'age=18&t=183'
})
  .then(response => response.json())
  .then(data => console.log(data))
querystring方式提交
fetch('http://loalhost:8080?age=18',{
	method:'POST'
})
  .then(response => response.json())
  .then(data => console.log(data))
json方式提交
fetch('http://loalhost:8080',{
	method:'POST',
	headers:{'content-type':'application/json'},
	body:JSON.stringify({age:18})
})
  .then(response => response.json())
  .then(data => console.log(data))
返回error
fetch('http://loalhost:8080')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

二、Axios

Axios (前端后端都可用)是一个基于 Promise 的 HTTP 客户端,它可以在浏览器和 Node.js 环境中使用。Axios 提供了一种简单、易用的方式来处理网络请求和响应。

  1. 特点:
  • 支持浏览器和 Node.js 环境;
  • 自动转换 JSON 数据;
  • 支持拦截请求和响应;
  • 支持请求取消。
  1. bootcdn
    稳定、快速、免费的前端开源项目 CDN 加速服务
    在这里插入图片描述
    复制<script>标签
    在这里插入图片描述

浏览器测试

data:text/html,<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.min.js"></script>

在这里插入图片描述

  1. 示例代码:
简单请求
axios({
    url:'http://localhost:8080'
})
默认json请求
axios({
    url:'http://localhost:8080',
    method:'POST',
    data:{age:18}
})
querystring方式提交
axios({
    url:'http://localhost:8080?age=18',
    method:'POST'
})
.then(response =>console.log(response .data))
表单方式提交
axios({
    url:'http://localhost:8080',
    method:'POST',
    headers:{'content-type':'application/x-www-form-urlencoded'},
    data:'age=18'
})
.then(response =>console.log(response .data))
返回error
axios({
    url:'http://localhost:8080',
    method:'POST',
    headers:{'content-type':'application/x-www-form-urlencoded'},
    data:'age=18'
})
.then(response =>console.log(response .data))
  .catch(error => {
    console.error(error);
  })

三、jQuery(Ajax)

jQuery 是一个流行的 JavaScript 库,它提供了一种简化的 Ajax 方法来处理网络请求和响应。虽然 jQuery 已经不再是前端开发的主流选择,但它仍然在一些项目中被广泛使用。

  1. 特点:
  • 兼容性好,支持多种浏览器;
  • 语法简单,易于上手;
  • 支持多种请求类型(如 GET、POST 等);
  • 支持请求和响应的回调函数。
  1. bootcdn
    稳定、快速、免费的前端开源项目 CDN 加速服务
    在这里插入图片描述
    复制<script>标签
    在这里插入图片描述

浏览器测试

data:text/html,<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

在这里插入图片描述

  1. 示例代码:
    在这里插入图片描述
简单请求
$.ajax({
  url: 'http://loalhost:8080'
})
返回值
$.ajax({
  url: 'http://loalhost:8080',
  success: function(data) {
    console.log(data);
  }
})
请求方法
$.ajax({
  method:'POST',
  url: 'http://loalhost:8080',
  success: function(data) {
    console.log(data);
  }
})
表单方式提交
$.ajax({
  method:'POST',
  data:{age:18},
  url: 'http://loalhost:8080',
  success: function(data) {
    console.log(data);
  }
})
querystring方式提交
$.ajax({
  method:'POST',
  data:{age:18},
  url: 'http://loalhost:8080',
  success: function(data) {
    console.log(data);
  }
})
json方式提交
$.ajax({
  method:'POST',
  headers:{'Content-Type':'application/json'},
  data:JSON.stringify({age:18}),
  url: 'http://loalhost:8080',
  success: function(data) {
    console.log(data);
  }
})

四、其他

  • jquery
// 基本用法无参数get请求
$.ajax({
    url:"demo_test.txt",
    success:function(result){
        console.log(result);
    }
}
// 需指定方法则增加method字段
$.ajax({
    url:"demo_test.txt",
    method:"POST",
    success:function(result){
	console.log(result);
    }
}
// 有参数,则增加data字段,有请求头则增加headers字段,有错误处理增加error字段
// 默认是按照表单提交post方法,data中虽然是json但是提交时转成表单
$.ajax({
    url:"demo_test.txt",
    data:{a:10},
    success:function(result){
    	console.log(result);
    },
    error:function(xhr,status,error){
    	console.log(error);
    }
});
// data在post下是表单格式,在get下是querystring格式
// 通过以下方法指定为json格式[json格式本质就是body里是json字符串,头里是application/json]
$.ajax({
    url:"demo_test.txt",
    headers:{ contentType: "application/json"},
    method:"POST",
    data:JSON.stringify({a:10}),
    success:function(result){
	console.log(result);
    }
});
  • fetch
// fetch的post表单数据用法
fetch(url,{
    headers:{
         'content-type': "application/x-www-form-urlencoded"
    },
    method:"POST",
    body:"age=18&w=213",
})
.then(res=>res.json())
.then(data=>console.log(res))
.catch(e=>{})
// fetch的post json数据用法
fetch(url,{
    headers:{
         'content-type': "application/json"
    },
    method:"POST",
    body:JSON.stringify({a:100}),
})
.then(res=>res.json())
.then(data=>console.log(res))
.catch(e=>{})
  • axios
// axios默认是json类型的提交
axios({
    url:"http://localhost:8080?x=1",
    method:"POST",
    data:{age:18}
})
.then(res=>console.log(res.data))
// 如果想改成form则需要修改headers和data格式
axios({
    url:"http://localhost:8080?x=1",
    method:"POST",
    headers:{"Content-Type":"application/x-www-form-urlencoded"},
    data:"age=18&w=213"
})
.then(res=>console.log(res.data))
  • 简写

JQuery的get和post可以简写:

$.get(url,data,callback)  // querystring格式
$.post(url,data,callback) // x-www-form-urlencoded格式

axios的get/post/put/delete等等都可以简写

axios.post(url,data).then(callback)

五、总结

Fetch、Axios 和 jQuery(Ajax) 都是非常优秀的网络请求技术,它们各自有着不同的特点和优势。在选择使用哪种技术时,可以根据项目的需求和个人喜好来决定。例如,如果你需要一个轻量级、易于使用的库,可以选择 Axios;如果你需要更多的控制权和灵活性,可以选择 Fetch;如果你需要在旧版浏览器中保持兼容性,可以选择 jQuery(Ajax)。总之,了解这三种技术的优缺点,将有助于你更好地进行网络请求的处理。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Linux CentOS 7.6安装Redis 6.2.6 详细保姆级教程

1、安装依赖 //检查是否有依赖 gcc -v //没有则安装 yum install -y gcc2、下载redis安装包 //进入home目录 cd /home //通过wget下载redis安装包 wget https://download.redis.io/releases/redis-6.2.6.tar.gz //解压安装包 tar -zxvf redis-6.2.6.tar.gz3、编译 //进入解压…

CSS学习笔记:transform属性实现元素的位移、旋转、缩放

位移 实现居中的两种方法 绝对定位的盒子在父盒子中实现居中效果有两种方法 法一&#xff1a;margin 其中&#xff0c;left和top的值分别为子盒子自身宽高的一半 法二&#xff1a;translate 实现过渡效果 translate常常配合hover和transition使用&#xff0c;以实现鼠标悬停…

流畅的 Python 第二版(GPT 重译)(二)

第三章&#xff1a;字典和集合 Python 基本上是用大量语法糖包装的字典。 Lalo Martins&#xff0c;早期数字游牧民和 Pythonista 我们在所有的 Python 程序中都使用字典。即使不是直接在我们的代码中&#xff0c;也是间接的&#xff0c;因为dict类型是 Python 实现的基本部分。…

uniapp、vue2.6、H5,利用腾讯TRTC,快速跑通1v1视频功能

多人视频聊天室搭建&#xff0c;官网已有相关demo和案例&#xff0c;需要快速搭建多人聊天室直接进入以下网站&#xff1a; 实时音视频 Web & H5 (Vue2/Vue3)-视频通话&#xff08;含 UI&#xff09;-文档中心-腾讯云说明&#xff1a;https://cloud.tencent.com/document/…

Python 深度学习第二版(GPT 重译)(三)

七、使用 Keras&#xff1a;深入探讨 本章涵盖 使用 Sequential 类、功能 API 和模型子类创建 Keras 模型 使用内置的 Keras 训练和评估循环 使用 Keras 回调函数自定义训练 使用 TensorBoard 监控训练和评估指标 从头开始编写训练和评估循环 您现在对 Keras 有了一些经…

uni-app 中两个系统各自显示不同的tabBar

最近在一个uni-app项目中遇到一个需求,在登录页面成功登录以后需要判断身份,不同的身份的进入不同的tabBar页面,但是在uni-app项目中pages.json中的tabBar的list数组只有一个&#xff0c;且不能写成动态的,那如何实现这个需求呢?答案是需要我们自定义tabBar。 目录 1、我们确…

四、HarmonyOS应用开发-ArkTS开发语言介绍

目录 1、TypeScript快速入门 1.1、编程语言介绍 1.2、基础类型 1.3、条件语句 1.4、函数 1.5、类 1.6、模块 1.7、迭代器 2、ArkTs 基础&#xff08;浅析ArkTS的起源和演进&#xff09; 2.1、引言 2.2、JS 2.3、TS 2.4、ArkTS 2.5、下一步演进 3、ArkTs 开发实践…

【C语言】循环语句(语句使用建议)

文章目录 **while循环****while循环的实践****补充:if语句与while语句区别****for循环(使用频率最高)****for循环的实践****while循环和for循环的对比****Do-while循环****break和continue语句****循环的嵌套****goto语句(不常用)****循环语句的效率(来自于高质量的C/C编程书籍…

竞赛 GRU的 电影评论情感分析 - python 深度学习 情感分类

1 前言 &#x1f525;学长分享优质竞赛项目&#xff0c;今天要分享的是 &#x1f6a9; GRU的 电影评论情感分析 - python 深度学习 情感分类 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;3分工作量&#xff1a;3分创新点&#xff1a;4分 这…

Excel使用VLOOKUP函数

VLOOKUP(lookup_value,table_array,col_index_num,range_lookup) 释义&#xff1a; lookup_value&#xff1a;要查找的值&#xff0c;包括数字&#xff0c;文本等 table_array&#xff1a;要查找的值以及预期返回的内容所在的区域 col_index_num&#xff1a;查找的区域的列…

mysql配置

MySQL数据库的介绍 MySQL是一个关系型数据库管理系统&#xff0c;在 WEB 应用方面&#xff0c;MySQL是最好的 RDBMS (Relational Database Management System&#xff0c;关系数据库管理系统) 应用软件&#xff0c;它是由瑞典MySQL AB 公司开发&#xff0c;目前属于 Oracle 旗…

拿来就能用 | ESP AI音箱方案介绍

本案例使用ESP-BOX和OpenAI API开发一款语音控制的聊天机器人(chatbot)。 猜猜我是谁&#xff1f;ESP AI音箱方案体验 ESP-BOX AI音箱方案介绍 本案例将介绍如何使用ESP-BOX和OpenAI API开发一款语音控制的聊天机器人。该系统可以接收用户的语音指令&#xff0c;将其展示在屏幕…

敏捷开发最佳实践:学习与改进维度实践案例之会诊式培养敏捷教练

自组织团队能够定期反思并采取针对性行动来提升人效&#xff0c;但2022年的敏捷调研发现&#xff0c;70%的中国企业在学习和改进方面仍停留在团队级。本节实践案例将分享“会诊式培养敏捷教练”的具体做法&#xff0c;突出了敏捷以人为本的学习和改进&#xff0c;强调了通过人员…

阿里云轻量应用服务器和ECS服务器有啥区别?2024年整理对比表

阿里云服务器ECS和轻量应用服务器有什么区别&#xff1f;轻量和ECS优缺点对比&#xff0c;云服务器ECS是明星级云产品&#xff0c;适合企业专业级的使用场景&#xff0c;轻量应用服务器是在ECS的基础上推出的轻量级云服务器&#xff0c;适合个人开发者单机应用访问量不高的网站…

简介:使用TensorFlow实现python简版神经网络模型

如果你想进一步深入AI编程的魔法世界&#xff0c;那么TensorFlow和PyTorch这两个深度学习框架将是你的不二之选。它们可以帮助你构建更加复杂的神经网络模型&#xff0c;实现图像识别、语音识别等高级功能。 模型原理&#xff1a;神经网络是一种模拟人脑神经元结构的计算模型&a…

抖音视频批量下载软件可导出视频分享链接|手机网页视频提取|视频爬虫采集工具

解锁抖音视频无水印批量下载新姿势&#xff01; 在快节奏的生活中&#xff0c;抖音作为时下最热门的短视频平台之一&#xff0c;吸引着广大用户的目光。而如何高效地获取喜欢的视频内容成为了许多人关注的焦点。Q:290615413现在&#xff0c;我们推出的抖音视频批量下载软件&…

【概念】神马是分布式?

SueWakeup​​​​​ 个人主页&#xff1a;SueWakeup 系列专栏&#xff1a;学习Java框架 个性签名&#xff1a;保留赤子之心也许是种幸运吧 本文封面由 凯楠&#x1f4f7; 友情赞助播出&#xff01; 目录 前言 1. 系统架构的演变 2. SOA 与微服务的关系 3. 分布式核心知识…

元器件应用中的深力科推荐SZ1SMA5945BT3G 车规级齐纳二极管

SZ1SMA5945BT3G是一款1.5W齐纳二极管是为通用电压调节应用而设计的。 安森美深力科齐纳二极管专为稳压电路设计&#xff0c;提供广泛的工作电压和额定功率。 关于齐纳二极管基本知识&#xff1a; 齐纳二极管&#xff0c;又称稳压二极管。利用PN结的反向击穿状态&#xff0c;…

开发语言详解(python、java、Go(Golong)。。。。)

是语言决定行业&#xff0c;还是行业决定语言&#xff0c;说不清&#xff0c;只是觉得&#xff0c;当你做这一行的时候&#xff0c;如果你还有精力感兴趣的话&#xff0c;可以再做些了解&#xff0c;一下是自己个人见解以及官网做的整合。希望对大家有用。 目录 Python 概念&…

微软聘请了谷歌DeepMind的联合创始人

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…