java fetch_解析Fetch实现请求数据
这篇文章主要介绍了fetch 如何实现请求数据,文中通过示例代码介绍的非常详细,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。
一 序言
在 传统Ajax 时代,进行 API 等网络请求都是通过XMLHttpRequest或者封装后的框架进行网络请求,然而配置和调用方式非常混乱,对于刚入门的新手并不友好。今天我们介绍的Fetch提供了一个更好的替代方法,它不仅提供了一种简单,合乎逻辑的方式来跨网络异步获取资源,而且可以很容易地被其他技术使用,例如 Service Workers。
二 与Ajax对比
使用Ajax请求一个 JSON 数据一般是这样:
var xhr = new XMLHttpRequest();
xhr.open('GET', url/file,true);
xhr.onreadystatechange = function() {
if(xhr.readyState==4){
if(xhr.status==200){
var data=xhr.responseText;
console.log(data);
}
};
xhr.onerror = function() {
console.log("Oh, error");
};
xhr.send();
同样我们使用fetch请求JSON数据:
fetch(url).then(response => response.json())//解析为可读数据
.then(data => console.log(data))//执行结果是 resolve就调用then方法
.catch(err => console.log("Oh, error", err))//执行结果是 reject就调用catch方法
从两者对比来看,fetch代码精简许多,业务逻辑更清晰明了,使得代码易于维护,可读性更高。
总而言之,Fetch 优点主要有:
1. 语法简洁,更加语义化,业务逻辑更清晰
2. 基于标准 Promise 实现,支持 async/await
三 Promise简介
由于 Fetch API 是基于 Promise 设计,接下来我们简单介绍下Promise工作流程,方便大家更好理解Fetch。
fetch方法返回一个Promise对象, 根据 Promise Api 的特性, fetch可以方便地使用then方法将各个处理逻辑串起来, 使用 Promise.resolve() 或 Promise.reject() 方法将分别返会肯定结果的Promise或否定结果的Promise, 从而调用下一个then 或者 catch。一旦then中的语句出现错误, 也将跳到catch中。
四 请求常见数据格式
接下来将介绍如何使用fetch请求本地文本数据,请求本地JSON数据以及请求网络接口。其实操作相比与Ajax,简单很多!
//HTML部分
Fetch Api sandbox
请求本地文本数据
请求本地json数据
请求网络接口
1.fetch请求本地文本数据
本地有一个test.txt文档,通过以下代码就可以获取其中的数据,并且显示在页面上。
document.getElementById('button1').addEventListener('click',getText);
function getText(){
fetch("test.txt")
.then((res) => res.text())//注意:此处是res.text()
.then(data => {
console.log(data);
document.getElementById('output').innerHTML = data;
})
.catch(err => console.log(err));
}//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流:619586920
2.fetch请求本地JSON数据
本地有个posts.json数据,与请求本地文本不同的是,得到数据后还要用forEach遍历,最后呈现在页面上。
document.getElementById('button2').addEventListener('click',getJson);
function getJson(){
fetch("posts.json")
.then((res) => res.json())
.then(data => {
console.log(data);
let output = '';
data.forEach((post) => {
output += `
${post.title}`;
})
document.getElementById('output').innerHTML = output;
})
.catch(err => console.log(err));
}//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流:619586920
3.fetch请求网络接口
【获取数据】,做法与获取本地JSON的方法类似,得到数据后,同样要经过处理
document.getElementById('button3').addEventListener('click',getExternal);
function getExternal(){
// https://api.github.com/users
fetch("https://api.github.com/users")
.then((res) => res.json())
.then(data => {
console.log(data);
let output = '';
data.forEach((user) => {
output += `
${user.login}`;
})
document.getElementById('output').innerHTML = output;
})
.catch(err => console.log(err));
}//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流:619586920
结语
感谢您的观看,如有不足之处,欢迎批评指正。
java fetch_解析Fetch实现请求数据相关推荐
- Android(或者Java)通过HttpUrlConnection向SpringMVC请求数据(数据绑定)
问题描写叙述 当我们使用SpringMVC作为服务端的框架时,有时不仅仅要应对web前端(jsp.javascript.Jquery等)的訪问请求,有时还可能须要响应Android和JavaSE(桌面 ...
- 微信小程序——利用java后台解析Excel文件的数据
后台为java,ssm框架 1.在SpringMvc.xml文件中增加Spring文件上传的解析器 <bean id="multipartResolver"class=&qu ...
- jsp java json解析,jsp中获取json字符串,并解析
JqueryDemo1 function showData() { var str='{ "name": "John" }';//json标准格式 var ob ...
- java 对外提供接口_Java服务器对外提供接口以及Android端向服务器请求数据
讲解下java服务器是如何对移动终端提供接口的,以什么数据格式提供出去,移动端又是怎么请求服务器,接收以及解析返回数据的. 服务端:还是在原先S2SH框架的项目上(搭建SSH详细步骤及其相关说明),加 ...
- java request获取域,Java Web - Servlet(13)HttpServletRequest详解(获取请求数据、请求分派、请求域)(二)...
Java Web -- Servlet(13)HttpServletRequest详解(获取请求数据.请求分派.请求域)(2) HttpServletRequest ----------------- ...
- Java抓包分析四(基于jnetpcap进行抓包)——分析Http请求数据包
在上篇文章中Java抓包分析三(基于jnetpcap进行抓包)--抓取Http请求数据包,我们讲解了TCP三次握手的过程和如何抓取Http数据包,但是我们并没有进行一个数据分析,接下来这篇文章我们将要 ...
- java jsoup解析开彩网api接口json数据实例
https://www.cnblogs.com/zdz8207/p/7288830.html 开彩网apiJava技术学习 https://www.itkc8.com json-lib-2.4-jdk ...
- java中使用ajax请求数据格式化,ajax请求服务器返回json数据格式化
JQuery--实现Ajax应用 实现Ajax应用 1 .load()异步请求数据,通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,调用格式为load(url,[data], ...
- dva ajax请求,dva框架使用mock.js模拟数据 + fetch请求数据
what DVA? Dva是基于Redux做了一层封装,对于React的state管理,有很多方案,我选择了轻量.简单的Dva. dva 可以很方便就使用mock.js进行数据的模拟. 只需要三步,即 ...
最新文章
- SDN第二章 win10远程桌面Ubuntu
- java请求接口示例_用示例解释Java接口
- 史上最全memcached面试26题和答案
- 联想终成全球PC第一
- 中国内容推荐引擎市场趋势报告、技术动态创新及市场预测
- C 编译器、链接器、加载器详解
- loadrunner—web_url
- ubuntu eclipse for php,ubuntu 安装 Eclipse 支持PHP
- redis作用_Java高级架构笔记——实现故障恢复自动化:详解Redis哨兵技术
- Unity的包体压缩以及音效优化
- 华硕笔记本 FX50J Fn热键无效
- 浏览器事件:为什么会有捕获过程和冒泡过程?
- 【iOS-iap防护】验证用户付费收据!拒绝iap Cracker!拒绝iap Free!让iphone越狱用户无从下手!(作者新浪微博: @李华明Himi )
- HTML5酷炫动画集锦
- 谷歌正式推出 “密钥登录”,逐步取代传统密码登录
- Caché 时间函数
- 我的世界服务器无线刷物品,《我的世界》1.12无限刷物品方法图文教学
- opencv + contrib windows下源码编译
- 测试开发进阶——常用中间件概念——JDBC——连接数据库理解
- 疑难杂症篇(十三)--Java中出现“找不到符号“的错误解决方案