fetch api 浅谈

作者:巫枫

fetch api浅谈

作为传说中的xhr替代品,现在fetch api已经被开始在一些前端项目中使用了,比如阿里的一些产品已经将jq的ajax模块切换到fetch下了。个人感觉fetch api会渐渐替代xhr成为主流。

什么是fatch api呢,我们来看个例子。

1、简单使用

var myImage = document.querySelector('img');

fetch('flowers.jpg').then(function(response) {
  return response.blob();
}).then(function(myBlob) {
  var objectURL = URL.createObjectURL(myBlob);
  myImage.src = objectURL;
}).catch(e) {
    // throw e
};

怎么样,是不是很直观的了解了fetch api的使用,从上例中我们可以看出两点:

1、fetch api返回的是一个promise对象,使用es7提供的async/await特性,可以改写为

var myImage = document.querySelector('img');

async function fetchDemo() {
  try {
      const response = await fetch('flowers.jpg');
      const blob = await response.blob()
      const objectURL = URL.createObjectURL(blob);
      myImage.src = objectURL;
  } catch(e) {
      // throw e
  }
};

fetchDemo();

    这样看起来是不是爽多了,只是现在这个特性还只是在草案中,虽然babel已经可以支持了。

2、第一个then函数里面处理的是response的格式,这里的response具体返回如下:

可见response对象提供了多种转换格式的方式,用于将返回值的类型转换为blob,json,也可以使用clone等方法,这里就不赘述了。

response的状态和返回数据也可以从ok,status,statusText等对象中获取到,还能直接读取到返回值的Headers信息。

2、综合使用

fetch作为替换xhr的api,需要足够底层,这样,就需要支持各种场景的使用。下面是一些综合使用示例。

a)头部和请求构造
// 头部构造,使用Header类
let myHeaders = new Headers()
myHeaders.append("Content-Type", "text/plain");

const params = {
  method: 'GET',
  headers: myHeaders,
  mode: 'cors',
  cache: 'default',
  credentials: 'include' // 这个很重要,当值为include时才会带cookies请求
};

// 传参
fetch('flowers.jpg', params);

// 如果需要复用请求的参数和头部等对象,可以采用Request Class
const myRequest = new Request('flowers.jpg', params);
fetch(myRequest);
b)请求参数(body)构造

fetch api是使用通过构造body部分直接进行的,可构造的类型为

  • arrayBuffer()
  • blob()
  • json()
  • text()
  • formData()
fetch("/api", {
  method: "POST",
  body: new FormData(document.getElementById('xx'))
});

3、使用中需要知道的

a)兼容性

如caniuse所示,fetch的在ie上全军覆没,在其他很多浏览器上也有各种问题,所以,这里推荐使用fetch polyfill

fetch polyfile fetch-jsonp polyfile

b)cookies传递

必须在header参数里面加上 credentials: ‘include’配置,才会如xhr一样将当前cookies带到请求中去

c)fetch和xhr的不同

fetch虽然底层,但是还是缺少一些常用xhr有的方法,比如能够取消请求(abort方法)。

fetch在服务器返回4xx, 5xx请求时是不会抛出错误的,这里需要手动通过,response中的ok字段和status字段来做判断

4、展望

    xhr盛行多年,fetch api从写法上给前端带来了一些新的想法,这无疑是好的。同时,我也相信,前端慢慢会出现类似的fetch包装库,方便大家使用吧

5、参考

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏FreeBuf

企业壳的反调试及Hook检测分析

*本文原创作者:y0nLandroid,本文属FreeBuf原创奖励计划,未经许可禁止转载 1.写在开始 最近在学习梆梆壳,在调试的过程中遇到了反调试,很是苦恼...

3568
来自专栏FreeBuf

WireShark+Winhex:流量分析的好搭档

这篇文章你将学会的知识点有 1、进阶的wireshark的流量分析、解码、追踪流、导出文件 2、利用hackbar进行base64、URL编码转换 3、利用wi...

8586
来自专栏Golang语言社区

Go-简洁的并发

多核处理器越来越普及。有没有一种简单的办法,能够让我们写的软件释放多核的威力?是有的。随着Golang, Erlang, Scala等为并发设计的程序语言的兴起...

45012
来自专栏owent

对atbus的小数据包的优化

atbus是我按之前的思路写得服务器消息通信中间件,目标是简化服务器通信的流程,能够自动选择最优路线,自动的断线重连和通信通道维护。能够跨平台并且高效。

1042
来自专栏小灰灰

Quick-Task 动态脚本支持框架之结构设计篇

文章链接:https://liuyueyi.github.io/hexblog/2018/07/23/180723-Quick-Task-动态脚本支持框架之结构...

1143
来自专栏北京马哥教育

史上最全 Python 爬虫抓取的技巧总结

学用python也有3个多月了,用得最多的还是各类爬虫脚本:写过抓代理本机验证的脚本,写过在discuz论坛中自动登录自动发贴的脚本,写过自动收邮件的脚本,写过...

4445
来自专栏NetCore

一个让人遗忘的角落—Exception(三)

最近有点事,把这个系列给落下了,给大家道个歉,这里还要感谢我的老婆,谢谢她一直对我的支持:) 系列回顾: 1.一个被人遗忘的角落—Exception(一) 2...

2176
来自专栏落影的专栏

求职笔记-iOS篇

前言 今年年初求职时,整理、回顾了学习iOS开发以来收获的知识,此篇为当时的笔记。 插一段我对面试的看法。 公司要在短短的几个小时内要详细了解求职者,并且求...

3786
来自专栏安富莱嵌入式技术分享

【二代示波器教程】第13章 RTX操作系统版本二代示波器实现

本章教程为大家讲解RTX操作系统版本的二代示波器实现。主要讲解RTOS设计框架,即各个任务实现的功能,任务间的通信方案选择,任务栈,系统栈以及全局变量共享问题。...

1752
来自专栏landv

c语言_代码段_快说你是猪

4923

扫码关注云+社区

领取腾讯云代金券