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

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


一、Fetch

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

  1. 特点:
  • 基于 Promise 设计,支持异步操作;
  • 返回的 response 对象包含完整的响应信息,如状态码、响应头等;
  • 支持请求和响应的拦截;
  • 支持请求取消。
  1. 示例代码:
javascript 复制代码
简单请求
fetch('http://loalhost:8080')
javascript 复制代码
返回值
fetch('http://loalhost:8080')
  .then(response => response.json())
  .then(data => console.log(data))
javascript 复制代码
表单方式提交
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))
javascript 复制代码
querystring方式提交
fetch('http://loalhost:8080?age=18',{
	method:'POST'
})
  .then(response => response.json())
  .then(data => console.log(data))
javascript 复制代码
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))
javascript 复制代码
返回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>标签

浏览器测试

c 复制代码
data:text/html,<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.min.js"></script>
  1. 示例代码:
javascript 复制代码
简单请求
axios({
    url:'http://localhost:8080'
})
javascript 复制代码
默认json请求
axios({
    url:'http://localhost:8080',
    method:'POST',
    data:{age:18}
})
javascript 复制代码
querystring方式提交
axios({
    url:'http://localhost:8080?age=18',
    method:'POST'
})
.then(response =>console.log(response .data))
javascript 复制代码
表单方式提交
axios({
    url:'http://localhost:8080',
    method:'POST',
    headers:{'content-type':'application/x-www-form-urlencoded'},
    data:'age=18'
})
.then(response =>console.log(response .data))
javascript 复制代码
返回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>标签

浏览器测试

bash 复制代码
data:text/html,<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  1. 示例代码:
javascript 复制代码
简单请求
$.ajax({
  url: 'http://loalhost:8080'
})
javascript 复制代码
返回值
$.ajax({
  url: 'http://loalhost:8080',
  success: function(data) {
    console.log(data);
  }
})
javascript 复制代码
请求方法
$.ajax({
  method:'POST',
  url: 'http://loalhost:8080',
  success: function(data) {
    console.log(data);
  }
})
javascript 复制代码
表单方式提交
$.ajax({
  method:'POST',
  data:{age:18},
  url: 'http://loalhost:8080',
  success: function(data) {
    console.log(data);
  }
})
javascript 复制代码
querystring方式提交
$.ajax({
  method:'POST',
  data:{age:18},
  url: 'http://loalhost:8080',
  success: function(data) {
    console.log(data);
  }
})
javascript 复制代码
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
c 复制代码
// 基本用法无参数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
c 复制代码
// 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
c 复制代码
// 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可以简写:

c 复制代码
$.get(url,data,callback)  // querystring格式
$.post(url,data,callback) // x-www-form-urlencoded格式

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

c 复制代码
axios.post(url,data).then(callback)

五、总结

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

相关推荐
技术拾荒者1 天前
Day03_AJAX原理 (黑马笔记)
ajax
闲人编程1 天前
Spark使用过程中的 15 个常见问题、详细解决方案
python·ajax·spark·解决方案·调度·作业
ac-er88881 天前
ThinkPHP中使用ajax接收json数据的方法
前端·ajax·json·php
猿学1 天前
CSS+JQuery 实现弹力球效果,碰到屏幕边框弹回
前端·css·jquery
贝格前端工场2 天前
jquery还有其应用场景,智慧慢慢地被边缘化,但不会消亡
前端·javascript·jquery
灿宝宝lo3 天前
使用ajax-hook修改http请求响应数据,篡改后再返回给正常的程序
android·前端·ajax
shidouyu3 天前
前端框架主要做些什么工作
javascript·css·ajax·正则表达式·json·firefox·jquery
cooldream20093 天前
使用Axios函数库进行网络请求的使用指南
前端·vue·axios
京东菜鸟全球通快递小哥3 天前
Axios取消重复请求,但能让最新请求作为最终返回,且能共享状态 ,不知小伙您有没有尝到真香~
前端·javascript·axios
技术拾荒者3 天前
Day02_AJAX综合案例 (黑马笔记)
网络·笔记·ajax