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 删除字符串空格多种方法小结
Oct 24 Javascript
jCallout 轻松实现气泡提示功能
Sep 22 Javascript
使用js写的一个简易的投票
Nov 27 Javascript
使用js获取图片原始尺寸
Dec 03 Javascript
jquery马赛克拼接翻转效果代码分享
Aug 24 Javascript
node.js基于mongodb的搜索分页示例
Jan 22 Javascript
妙用Angularjs实现表格按指定列排序
Jun 23 Javascript
JavaScript实现开关等效果
Sep 08 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
Sep 10 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
Dec 04 Javascript
angularJs中$scope数据序列化的实例
Sep 30 Javascript
Vue中axios拦截器如何单独配置token
Dec 27 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
短波的认识
2021/03/01 无线电
深入PHP中慎用双等于(==)的详解
2013/06/06 PHP
对PHP语言认识上需要避免的10大误区
2014/06/12 PHP
PHP的Yii框架中YiiBase入口类的扩展写法示例
2016/03/17 PHP
php和js实现根据子网掩码和ip计算子网功能示例
2019/11/09 PHP
JS加jquery简单实现标签元素的显示或隐藏
2013/09/23 Javascript
js克隆对象、数组的常用方法介绍
2013/09/26 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
2013/11/21 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
jquery实现倒计时功能
2015/12/28 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
2017/02/15 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
2017/03/03 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
2017/05/11 Javascript
angular实现图片懒加载实例代码
2017/06/08 Javascript
javascript 中select框触发事件过程的分析
2017/08/01 Javascript
JS实现登录页密码的显示和隐藏功能
2017/12/06 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
2018/03/23 Javascript
js中对象和面向对象与Json介绍
2019/01/21 Javascript
JavaScript对象原型链原理解析
2020/01/22 Javascript
JavaScript对象字面量和构造函数原理与用法详解
2020/04/18 Javascript
[32:26]EG vs IG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python解决字典中的值是列表问题的方法
2013/03/04 Python
简单谈谈Python中的反转字符串问题
2016/10/24 Python
Python实现简易过滤删除数字的方法小结
2019/01/09 Python
pandas 选取行和列数据的方法详解
2019/08/08 Python
10个Python面试常问的问题(小结)
2019/11/20 Python
Python unittest工作原理和使用过程解析
2020/02/24 Python
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
2016/03/15 HTML / CSS
物流创业计划书
2014/02/01 职场文书
大四学生找工作的自荐信
2014/03/27 职场文书
维护民族团结演讲稿
2014/08/27 职场文书
投标邀请书范本
2015/02/02 职场文书
励志语录:你若不勇敢,谁替你坚强
2019/11/08 职场文书
Python一行代码实现自动发邮件功能
2021/05/30 Python
springboot 全局异常处理和统一响应对象的处理方式
2022/06/28 Java/Android