细节叙述见以下链接:https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

1 基本概念: 

WindowOrWorkerGlobalScope.fetch()用于获取资源的方法。

Headers表示响应/请求标头,允许您查询它们并根据结果采取不同的操作。

Request表示资源请求。

Response表示对请求的响应。

2. Fetch API

Fetch API 包含一组类和方法,用来简化 HTTP 请求。其中包含以下方法和类:

  • fetch 方法:用于发起 HTTP 请求
  • Request 类:用来描述请求
  • Response 类:用来表示响应
  • Headers 类:用来表示 HTTP 头部信息。

基本用法

fetch 接受一个 url 作为参数,发起 GET 请求,返回 Promise ,请求成功后将返回结果封装为一个 Response 对象,该对象上具有一些方法(比如 json 方法),调用 json 方法后同样返回一个 Promise 对象,并用解析 json 字符串得到的对象来 resolve。

 fetch('https://api.github.com/repos/facebook/react').then(function(res){
return res.json();
}).then(function(data){
console.log(data)
});

fetch 方法

fetch 方法有两种调用方法,第一个参数可以是一个 Request 对象,也可以是一个简单的 url,第二个参数是可选参数,包含一些配置信息。

Promise fetch(String url [, Object options]);
Promise fetch(Request req [, Object options]);

可选的配置信息可以一个简单对象,可以包含下列字段:

  • method: 请求的方法, 比如: GET, POST
  • headers:请求头部信息,可以是一个 Headers 对象的实例,也可以是一个简单对象
  • body: 任何希望发送的信息,可以是 Blob, BufferSource, FormData, URLSearchParams, 或者 USVString。需要注意的是 GET 和 HEAD 方法不能包含 body。
  • mode:请求的模式,可以取这几个值:cors, no-cors, same-origin, navigate
    • same-origin:只允许同源的请求,否则直接报错
    • cors:允许跨域,但也要要求响应中 Access-Control-Allow-Origin 这样的头部信息表示允许跨域,响应中只有部分头部信息可以读取,但响应内容可以不受限地读取。
    • no-cors:只允许使用 HEAD、 GET 和 POST 方法,且 JavaScript 不允许访问 response 中的内容。ServiceWorkers 拦截了这些请求,它不能随意添加或者改写任何headers。
    • navigate:用于支持页面导航。通常使用不到。
  • credentials:表示是否发送 cookie,有三个可选值 omit, same-origin, includecache:表示处理缓存的策略,关于此可以参考 https://fetch.spec.whatwg.org
    • omit:不发生 cookie
    • same-origin: 仅在同源时发生 cookie
    • include:发送 cookie
  • redirect:发生重定向时候的策略。有以下可选值:referrer: 一个字符串,可以是 no-referrer, client, 或者是一个 URL。默认值是 client。
    • follow:跟随
    • error:发生错误
    • manual:需要用户手动跟随
  • integrity:包含一个用于验证子资源完整性的字符串。关于此,可以参看 Subresource Integrity 介绍

该函数返回一个 Promise 对象,若请求成功会用 Response 的实例作为参数调用 resolve ,若请求失败会用一个错误对象来调用 reject。

Headers 类

Headers 类用来表示 HTTP 的头部信息,其构造函数可以接受一个表示 HTTP 头信息的对象,也可以接受一个 Headers 类的实例作为对象:

 var header1 = new Headers({
'Content-Type': 'image/jpeg',
'Accept-Charset': 'utf-8'
}); var header2 = new Headers(header1);

Headers 实例的方法

append

对一个字段追加信息,如果该字段不存在,就创建一个。

 var header = new Headers();
header.append('Accept-Encoding', 'deflate');
header.append('Accept-Encoding', 'gzip');
// Accept-Encoding: ['deflate', 'gzip']
delete

删除某个字段

get

获得某个字段的第一个值

var header = new Headers();
header.append('Accept-Encoding', 'deflate');
header.append('Accept-Encoding', 'gzip'); header.get('Accept-Encoding'); //=> 'deflate'
getAll

获得某个字段所有的值

