在前端快速发展地过程中,为了契合更好的设计模式,产生了 fetch 框架,此文将简要介绍下 fetch 的基本使用。
我的源博客地址:http://blog.parryqiu.com/2016/03/02/using_fetch_in_nodejs/

在 AJAX 时代,进行请求 API 等网络请求都是通过 XMLHttpRequest 或者封装后的框架进行网络请求。
现在产生的 fetch 框架简直就是为了提供更加强大、高效的网络请求而生,虽然在目前会有一点浏览器兼容的问题,但是当我们进行 Hybrid App 开发的时候,如我之前介绍的 IonicReact Native,都可以使用 fetch 进行完美的网络请求。

1. fetch 初体验

在 Chrome 浏览器中已经全局支持了 fetch 函数,打开调试工具,在 Console 中可以进行初体验。
先不考虑跨域请求的使用方法,我们先请求同域的资源,如在我的博客页面中,打开 Console 进行如下请求。

fetch("http://blog.parryqiu.com").then(function(response){console.log(response)})

返回的数据:

这样就很快速地完成了一次网络请求,我们发现返回的数据也比之前的 XMLHttpRequest 丰富、易用的多。

2. 关于 fetch 标准概览

虽然 fetch 还不是作为一个稳定的标准发布,但是在其一直迭代更新的 标准描述 中,我们发现已经包含了很多的好东西。
fetch 支持了大部分常用的 HTTP 的请求以及和 HTTP 标准的兼容,如 HTTP Method,HTTP Headers,Request,Response。

3. fetch 的使用

3.1 兼容浏览器的处理

可以通过下面的语句处理浏览器兼容的问题。

if(self.fetch) {
    // 使用 fetch 框架处理
} else {
    // 使用 XMLHttpRequest 或者其他封装框架处理
}

3.2 一般构造请求的方法

使用 fetch 的构造函数请求数据后,返回一个 Promise 对象,处理即可。

fetch("http://blog.parryqiu.com")
.then(function(response){
   // do something...
})

3.3 fetch 构成函数的其他选项

我们可以将于 HTTP Headers 兼容的格式加入到请求的头中,如每次 API 的请求我们想不受缓存的影响,那么可以像下面这样请求:

fetch("http://blog.parryqiu.com", {
    headers: {
        'Cache-Control': 'no-cache'
    }
})
.then(function(response){
   // do something...
})

具体的可选参数可以查看 这里
如我们还可以这样使用:

var myHeaders = new Headers();
myHeaders.append("Content-Type", "text/plain");
myHeaders.append("Content-Length", content.length.toString());
myHeaders.append("X-Custom-Header", "ProcessThisImmediately");

var myInit = {
                method: 'GET',
                headers: myHeaders,
                mode: 'cors',
                cache: 'default'
             };

fetch("http://blog.parryqiu.com", myInit)
.then(function(response){
    // do something...
})

3.4 返回的数据结构

在请求后的 Response 中,具体的定义在 这里
常用的有:

  • Response.status 也就是 StatusCode,如成功就是 200
  • Response.statusText 是 StatusCode 的描述文本,如成功就是 OK
  • Response.ok 一个 Boolean 类型的值,判断是否正常返回,也就是 StatusCode 为 200-299

做如下请求:

fetch("http://blog.parryqiu.com")
.then(function(response){
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.ok);
})

返回的数据:

3.5 Body 参数

因为在 Request 和 Response 中都包含 Body 的实现,所以包含以下类型:

  • ArrayBuffer
  • ArrayBufferView (Uint8Array and friends)
  • Blob/File
  • string
  • URLSearchParams
  • FormData

在 fetch 中实现了对应的方法,并返回的都是 Promise 类型。

这样处理返回的数据类型就会变的特别地方便,如处理 json 格式的数据:

var myRequest = new Request('http://api.com/products.json');

fetch(myRequest).then(function(response) {
  return response.json().then(function(json) {
    for(i = 0; i < json.products.length; i++) {
      var name = json.products[i].Name;
      var price = json.products[i].Price;
      // do something more...
    }
  });
});

4. 浏览器兼容

目前项目给出的浏览器支持如下图,可以通过上面介绍的浏览器兼容处理办法解决此问题,不过相信很快就不需要考虑兼容问题了,在 Hybrid App 开发中使用基本没有问题,因为基本都是基于 Node.js 进行开发的。

5. 结语

这里是一个格式更好的文档,比标准描述的页面更加清晰,供参考。
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
在使用 React Native 开发 App 的时候接触到了 fetch,发现的确非常方便高效,框架的设计模式也非常清晰灵活,更多的细节可以查阅相关文档,有什么问题可以留言讨论交流。

