fetch 如何实现请求数据


Posted in Javascript onDecember 20, 2018

一 序言

在 传统Ajax 时代,进行 API 等网络请求都是通过XMLHttpRequest或者封装后的框架进行网络请求,然而配置和调用方式非常混乱,对于刚入门的新手并不友好。今天我们介绍的Fetch提供了一个更好的替代方法,它不仅提供了一种简单,合乎逻辑的方式来跨网络异步获取资源,而且可以很容易地被其他技术使用,例如 Service Workers。

fetch 如何实现请求数据

二 与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

3. 同构方便,使用isomorphic-fetch

三 Promise简介

由于 Fetch API 是基于 Promise 设计,接下来我们简单介绍下Promise工作流程,方便大家更好理解Fetch。

fetch 如何实现请求数据

fetch方法返回一个Promise对象, 根据 Promise Api 的特性, fetch可以方便地使用then方法将各个处理逻辑串起来, 使用 Promise.resolve() 或 Promise.reject() 方法将分别返会肯定结果的Promise或否定结果的Promise, 从而调用下一个then 或者 catch。一旦then中的语句出现错误, 也将跳到catch中。

四 请求常见数据格式

接下来将介绍如何使用fetch请求本地文本数据,请求本地JSON数据以及请求网络接口。其实操作相比与Ajax,简单很多!

//HTML部分
 <div class="container">
 <h1>Fetch Api sandbox</h1>
 <button id="button1">请求本地文本数据</button>
 <button id="button2">请求本地json数据</button>
 <button id="button3">请求网络接口</button>
 <br><br>
 <div id="output"></div>
 </div>
 <script src="app.js"></script>

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));
}

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 += `<li>${post.title}</li>`;
  })
  document.getElementById('output').innerHTML = output;
  })
  .catch(err => console.log(err));
}

3.fetch请求网络接口

获取https://api.github.com/users中的数据,做法与获取本地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 += `<li>${user.login}</li>`;
  })
  document.getElementById('output').innerHTML = output;
  })
  .catch(err => console.log(err));
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript eval函数深入认识
Feb 21 Javascript
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
Jul 10 Javascript
Jquery Change与bind事件代码
Sep 29 Javascript
Javascript中valueOf与toString区别浅析
Mar 19 Javascript
jQuery动画效果animate和scrollTop结合使用实例
Apr 02 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
Mar 11 Javascript
JS模拟实现Select效果代码
Sep 24 Javascript
websocket+node.js实现实时聊天系统问题咨询
May 17 Javascript
js Dom实现换肤效果
Oct 21 Javascript
Vue 创建组件的两种方法小结(必看)
Feb 23 Javascript
Layui事件监听的实现(表单和数据表格)
Oct 17 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
Apr 11 Javascript
JS闭包经典实例详解
Dec 20 #Javascript
JS闭包原理与应用经典示例
Dec 20 #Javascript
Mint UI组件库CheckList使用及踩坑总结
Dec 20 #Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
Dec 20 #Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
Dec 20 #Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
Dec 20 #Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
Dec 20 #Javascript
You might like
PHP array_push 数组函数
2009/12/26 PHP
微博短链接算法php版本实现代码
2012/09/15 PHP
php preg_replace替换实例讲解
2013/11/04 PHP
示例详解Laravel的注册重构
2016/08/14 PHP
php中bind_param()函数用法分析
2017/03/28 PHP
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
2012/01/15 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
2013/04/02 Javascript
B/S模式项目中常用的javascript汇总
2013/12/17 Javascript
js中的getAttribute方法使用示例
2014/08/01 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
2014/12/19 Javascript
AngularJS单选框及多选框实现双向动态绑定
2016/01/13 Javascript
基于JavaScript实现购物网站商品放大镜效果
2016/09/06 Javascript
JavaScript模块化之使用requireJS按需加载
2017/04/12 Javascript
NodeJS 实现手机短信验证模块阿里大于功能
2017/06/19 NodeJs
element-ui使用导航栏跳转路由的用法详解
2018/08/22 Javascript
Vue.js实现的购物车功能详解
2019/01/27 Javascript
vue基于viewer实现的图片查看器功能
2019/04/12 Javascript
JavaScript函数重载操作实例浅析
2020/05/02 Javascript
JQuery省市联动效果实现过程详解
2020/05/08 jQuery
在react项目中使用antd的form组件,动态设置input框的值
2020/10/24 Javascript
python通过装饰器检查函数参数数据类型的方法
2015/03/13 Python
举例讲解Python中的死锁、可重入锁和互斥锁
2015/11/05 Python
python timestamp和datetime之间转换详解
2017/12/11 Python
python实现验证码识别功能
2018/06/07 Python
pytorch 实现cross entropy损失函数计算方式
2020/01/02 Python
CSS3实现类似翻书效果的过渡动画的示例代码
2019/09/06 HTML / CSS
html5实现完美兼容各大浏览器的播放器
2014/12/26 HTML / CSS
Canvas实现贝赛尔曲线轨迹动画的示例代码
2019/04/25 HTML / CSS
Canvas高级路径操作之拖拽对象的实现
2019/08/05 HTML / CSS
印度尼西亚值得信赖的第一家网店:Bhinneka
2018/07/16 全球购物
sleep()方法和wait()方法的区别是什么
2012/11/17 面试题
入党自我鉴定范文
2013/10/04 职场文书
股权转让意向书
2014/04/01 职场文书
生日寄语大全
2014/04/08 职场文书
逃课检讨书范文
2015/05/06 职场文书
2019年汽车租赁合同范本!
2019/08/12 职场文书