--------------------

fetch |

--------------------

# 语法

fetch(url,options)

# options

credentials

* 默认仨值

"omit", //不发送

"same-origin" //同域发送

"include" //总是发送

* Fetch 请求默认是不带 cookie 的,需要设置 credentials: 'include'

* fetch(url, {credentials: 'include'})

body

* 请求体数据,可以是FormData,URLSearchParams或者字符串

* 如果是GET请求,不允许有该参数

method

* 以字符串形式指定请求方法

headers

* 对象,请求头

mode

* 关于跨域的一些配置

"same-origin"

* 只有来自同域的请求才能成功,其它的均将被拒绝

"cors"

* 允许不同域的请求,但要求有正确的 CORS 头信息

"cors-with-forced-preflight"

* 在执行真正的调用前先执行preflight check

"no-cors"

* 目前这种模式是无法执行的。

cache

* 表示处理缓存的策略

redirect

* 表示发生重定向时,有三个选项

follow 跟随

error: 发生错误

manual 需要用户手动跟随

integrity

* 包含一个用于验证资资源完整性的字符串

# 返回对象是 Promise 对象

fetch('/login') instanceof Promise

# 服务器返回 400,500 错误码时并不会 reject,只有网络错误这些导致请求不能完成时,fetch 才会被 reject

--------------------

Headers |

--------------------

# Headers接口是一个简单的多映射的名-值表

let reqHeaders = new Headers();

reqHeaders.append("Content-Type", "text/plain");

reqHeaders.append("X-Custom-Header", "ProcessThisImmediately");

# 也可以通过构造函数传一个多维数组或者json来创建

reqHeaders = new Headers({

"Content-Type": "text/plain",

"Content-Length": content.length.toString(),

"X-Custom-Header": "ProcessThisImmediately",

});

# Headers对象有一个特殊的 guard 属性

* 这个属性没有暴露给Web,但是它影响到哪些内容可以在Headers对象中被改变

"none" 默认的

"request" 从Request中获得的Headers只读

"request-no-cors" 从不同域的Request中获得的Headers只读

"response" 从Response获得的Headers只读

"immutable" 在ServiceWorkers中最常用的,m所有的Headers都只读

# Headers实例的api

has(key)

* 判断指定的请求头是否存在

set(key,value)

* 设置新的请求头,会覆盖掉同名的

append(key,value)

* 设置新的请求头,如果存在同名,不会覆盖,会添加

get(key)

* 获取指定名称请求头的值

getAll(key)

* 获取指定名称请求头的所有值,返回[]

delete(key)

* 删除指定的请求头

--------------------

Request |

--------------------

# Request接口定义了通过HTTP请求资源的request格式

* 语法

Request(url,options)

* 参数需要

URL

method

headers

* 同时Request也接受一个特定的 body,mode,credentials以及cache hints

var req = new Request("/index.html");

console.log(req.method); // "GET"

console.log(req.url); // "http://example.com/index.html"

# 也可以将一个建好的Request对象传给构造函数,这样将复制出一个新的Request

var copy = new Request(req);

console.log(copy.method); // "GET"

console.log(copy.url); // "http://example.com/index.html"

# URL以外的其他属性的初始值能够通过第二个参数传给Request构造函数

var uploadReq = new Request("/uploadImage", {

method: "POST",

headers: {

"Content-Type": "image/png",

},

body: "image data"

});

# options 参数(跟fetch的options一样)

credentials

* 默认仨值

"omit",

"same-origin"

"include"

* Fetch 请求默认是不带 cookie 的,需要设置 credentials: 'include'

* fetch(url, {credentials: 'include'})

method

* 请求方法

headers

* 请求头,对象

body

* 请求体,可以是字符串,formData,URLSearchParams

mode

* 关于跨域的一些配置

"same-origin"

* 只有来自同域的请求才能成功,其它的均将被拒绝

"cors"

* 允许不同域的请求,但要求有正确的 CORS 头信息

"cors-with-forced-preflight"

* 在执行真正的调用前先执行preflight check

"no-cors"

* 目前这种模式是无法执行的。

# 属性

method

url

# 构造函数接受的参数与fetch方法一致，这里就不展开介绍了

# 可以这么理解，事实上fetch方法在调用时，会将传入的参数构造出一个 Request 对象并执行。

--------------------

Response |

--------------------

# Response有个接收两个可选参数的构造器,第一个参数是返回的body,第二个参数是一个json,设置status、statusText以及headers

# 静态方法Response.error()简单返回一个错误的请求,类似的，Response.redirect(url, status)返回一个跳转URL的请求

# 属性

ok

* 是否成功,根据http状态码决定

bodyUsed

* 是否已经使用过

headers

* 返回 Headers 实例对象

redirected

status

statusText

type

* 类型,枚举字符串值

"basic" 正常的,同域的请求,包含所有的headers除开"Set-Cookie"和"Set-Cookie2"

"cors" Response从一个合法的跨域请求获得,一部分header和body可读。

"error" 网络错误:Response的status是0,Headers是空的并且不可写,当Response是从Response.error()中得到时,就是这种类型

"opaque" Response从"no-cors"请求了跨域资源,依靠Server端来做限制。

"error" 类型会导致fetch()函数的Promise被reject并回调出一个TypeError

url

# 方法

arrayBuffer()

blob()

json()

text()

formData()

* 对响应结果的处理,以上都返回 Promise 对象

--------------------

URLSearchParams |

--------------------

# 表单参数构造器

let u = new URLSearchParams();

u.append('method', 'flickr.interestingness.getList');

u.append('api_key', '<insert api key here>');

u.append('format', 'json');

u.append('nojsoncallback', '1');

u.toString();

//"method=flickr.interestingness.getList&api_key=%3Cinsert+api+key+here%3E&format=json&nojsoncallback=1"

# api

append(k,v)

* 添加kv,不会覆盖,已经存在,则多添加一个键值对

set(k,v)

* 添加kv,同名属性会发生覆盖

toString()

* 返回字符串,就是经过了编码后的表单体

# 实例对象可以直接作为 fetch的options的body属性,或者Request实例的options的body属性

* 会自动添加 ContentType头

--------------------

流和克隆 |

--------------------

# Request和Response的body只能被读取一次,它们有一个属性叫bodyUsed读取一次之后设置为true,就不能再读取了

var res = new Response("one time use");

console.log(res.bodyUsed); // false

res.text().then(function(v) {

console.log(res.bodyUsed); // true

});

console.log(res.bodyUsed); // true

res.text().catch(function(e) {

console.log("Tried to read already consumed Response");

});

# 让body能经得起多次读取,API提供了一个clone()方法

* 调用这个方法可以得到一个克隆对象

* 不过要记得,clone()必须要在读取之前调用,也就是先clone()再读取

addEventListener('fetch', function(evt) {

var sheep = new Response("Dolly");

console.log(sheep.bodyUsed); // false

var clone = sheep.clone();

console.log(clone.bodyUsed); // false

clone.text();

console.log(sheep.bodyUsed); // false

console.log(clone.bodyUsed); // true

evt.respondWith(cache.add(sheep.clone()).then(function(e) {

return sheep;

});

});

--------------------

Demo |

--------------------

let requestBody = new URLSearchParams();

requestBody.set('account','KevinBlandy');

requestBody.set('password','123456');

fetch(new Request('/login',{

method:'POST',

headers:new Headers({

'X-Requested-With':'XMLHttpRequest'

}),

body:requestBody

})).then(function(response){

if(response.ok){

response.json().then(function(rep){

console.log(rep);

});

}

}).catch(function(error){

console.log(error);

});