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 相关文章推荐
document.compatMode介绍
May 21 Javascript
javawscript 三级菜单的实现原理
Jul 01 Javascript
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
Nov 04 Javascript
jQuery中unbind()方法用法实例
Jan 19 Javascript
javascript结合fileReader 实现上传图片
Jan 30 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
Aug 24 Javascript
跟我学习javascript的垃圾回收机制与内存管理
Nov 23 Javascript
基于jQuery实现返回顶部实例代码
Jan 01 Javascript
JavaScript中利用构造器函数模拟类的方法
Feb 16 Javascript
node中使用es6/7/8(支持性与性能)
Mar 28 Javascript
JavaScript中var的重要性实例分析
Jul 09 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
Aug 06 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函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2011/07/01 PHP
ThinkPHP实现事务回滚示例代码
2014/06/23 PHP
基于递归实现的php树形菜单代码
2014/11/19 PHP
PHP中COOKIES使用示例
2015/07/26 PHP
Yii实现单用户博客系统文章详情页插入评论表单的方法
2015/12/28 PHP
php实现自定义中奖项数和概率的抽奖函数示例
2017/05/26 PHP
php中的依赖注入实例详解
2019/08/14 PHP
PHP 超级全局变量相关总结
2020/06/30 PHP
php7连接MySQL实现简易查询程序的方法
2020/10/13 PHP
PHP替换Word中变量并导出PDF图片的实现方法
2020/11/26 PHP
js对数字的格式化使用说明
2011/01/12 Javascript
js 页面关闭前的出现提示的实现代码
2011/05/25 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
2013/11/13 Javascript
JavaScript图片轮播代码分享
2015/07/31 Javascript
JavaScript实现点击单元格改变背景色的方法
2016/02/12 Javascript
JQuery在循环中绑定事件的问题详解
2016/06/02 Javascript
原生js实现打字动画游戏
2017/02/04 Javascript
jQuery实现的滑块滑动导航效果示例
2018/06/04 jQuery
详解Node.js 中使用 ECDSA 签名遇到的坑
2018/11/26 Javascript
从vue源码看props的用法
2019/01/09 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
2019/03/04 Javascript
js仿360开机效果
2019/12/26 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
2020/04/30 Javascript
python通过colorama模块在控制台输出彩色文字的方法
2015/03/19 Python
Python中%是什么意思?python中百分号如何使用?
2018/03/20 Python
Python基于更相减损术实现求解最大公约数的方法
2018/04/04 Python
Python3爬虫之自动查询天气并实现语音播报
2019/02/21 Python
简单了解python单例模式的几种写法
2019/07/01 Python
python中return的返回和执行实例
2019/12/24 Python
Python基于opencv的简单图像轮廓形状识别(全网最简单最少代码)
2021/01/28 Python
英国家庭珠宝商:T. H. Baker
2018/02/08 全球购物
迪卡侬中国官网:Decathlon中国
2020/08/10 全球购物
前厅收银主管岗位职责
2014/02/04 职场文书
酒店辞职书范文
2015/02/26 职场文书
就业推荐表院系意见
2015/06/05 职场文书
关于nginx 实现jira反向代理的问题
2021/09/25 Servers