01fetch

fetch 和 jQuery.ajax()区别

1. 当接收到代表错误的 http 状态码，比如404或者500，fetch返回的Promise也不会被标记为reject，只是response.ok会为false。仅当网络故障的时候标记为reject
2. fecth 不会从服务端发送和接受任何的cookie，如果需要发送cookie，那么需要发送凭据头。在第二个参数中设置credentials

进行 fetch 请求

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

功能检测

1. 可以通过检测Headers,Request,Response或fetch()是否在 window 或者 Worker中

if (fetch) {} else {}

发送 fetch 请求

1. 根据请求地址，返回一个包含了 response 的 promise 对象
2. 使用blob方法
3. 从Blob中获取objectURL
4. 插入到 img 中

自定义请求的参数

fetch 接受第二个可选参数，一个可以控制不同配置的 init 对象

fetch可配置参数

// 自定义配置
var myHeaders = new Header();
var myInit = {
    method: 'GET',
    headers: myHeaders,
    mode: 'cors',
    cache: 'default'
};
// 进行请求
// 同上，但是 fetch 传入第二个参数

检测请求是否成功

需要区分 404 等情况。因此，需要在 then 中判断 response.ok

fetch()
.then(function (response) {
    if (response.ok) {
        // 响应成功
    }else {
        // 响应状态为 404 等情况
    }
})
.catch(function (error) {
    // 显示一下错误
})

自定义请求对象

不仅可以自定义请求参数，还可以使用request自定义请求对象。因为Request()和fetch()需要接受同样的参数

// 自定义请求对象
var myHeaders = new Headers();
var myInit = {
    method: 'GET',
    headers: myHeaders,
    mode: 'cors',
    cache: 'default'
}
var myRequest = new Request('flowers.jpg',myInit);
// 使用 myRequest 请求对象

Headers

构建一个自己的 headers,它是一个简单的多名值对

// 方式一
var myHeaders = new Headers();
myHeaders.append('Content-Type','text/plain');
// 方式二: 直接传入对象字面量
var myHeaders = new Headers({
    "":""
});

Headers 对象使用的 API

其中一些操作只能在 ServiceWorkers 中使用

myHeaders.set('','');
myHeaders.append('','');
myHeaders.has('') // true/false
myHeaders.get('');
myHeaders.getAll(''); // 得到的将是一个数组

报错

写入不可写属性报错

var myResponse = Response.error();
try {
  myResponse.headers.set("Origin", "http://mybank.com");
} catch(e) {
  console.log("Cannot pretend to be a bank!");
}

Guard

1. 该属性属于 Headers ,但是没有暴露给 Web。它影响哪些内容可以在 Headers 对象中被操作
2. 值

• none 默认
• request,从request中获取的 headers
• request-no-cors，从不同域的request中获取headers
• response,从reponse中获取的headers
• immutable, 在ServiceWorkers中最常用的

Response 对象

Response 对象也可以通过 js 创建，但是只有在 ServiceWorkers中才有用

Response属性和方法

var myBody = new Blob();
addEventListener('fetch',function (event) {
    event.responseWith(new Response(myBody,{
        headers: {"Content-Type":"text/plain"}
    }))
})

1. 常见response属性

• response.status
• response.statusText
• response.ok,用来检查状态码在200-299

Body

请求和响应都能包含 body 对象，比如在构造函数中使用

1. body 可以是以下任意类型的实例

• ArrayBuffer
• ArrayBufferView
• Blob
• string
• URLSearchParams
• FormData

2. Body类定义了以下方法，这些方法被Request和Response实现。这些方法都会返回一个被解析后的Promise对象和数据

• arrayBuffer()
• blob()
• json()
• text()
• formData()

使用formData的案例

var form = new FormData(document.getElementById('login-form'));
fetch('/login',{
    method: 'POST',
    body: form
})