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 相关文章推荐
模拟电子签章盖章效果的jQuery插件源码
Jun 24 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
Jul 04 Javascript
Three.js获取鼠标点击的三维坐标示例代码
Mar 24 Javascript
微信小程序页面开发注意事项整理
May 18 Javascript
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
vue 监听某个div垂直滚动条下拉到底部的方法
Sep 15 Javascript
JavaScript数组特性与实践应用深入详解
Dec 30 Javascript
vue 实现Web端的定位功能 获取经纬度
Aug 08 Javascript
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
JS页面获取 session 值,作用域和闭包学习笔记
Oct 16 Javascript
webpack.DefinePlugin与cross-env区别详解
Feb 23 Javascript
如何基于jQuery实现五角星评分
Sep 02 jQuery
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函数extension_loaded()用法实例
2015/01/19 PHP
CodeIgniter中使用Smarty3基本配置
2015/06/29 PHP
php中引用&amp;的用法分析【变量引用,函数引用,对象引用】
2016/12/12 PHP
javascript与CSS复习(二)
2010/06/29 Javascript
cument.execCommand()用法深入理解
2012/12/04 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
2014/05/07 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
2014/06/03 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
2014/09/25 Javascript
jQuery原理系列-常用Dom操作详解
2016/06/07 Javascript
Jquery Easyui表单组件Form使用详解(30)
2016/12/19 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
node.js操作mongodb简单示例分享
2017/05/25 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
2017/09/13 Javascript
vue 1.x 交互实现仿百度下拉列表示例
2017/10/21 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
2018/07/23 Javascript
JavaScript数组去重的几种方法
2019/04/07 Javascript
vue element ui validate 主动触发错误提示操作
2020/09/21 Javascript
编写Python脚本来获取mp3文件tag信息的教程
2015/05/04 Python
Pandas 同元素多列去重的实例
2018/07/03 Python
用Python PIL实现几个简单的图片特效
2019/01/18 Python
python实现数据分析与建模
2019/07/11 Python
Python获取当前脚本文件夹(Script)的绝对路径方法代码
2019/08/27 Python
Python 生成一个从0到n个数字的列表4种方法小结
2019/11/28 Python
Python中Flask-RESTful编写API接口(小白入门)
2019/12/11 Python
如何表示python中的相对路径
2020/07/08 Python
OpenCV读取与写入图片的实现
2020/10/13 Python
澳大利亚连衣裙和女装在线:Esther
2017/11/11 全球购物
《童趣》教学反思
2014/02/19 职场文书
低碳生活倡议书
2014/04/14 职场文书
初中升旗仪式演讲稿
2014/05/08 职场文书
建筑工地宣传标语
2014/06/18 职场文书
协商一致解除劳动合同协议书
2014/09/14 职场文书
2016优秀护士求职自荐信
2016/01/28 职场文书
标准演讲稿格式结尾应该怎么书写?
2019/07/17 职场文书
mysql 获取时间方式
2022/03/20 MySQL
MySQL示例讲解数据库约束以及表的设计
2022/06/16 MySQL