在前端快速发展地过程中,为了契合更好的设计模式,产生了 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中高效拼接字符串

    写在前面 面试的过程,很有可能面试到c#那种方式拼接字符串更高效,然后就会引申到js中的拼接方式.这也是我在面试中遇到的问题,当时,也真没比较过js中到底哪种方式更高效.然后,跟猜测一样,说了使用数组 ...

随机推荐

  1. 【Spring】Spring系列6之Spring整合Hibernate

    6.Spring整合Hibernate 6.1.准备工作 6.2.示例 com.xcloud.entities.book com.xcloud.dao.book com.xcloud.service. ...

  2. Windows 内存架构

    理解 Virtual Memory, Physical Memory, Committed Memory, Page File, Working Set, Modified Pages, Standb ...

  3. 怎么用EDIUS实现跟踪马赛克效果

    我们经常会在一些新闻的视频中看到一些马赛克,这些马赛克一般都是保护人物的隐私权,肖像权什么的.我们时常也会看到即使人物位置发生了变化,被遮挡的地方依旧还是被遮挡住,一点也不用担心因为人物运动而使马赛克 ...

  4. 编码神器之sublime(插件安装)

    一款优秀的编辑器是程序员的左膀右臂,相信每一个程序员手边都有自己熟悉的编辑器. 从一开始使用sublime的时候就开始喜欢上了这款编辑器,被他强大的功能深深的吸引了. sublime的强大来源于他的扩 ...

  5. 深入理解JAVA多态原理

    之前一直知道多态是什么东西,平时敲代码也经常用到多态,但一直没有真正了解多态底层的运行机制到底是怎么样的,这两天才研究明白点,特地写下来,跟各位同学一起进步,同时也希望各位大神指导和指正. 多态的概念 ...

  6. ThreadLocal的使用 .

    早在Java 1.2推出之时,Java平台中就引入了一个新的支持:java.lang.ThreadLocal,给我们在编写多线程程序时提供了一种新的选择.使用这个工具类可以很简洁地编写出优美的多线程程 ...

  7. Canvas使用渐变之-径向渐变详解

    创建径向渐变使用 createRadialGrdient(x0,y0,r0,x1,y1,r1)​ 一共​六个参数,分别代表: 起点的圆心坐标(第一个和第二个参数), 起点园的半径(第三个参数), 终点 ...

  8. Hadoop 2.2.0 HA构造

    在这篇文章中<Ubuntu和CentOS分布式配置Hadoop-2.2.0>介绍hadoop 2.2.0最主要的配置.hadoop 2.2.0中提供了HA的功能,本文在前文的基础上介绍ha ...

  9. 手機Web頁面信息

    手機瀏覽器的寬度為980px: 使用980px寫頁面時,若是遇到字體變大情況,是因為block或者inline-block沒有設置寬高.設置即顯示正常. 980px設計,禁止手機頁面縮放: <m ...

  10. Selenium定位iframe动态ID

    Selenium定位iframe动态ID. 126邮箱实例 买了本虫师的书来学习selenium2自动化测试,然后写第一个实例就遇到了一些坑,好在有热心的网友提供了帮助,解决了问题 要学习seleni ...