var header = new Headers();
header.append('Accept-Encoding', 'deflate');
header.append('Accept-Encoding', 'gzip'); header.getAll('Accept-Encoding'); //=> ['deflate', 'gzip']
has

判断是否存在某个字段

set

设置一个字段,如果该字段已经存在,那么会覆盖之前的。

forEach

遍历所有的字段,接受一个回调函数,和可选的第二个参数。可选的第二个参数地值作为回调函数的 this 值。

var header = new Headers();
header.append('Accept-Encoding', 'deflate'); header.forEach(function(value, name, header){
//...
},this);

Request 类

Request 对象用于描述请求内容。构造函数接受的参数和 fetch 函数的参数形式一样,实际上 fetch 方法会使用传入的参数构造出一个 Request 对象来。

下面例子从 github 抓取到 react 的 star 数并打印出来。

var req = new Request('https://api.github.com/repos/facebook/react',{
method:'GET'
}); fetch(req).then(function(res){
return res.json()
}).then(function(data){
console.log(data.stargazers_count)
});

Request 实例的属性

以下属性均为只读属性。这些属性的意义均在上面介绍 fetch 的参数的时候有过说明。

  • method
  • url
  • headers
  • referrer
  • referrerPolicy:处理来源信息的策略,关于此可以参见Referrer Policy
  • mode
  • credentials
  • redirect
  • integrity
  • cache

Response 类

Response 用来表示 HTTP 请求的响应。其构造函数形式如下:

var res = new Response(body, init);

其中 body 可以是:

  • Blob
  • BufferSource
  • FormData
  • URLSearchParams
  • USVString

init 是一个对象,其中包括以下字段:

  • status:响应的状态码,比如 200,404
  • statusText:状态信息,比如 OK
  • headers: 头部信息,可以是一个对象,也可以是一个 Headers 实例

Response 实例属性

以下属性均为只读属性

  • bodyUsed:用于表示响应内容是否有被使用过
  • headers:头部信息
  • ok:表明请求是否成功,当响应的状态码是 200~299 时,该值为 true
  • status:状态码
  • statusText:状态信息
  • type:表明了响应的类型,可能是下面几种值:url:响应的地址
    • basic: 同源
    • cors:跨域
    • error:出错
    • opaque:Request 的 mode 设置为 “no-cors” 的响应

方法

  • clone:复制一个响应对象

要想从 Response 的实例中拿到最终的数据需要调用下面这些方法,这些方法都返回一个 Promise 并且使用对应的数据类型来 resolve。

  • arrayBuffer:把响应数据转化为 arrayBuffer 来 resolve
  • blob:把响应数据转换为 Blob 来 resolve
  • formData:把响应数据转化为 formData 来 resolve
  • json:把响应数据解析为对象后 resolve
  • text:把响应数据当做字符串来调用 resolve

总结

最后在把上面使用例子进行一个细致的说明:

 // 构造出 Request 对象
var req = new Request('https://api.github.com/repos/facebook/react',{
method:'GET'
}); // 发起请求,fetch 方法返回一个 Promise 对象
fetch(req).then(function(res){
// 得到了 response,这里调用 response 的 json 方法
// 该方法同样返回一个 Promise
return res.json();
}).then(function(data){
// 得到解析后的对象
console.log(data.stargazers_count)
});