在 JS 中使用 fetch 更加高效地进行网络请求的更多相关文章

  1. 微信小程序------MD5加密(支持中文和不支持中文)和网络请求(get和post)

    开发中常常遇到MD5加密,最近做小程序也用到了,简单总结了一下: 这要有两个加密文件,一个不支持中文,一个支持,所以你选择支持的来用就行了: 也随便说说小程序的get和post网络请求. 来看看效果图 ...

  2. 学习Android过程中遇到的问题及解决方法——网络请求

    在学习Android的网络连接时遇到崩溃或异常(出现的问题就这两个,但是不稳定)的问题,先上代码,看看哪里错了(答案在文末) activity_main.xml: <?xml version=& ...

  3. React Native探索(五)使用fetch进行网络请求

    相关文章 React Native探索系列 前言 React Native可以使用多种方式来请求网络,比如fetch.XMLHttpRequest以及基于它们封装的框架,fetch可以说是替代XMLH ...

  4. 【jQuery】JS中拼接URL发送GET请求的中文、特殊符号的问题

    > 参考的优秀文章 jQuery ajax - param() 方法 经常,我们需要在JS中拼接URL然后以GET形式提交请求.如果遇到中文.特殊符号则需要作各种处理. jQuery有一个方法非 ...

  5. 在React Native中,使用fetch网络请求 实现get 和 post

    //在React Native中,使用fetch实现网络请求 /* fetch 是一个封装程度更高的网络API, 使用了Promise * Promise 是异步编程的一种解决方案 * Promise ...

  6. JS中实现跨域的方法总结

    今天早上在地铁看了点基础知识的考察题,看到了一个JS跨域的问题,仔细想了想自己脑子里竟然只剩下jsonp跨域和用nginx反向代理进行跨域,想着还有别的几种方法,就是想不起来,这个人呢,一上岁数这个脑 ...

  7. fetch网络请求 get 和 post

    //在React Native中,使用fetch实现网络请求 /* fetch 是一个封装程度更高的网络API, 使用了Promise* Promise 是异步编程的一种解决方案* Promise 对 ...

  8. React Native 网络请求封装:使用Promise封装fetch请求

    最近公司使用React作为前端框架,使用了异步请求访问,这里做下总结: React Native中虽然也内置了XMLHttpRequest 网络请求API(也就是俗称的ajax),但XMLHttpRe ...

  9. js中apply方法的使用

    js中apply方法的使用   1.对象的继承,一般的做法是复制:Object.extend prototype.js的实现方式是: Object.extend = function(destinat ...

随机推荐

  1. Kooboo CMS - Html.FrontHtml.Position 详解

    DataContract 数据契约 http://www.cnblogs.com/Gavinzhao/archive/2010/06/01/1748736.html https://msdn.micr ...

  2. ubuntu 12.04 安装wireshark

    轉載自http://blog.chinaunix.net/uid-27064719-id-3786626.html 在ubuntu 12.04下安装wireshark软件之后,打开wireshark开 ...

  3. (转)新手必看:HighCharts几个基础问答

    转自:http://bbs.hcharts.cn/article-21-1.html

  4. android在Data目录内置可删除的APP

    一.准备工作:make_ext4fs.mkuserimg.sh.simg2img,把它们跟要修改的 .img.ext4(或.img)文件放置到同一个目录下 二.转换源文件为img格式( .img则略过 ...

  5. vmware产品

    https://my.vmware.com/cn/group/vmware/info?slug=datacenter_cloud_infrastructure/vmware_vsphere/5_5#o ...

  6. SpringMVC框架三:参数绑定

    这篇文章整合了SpringMVC和MyBatis: https://www.cnblogs.com/xuyiqing/p/9419144.html 接下来看看参数绑定: 默认Conrtroller可以 ...

  7. rest-framework之认证组件

    认证组件 认证简介 作用:校验是否登录 首先定义一个类,集成BaseAuthentication,写一个方法:authenticate,在方法内部,实证过程,认证通过,返回None或者两个对象(use ...

  8. 高品质的JavaScript

    整理书籍内容(QQ:283125476 发布者:M [重在分享,有建议请联系->QQ号]) 养成良好的编程习惯 ##如何避免团队JS冲突 * 避免实用全局变量[可使用匿名函数进行处理]以避免全局 ...

  9. Android四大组件-服务

    Android服务 android 的服务有点类似windows的服务,没有界面,在后台长时间运行,如果我们这种需求的话我们就可以使用服务来实现. 服务的典型应用场景: 播放音乐,下载等,如果要在一个 ...

  10. BusyBox getty

    linux的登录主要是由两个文件在控制,/usr/sbin/getty来获得用户名,并进行检查用户名是否存在,然后将用户名传递给/usr/bin/login来获取用户输入密码和检查密码是否正确. 所以 ...