专业网站建设常州,网站模版怎么上传到空间,展厅设计公司有哪些,网页编辑软件editFetch、Axios 和 jQuery(Ajax) 是三种常用的网络请求技术#xff0c;它们各自有着不同的特点和优势。本文将对这三种技术进行详细的介绍和比较#xff0c;以帮助开发者更好地选择和使用合适的网络请求技术。 一、Fetch
Fetch(浏览器自带) 是一种现代的网络请求 API#xff…Fetch、Axios 和 jQuery(Ajax) 是三种常用的网络请求技术它们各自有着不同的特点和优势。本文将对这三种技术进行详细的介绍和比较以帮助开发者更好地选择和使用合适的网络请求技术。 一、Fetch
Fetch(浏览器自带) 是一种现代的网络请求 API它是基于 Promise 设计的可以用于替代传统的 XMLHttpRequest。Fetch 提供了一种更简洁、更强大的方式来处理网络请求和响应。
特点
基于 Promise 设计支持异步操作返回的 response 对象包含完整的响应信息如状态码、响应头等支持请求和响应的拦截支持请求取消。
示例代码
简单请求
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:age18t183
}).then(response response.json()).then(data console.log(data))querystring方式提交
fetch(http://loalhost:8080?age18,{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 提供了一种简单、易用的方式来处理网络请求和响应。
特点
支持浏览器和 Node.js 环境自动转换 JSON 数据支持拦截请求和响应支持请求取消。
bootcdn 稳定、快速、免费的前端开源项目 CDN 加速服务 复制script标签
浏览器测试
data:text/html,script srchttps://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.min.js/script示例代码
简单请求
axios({url:http://localhost:8080
})默认json请求
axios({url:http://localhost:8080,method:POST,data:{age:18}
})querystring方式提交
axios({url:http://localhost:8080?age18,method:POST
})
.then(response console.log(response .data))表单方式提交
axios({url:http://localhost:8080,method:POST,headers:{content-type:application/x-www-form-urlencoded},data:age18
})
.then(response console.log(response .data))返回error
axios({url:http://localhost:8080,method:POST,headers:{content-type:application/x-www-form-urlencoded},data:age18
})
.then(response console.log(response .data)).catch(error {console.error(error);})三、jQuery(Ajax)
jQuery 是一个流行的 JavaScript 库它提供了一种简化的 Ajax 方法来处理网络请求和响应。虽然 jQuery 已经不再是前端开发的主流选择但它仍然在一些项目中被广泛使用。
特点
兼容性好支持多种浏览器语法简单易于上手支持多种请求类型如 GET、POST 等支持请求和响应的回调函数。
bootcdn 稳定、快速、免费的前端开源项目 CDN 加速服务 复制script标签
浏览器测试
data:text/html,script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js/script示例代码
简单请求
$.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:age18w213,
})
.then(resres.json())
.then(dataconsole.log(res))
.catch(e{})
// fetch的post json数据用法
fetch(url,{headers:{content-type: application/json},method:POST,body:JSON.stringify({a:100}),
})
.then(resres.json())
.then(dataconsole.log(res))
.catch(e{})axios
// axios默认是json类型的提交
axios({url:http://localhost:8080?x1,method:POST,data:{age:18}
})
.then(resconsole.log(res.data))
// 如果想改成form则需要修改headers和data格式
axios({url:http://localhost:8080?x1,method:POST,headers:{Content-Type:application/x-www-form-urlencoded},data:age18w213
})
.then(resconsole.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)。总之了解这三种技术的优缺点将有助于你更好地进行网络请求的处理。
