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 相关文章推荐
js读取cookie方法总结
Oct 31 Javascript
使用百度地图api实现根据地址查询经纬度
Dec 11 Javascript
javascript事件冒泡实例分析
May 13 Javascript
微信小程序 loading(加载中提示框)实例
Oct 28 Javascript
js移动焦点到最后位置的简单方法
Nov 25 Javascript
js中string和number类型互转换技巧(分享)
Nov 28 Javascript
前端把html表格生成为excel表格的实例
Sep 19 Javascript
Node.js爬取豆瓣数据实例分析
Mar 05 Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
Mar 26 Javascript
简单的三步vuex入门
May 20 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
Jul 23 Javascript
解决vue项目axios每次请求session不一致的问题
Oct 24 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调用Linux的命令行执行文件压缩命令
2013/01/27 PHP
解析PHP多种序列化与反序列化的方法
2013/06/06 PHP
php控制文件下载速度的方法
2015/03/24 PHP
Yii模型操作之criteria查找数据库的方法
2016/07/15 PHP
JQury slideToggle闪烁问题及解决办法
2011/07/05 Javascript
JavaScript地图拖动功能SpryMap的简单实现
2013/07/17 Javascript
Seajs的学习笔记
2014/03/04 Javascript
js验证IP及子网掩码的合法性有效性示例
2014/04/30 Javascript
Javascript快速排序算法详解
2014/12/03 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
2015/09/06 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
2015/12/08 Javascript
jquery表单插件Autotab使用方法详解
2016/06/24 Javascript
JavaScript中的对象和原型(一)
2016/08/12 Javascript
获取select的value、text值的简单示例(jquery与javascript)
2016/12/07 Javascript
vue2的todolist入门小项目的详细解析
2017/05/11 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
2017/08/14 Javascript
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
2018/03/02 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
2018/03/03 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
2018/09/04 Javascript
VUE实现自身整体组件销毁的示例代码
2020/01/13 Javascript
Vue的自定义组件不能使用click方法的解决
2020/07/28 Javascript
vue+iview分页组件的封装
2020/11/17 Vue.js
由浅入深讲解python中的yield与generator
2017/04/05 Python
python交互式图形编程实例(三)
2017/11/17 Python
Pycharm 操作Django Model的简单运用方法
2018/05/23 Python
python中实现控制小数点位数的方法
2019/01/24 Python
在VS2017中用C#调用python脚本的实现
2019/07/31 Python
matplotlib quiver箭图绘制案例
2020/04/17 Python
django中嵌套的try-except实例
2020/05/21 Python
python工具快速为音视频自动生成字幕(使用说明)
2021/01/27 Python
利用HTML5 Canvas API绘制矩形的超级攻略
2016/03/21 HTML / CSS
Kiehl’s科颜氏西班牙官方网站:源自美国的植物护肤品牌
2020/02/22 全球购物
秋季开学典礼主持词
2014/03/19 职场文书
个人收入证明模板
2014/09/18 职场文书
体育教师个人工作总结
2015/02/09 职场文书