Homologous and cross-domain (c) Fetch API

1. Overview

fetch(url/request[, options])
var request = new Request(url/request[, options]);

fetch is a method of globals window
request is a Request object, the same parameters and Request fetch parameter
options is an object, the main key as follows:

method: GET / POST, etc. 
headers: a normal object, or a Headers target 
body: data passed to the server, may be a string / Buffer / Blob / FormData, if the method is GET / HEAD, can not have this parameter 
mode: cors / no-cors / same-origin , whether cross-domain, CORS-default is NO 
Credentials: The omit / Origin-Same, / the include 
Cache: default / NO-Store / reload / NO-Cache / Cache-Force / only-iF-cached 
the redirect: Follow / error / Manual 
the referrer: NO-the referrer / Client / or a URL 
referrerPolicy: the referrer-NO / NO-When-the referrer-downgrade / Origin / Origin-When-Cross-Origin / URL-the unsafe 
integrity: resource integrity verify 
fetch () returns a promise, so use it

Promises fetch API used to process the results / callback


fetch('/some/url').then(function(response) {

.}) the catch ( function ( ERR ) { // an error occurred; then equivalent to the second parameter, but this is more intuitive :( });
    


// chaining, asynchronous single thread becomes similar wording: Advanced Usage
 FETCH ( '/ some / URL' ) .then ( function ( Response ) { return // ... executed successfully, step 1 .. . }). the then ( function ( returnedValue ) { // ... executed successfully, step ... 2 }). the catch ( function ( ERR ) { // an error anywhere midway ... in this process :( } );

2. Headers

// Create an empty Headers objects, note the Headers, not Header 
var headers = new new Headers ();

// add (the append) request header
 headers.append ( 'the Content-the Type' , 'text / Plain' ); 
headers.append ( 'the Custom-X--My-Header' , 'CustomValue' );

Analyzing // (has), obtaining (get), and modifying (set) the request header
 headers.has ( 'the Type-the Content' ); // to true
 headers.get ( 'the Type-the Content' ); // "text / Plain "
 headers.set ( 'the Content-the Type' , 'file application / JSON' );

// delete a message request header (header A)
 headers.delete ( 'the Custom-X--My-Header' );

// Create object initialization setting information 
var headers = new new Headers ({ 'the Type-the Content' : 'text / Plain' , 'X-Header-My-the Custom-' : 'CustomValue' });

Headers object methods:

append(key, value)
delete(key)
entries()  返回一个遍历器，类似二维数组，每一个 key 和它对应的 value 构成一个数组
get(key) 获取指定 key 的value，如果key被添加了多次，则返回第一次添加时的 value
getAll(key) 返回 key 对应的所有 value，组成一个数组
has(key)
keys() 所有 key 组成的遍历器
set(key, value) 更改 key 的值，如果 key 不存在，则相当于 append
values() 所有 value 组成的遍历器

//创建一个 Request 对象来包装请求头(Request Headers)
var request = new Request('/some-url', {
    headers: new Headers({
        'Content-Type': 'text/plain'
    })
});

fetch(request).then(function() { /* handle response */ });

3. Request

Request接口

var request = new Request(url/request[, options]);

Request 对象表示一次 fetch 调用的请求信息。

属性（全部只读）：

method - 支持 GET, POST, PUT, DELETE, HEAD
url - 请求的 URL
headers - 对应的 Headers 对象
referrer - 请求的 referrer 信息
mode - 可以设置 cors, no-cors, same-origin
credentials - 设置 cookies 是否随请求一起发送。可以设置: omit, same-origin
redirect - follow, error, manual
integrity - subresource 完整性值(integrity value)
cache - 设置 cache 模式 (default, reload, no-cache)

示例：

var request = new Request('/users.json', {
    method: 'POST', 
    mode: 'cors', 
    redirect: 'follow',
    headers: new Headers({
        'Content-Type': 'text/plain'
    })
});

// 使用!
fetch(request).then(function() { /* handle response */ });

在 Request 对象创建完成之后, 所有的属性都变为只读属性。一个 Request 就代表一串流(stream), 如果想要传递给另一个 fetch 方法,则需要进行克隆（clone 方法）。

4. Response

Response接口

var response = new Response([body][, init])

Response 代表响应, fetch 的 then 方法接收一个 Response 实例。

属性：

headers     //与响应相关联的 Headers 对象
ok      //Boolean值,代表成功响应。status在 200 和 299 之间为 true
redirected   //表示该Response是否来自一个重定向，如果是的话，它的URL列表将会有多个
status  //状态码 (例如: 200, 404, 等等)
statusText  //状态值(例如: OK)
type    //类型 basic / cors / error / opaque
       
       大专栏  同源和跨域（三）Fetch APIspan>
url     //包含这个请求的URL
bodyUsed  //存储一个Boolean判断主体是否已经被用于一个响应中
useFinalURL  //Boolean 值, 代表 url 是否是最终 URL

方法：

clone() - 创建一个新的 Response 克隆对象.
error() - 返回一个新的,与网络错误相关的 Response 对象.
redirect() - 重定向,使用新的 URL 创建新的 response 对象..
arrayBuffer() - Returns a promise that resolves with an ArrayBuffer.
blob() - 返回一个 promise, resolves 是一个 Blob.
formData() - 返回一个 promise, resolves 是一个 FormData 对象.
json() - 返回一个 promise, resolves 是一个 JSON 对象.
text() - 返回一个 promise, resolves 是一个 USVString (text).

示例：

// 在 service worker 测试中手动创建 response
// new Response(BODY, OPTIONS)
var response = new Response('.....', {
    ok: false,
    status: 404,
    url: '/'
});

// fetch 的 `then` 会传入一个 Response 对象
fetch('/')
    .then(function(responseObj) {
        console.log('status: ', responseObj.status);
    });

5. 处理 JSON响应

封装了 JSON.parse(jsonString)

fetch('https://xxx.json').then(function(response) { 
    // 转换为 JSON
    return response.json();
}).then(function(j) {
    // 现在, `j` 是一个 JavaScript object
    console.log(j); 
});

6. 处理 Text / HTML响应

fetch('/next/page')
  .then(function(response) {
    return response.text();
  }).then(function(text) { 
    // <!DOCTYPE ....
    console.log(text); 
  });

7. 处理Blob结果

Blob表示二进制原始数据，一个Blob对象就是一个包含有只读原始数据的类文件对象。

Blob
File API

创建blob

1. 通过构造函数

var blob = new Blob(dataArr:Array<any>, opt:{type:string});
    
//dataArray：数组，包含了要添加到Blob对象中的数据，数据可以是任意多个ArrayBuffer，ArrayBufferView， Blob，或者 DOMString对象。
//opt：对象，用于设置Blob对象的属性（如：MIME类型）

2. 通过Blob.slice()

Blob.slice(start:number, end:number, contentType:string)

\start：开始索引，默认为0
\end：截取结束索引（不包括end）
\contentType：新Blob的MIME类型，默认为空字符串

3. 通过canvas.toBlob()

var canvas = document.getElementById("canvas");
canvas.toBlob(function(blob){
    console.log(blob);
});

应用
https://www.cnblogs.com/hhhyaaon/p/5928152.html

通过Blob.slice方法，可以将大文件分片，轮循向后台提交各文件片段，即可实现文件的分片上传。
window.URL对象可以为Blob对象生成一个网络地址，结合a标签的download属性，可以实现点击url下载文件。
把图片转化为Blob对象，生成URL（URL.createObjectURL(blob)），来显示图片。

通过 fetch 加载图像或者其他二进制数据

fetch('flowers.jpg')
    .then(function(response) {
      return response.blob();
    })
    .then(function(imageBlob) {
      document.querySelector('img').src = URL.createObjectURL(imageBlob);
    });

8. 提交表单数据(Posting Form Data)

fetch('/submit', {
    method: 'post',
    body: new FormData(document.getElementById('comment-form'))
});

//提交json数据
fetch('/submit-json', {
    method: 'post',
    body: JSON.stringify({
        email: document.getElementById('email').value
        answer: document.getElementById('answer').value
    })
});

9. 跨域

https://www.zhihu.com/question/47029864/answer/150069385
如果服务器支持 CORS, 则在客户端设置相应的 Access-Control-Allow-Origin 即可得到数据。

let myHeaders = new Headers({
    'Access-Control-Allow-Origin': '*',
    'Content-Type': 'text/plain'
});
fetch(url, {
    method: 'GET',
    headers: myHeaders,
    mode: 'cors'
}) .then((res) => {
    // TODO 
})

10. 在fetch中使用jsonp

JSONP only supports GET method, same as fetch-jsonp.

参考文章

https://segmentfault.com/a/1190000007455901
http://blog.csdn.net/renfufei/article/details/51494396
https://davidwalsh.name/fetch