JS之Fetch的更多相关文章

  1. js Promise fetch demo

    <html> <head> <title></title> </head> <body> </body> <s ...

  2. 来,我们手写一个简易版的mock.js吧(模拟fetch && Ajax请求)

    预期的mock的使用方式 首先我们从使用的角度出发,思考编码过程 M1. 通过配置文件配置url和response M2. 自动检测环境为开发环境时启动Mock.js M3. mock代码能直接覆盖g ...

  3. 新手级配置 react react-router4.0 redux fetch sass

    前言 最近公司来了几个实习生,刚好我手头没什么要紧事,然后领导让我带他们学习react, 为下一个react项目做基础. 然后随手写了几个demo,帮助他们了解正经项目如何去构建配置项目. 现在分享出 ...

  4. fetch get方法的时候报错

    fetch 报错 Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have body. 翻译过来就 ...

  5. 使用fetch出现unexpected end of input 解决方法

    传统的ajax(即xmlhttprequest)由于使用叫复杂,于是js新推出了fetch来获取后台数据,无需引进jq的$.ajax,也可以使用promise的链式用法去处理回调地狱,着实很方便,在谷 ...

  6. 使用 Polyfill 而不再是 bable 来实践js新特性

    现状 我们想要用ES6 语法来写 JavaScript.然而由于我们需要兼容老版本的浏览器,那些浏览器不支持 ES6,我们需要解决这个问题. 有一个标准的做法是:写 ES6 代码 → 将所有代码编译成 ...

  7. Vue.js(五)

    前后端交互概述与URL地址格式 JS中常见的异步调用: 定时任务 ajax 事件函数 接口调用方式: 原生ajax 基于jQuery的ajax fetch axios url 地址格式: 传统的url ...

  8. 用ES6和fetch封装网络请求

    导读: fetch: 这个方法是ES2017中新增的特性,这个特性出来后给人一种传统ajax已死的感觉,其实它的作用是替代浏览器原生的XMLHttpRequest异步请求,我们在日常的开发中,基本不会 ...

  9. 鸿蒙系统应用开发之JS实现一个简单的List

    在之前的文章鸿蒙应用开发之怎么更好的远程连接手表模拟器做调试里我运行了一个穿戴设备的应用,利用JS UI实现了一个最简单的HelloWorld. 今天我打算在智慧屏设备上利用豆瓣音乐的接口数据实现一个 ...

随机推荐

  1. 字符串分割(C++)(转载)

    转载出自:http://www.cnblogs.com/MikeZhang/archive/2012/03/24/MySplitFunCPP.html 经常碰到字符串分割的问题,这里总结下,也方便我以 ...

  2. JS高级语法与JS选择器

    元素(element)和节点(node) childNode属性和children属性的区别 <!DOCTYPE html> <html lang="en"> ...

  3. excel在msdn上的说明文档

    Microsoft.Office.Tools.Excel.Worksheet 对象提供和 Excel 主互操作程序集中的 Microsoft.Office.Interop.Excel.Workshee ...

  4. [BZOJ2208][Jsoi2010]连通数 暴力枚举

    Description Input 输入数据第一行是图顶点的数量,一个正整数N. 接下来N行,每行N个字符.第i行第j列的1表示顶点i到j有边,0则表示无边. Output 输出一行一个整数,表示该图 ...

  5. 全面理解虚拟DOM,实现虚拟DOM

    1.为什么需要虚拟DOM DOM是很慢的,其元素非常庞大,页面的性能问题鲜有由JS引起的,大部分都是由DOM操作引起的.如果对前端工作进行抽象的话,主要就是维护状态和更新视图:而更新视图和维护状态都需 ...

  6. 如何加速tomcat启动速度

    在tomcat启动的时候,我们可以做一些优化设置来使得tomcat的启动更快速,下面是一些常见的优化加速启动的方法建议(以tomcat-7.+为例说明). 1.  Jars包 1.1.将一些不必要的j ...

  7. NS3 实验脚本的编写步骤

    第一步:配置主机,安装模块 (1)创建N个节点: NodeContainer nodes; nodes.Creat(N); 比如我目前接触到的PointToPoint,N就是2 (2)利用拓扑助手He ...

  8. BFS-迷宫问题-用宽度(广度)优先搜索解决最优路径问题

    题目: 给定一个大小为 N×M 的迷宫.迷宫由通道和墙壁组成,每一步可以向邻接的上下左右四格 的通道移动.请求出从起点到终点所需的最小步数.请注意,本题假定从起点一定可以移动 到终点. 限制条件;N, ...

  9. Python的替换函数——replace(),strip(),和re.sub()

    在Python中常用的三个"替换"函数是strip(),replace()和re.sub(),下面来讲讲这三个函数的用法. 一.replace() 基本用法:对象.replace( ...

  10. Java中如何实现类似C++结构体的二级排序

    1:实现Comparable接口 import java.util.ArrayList; import java.util.Arrays; import java.util.Collections; ...