采坑记--fetch 请求header与body配置及常用问题
fetch 请求-header与body配置及常用问题
引入
说道fetch就不得不提XMLHttpRequest了，XHR在发送web请求时需要开发者配置相关请求信息和成功后的回调，尽管开发者只关心请求成功后的业务处理，但是也要配置其他繁琐内容，导致配置和调用比较混乱，也不符合关注分离的原则；fetch的出现正是为了解决XHR存在的这些问题。例如下面代码：
fetch(url).then(function(response) {
return response.json();
}).then(function(data) {
console.log(data);
}).catch(function(e) {
console.log("Oops, error");
});
上面这段代码让开发者只关注请求成功后的业务逻辑处理，其他的不用关心，相当简单；也比较符合现代Promise形式，比较友好。
fetch是基于Promise设计的，从上面代码也能看得出来，这就要求fetch要配合Promise一起使用。正是这种设计，fetch所带来的优点正如传统 Ajax 已死，Fetch 永生总结的一样：
- 语法简单，更加语义化
- 基于标准的Promise实现，支持async/await
- 使用isomorphic-fetch可以方便同构
不过话说回来，fetch虽然有很多优点，但是使用fetch来进行项目开发时，需要的配置，以及遇到的fetch使用的常见问题。
大多数情况下，在前端发起一个网络请求我们只需关注下面几点：
- 传入基本参数（url，请求方式）
- 请求参数、请求参数类型
- 设置请求头
- 获取响应的方式
- 获取响应头、响应状态、响应结果
- 异常处理
- 携带cookie设置
- 跨域请求
mode
- same-origin - 如果使用此模式设置对另一个原点的请求，则结果只是一个错误。您可以使用它来确保始终对您的原点提出请求。
- no-cors- 防止该方法成为除了HEAD，GET或者POST之外的任何内容，并且标头不作为简单标题以外的任何内容。如果任何 ServiceWorkers拦截这些请求，它们可能不会添加或覆盖任何标题，除了那些简单的标题。另外，JavaScript可能无法访问Response结果的任何属性。这确保ServiceWorkers不会影响Web的语义，并防止跨域泄漏数据而导致的安全和隐私问题。
- cors - 允许跨源请求，例如访问第三方供应商提供的各种API。这些预计将遵守CORS协议。只有一些有限的头文件暴露在Response中，但是正文是可读的。
- navigate - 支持导航的模式。该navigate值仅用于HTML导航。导航请求仅在文档之间导航时创建。
如果未定义，cors则假定为默认值。
cache
cache 属性值
一个RequestCache值。可用的值是：
-
default：浏览器在HTTP缓存中查找匹配的请求。
- 如果有匹配项并且它是新的，则将从缓存中返回。
- 如果有匹配项，但是已经过期，则浏览器将向远程服务器发出有条件的请求。如果服务器指示资源没有改变，它将从缓存中返回。否则，资源将从服务器下载，并且缓存将被更新。
- 如果不匹配，浏览器将发出正常的请求，并用下载的资源更新缓存。
-
no-store：浏览器从远程服务器获取资源，而不先查看缓存，并且不会使用下载的资源更新缓存。
-
reload：浏览器从远程服务器获取资源，而不先查看缓存，然后用下载的资源更新缓存。
-
no-cache ：浏览器在HTTP缓存中查找匹配的请求。
- 如果有新的或旧的匹配，浏览器将向远程服务器发出有条件的请求。如果服务器指示资源没有改变，它将从缓存中返回。否则，资源将从服务器下载，缓存将被更新。
- 如果不匹配，浏览器将发出正常的请求，并用下载的资源更新缓存。
-
force-cache：浏览器在HTTP缓存中查找匹配的请求。
- 如果有新的或旧的匹配，它将从缓存中返回。
- 如果不匹配，浏览器将发出正常的请求，并用下载的资源更新缓存。
-
only-if-cached：浏览器在HTTP缓存中查找匹配的请求。
- 如果有新的或旧的匹配，如果将从缓存返回。
- 如果不匹配，浏览器将返回一个错误。
该"only-if-cached"模式只能用于请求的mode为"same-origin"的情况。如果请求的redirect属性是"follow"，并且重定向不违反"same-origin"模式，则会遵循缓存重定向。
credentials:
- omit：从不发送cookie。
- same-origin：如果URL与调用脚本位于相同的源，则发送用户凭证（cookie，基本http认证等）。
- include：始终发送用户凭据（cookie，基本http认证等），甚至用于跨源调用。
fetch默认是不发送cookie
headers
1.用法
该Headers接口允许您通过Headers()构造函数创建自己的headers对象。headers对象是名称到值的简单多重映射：
var content = "Hello World";
var myHeaders = new Headers();
myHeaders.append("Content-Type", "text/plain");
myHeaders.append("Content-Length", content.length.toString());
myHeaders.append("X-Custom-Header", "ProcessThisImmediately");
同样可以通过传递一个数组或一个对象字面值给构造函数来实现：
myHeaders = new Headers({
"Content-Type": "text/plain",
"Content-Length": content.length.toString(),
"X-Custom-Header": "ProcessThisImmediately",
});
还可以：
headers:{
"Content-Type":"application/x-www-form-urlencoded"
}
内容可以被查询和检索：
console.log(myHeaders.has("Content-Type")); // true
myHeaders.set("Content-Type", "text/html");
myHeaders.append("X-Custom-Header", "AnotherValue");
console.log(myHeaders.get("X-Custom-Header")); // "ProcessThisImmediately"
myHeaders.delete("X-Custom-Header");
2.配置
get不存在请求实体部分，键值对参数放置在 URL 尾部，因此请求头不需要设置 Content-Type 字段。
用于标记请求体数据的格式Content-Type
- 1 Content-Type：application/json
现在越来越多的人把它作为请求头，用来告诉服务端消息主体是序列化后的 JSON字符串。实际上，由于 JSON规范的流行，除了低版本 IE之外的各大浏览器都原生支持 JSON.stringify，服务端语言也都有处理 JSON的函数，使用 JSON不会遇上什么麻烦。
// 消息主体是序列化json字符串
形式：
{"name"："小明"，"password":"123456"}
controller 的入参使用@RequestBody修饰，说明是要使用json的格式接收。request.getInputStream()，request.getReader() 获取。并且getInputStream获取参数后，request.getParameter() 再不能得到参数。
- 2 Content-Type: application/x-www-form-urlencoded
// 浏览器原生的form表单，请求体中的数据会以普通表单形式（键值对）发送到后端
形式：
key1=value1&key2=value2
后端取值方式:
request.getParameter()、request.getParameterMap()
- 3. multipart/form-data，将表单的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件
// 发送 POST 请求，参数为：aaa=aaa，bbb=你的我的啊啊啊，file=图片
POST / HTTP/1.1
Host: www.bilibili.com
Content-Type: multipart/form-data;boundary=------FormBoundary15e896376d1
Content-Length: 19532
------FormBoundary15e896376d1
Content-Disposition: form-data; name="aaa"
aaa
------FormBoundary15e896376d1
Content-Disposition: form-data; name="bbb"
你的我的啊啊啊
------FormBoundary15e896376d1
Content-Disposition: form-data; name="file"; filename="cat-icon.png"
Content-Type: image/png
[message-part-body; type:image/png, size:19201 bytes]
------FormBoundary15e896376d1--
首先生成了一个 boundary 用于分割不同的字段，为了避免与正文内容重复，boundary 很长很复杂。
然后 Content-Type 里指明了数据是以 mutipart/form-data 来编码，本次请求的 boundary 是什么内容。
消息主体里按照字段个数又分为多个结构类似的部分，每部分都是以 –boundary 开始，紧接着内容描述信息，然后是回车，最后是字段具体内容（文本或二进制）。
如果传输的是文件，还要包含文件名和文件类型信息。消息主体最后以 –boundary– 标示结束。
- 4 text/xml
它是一种使用 HTTP作为传输协议，XML 作为编码方式的远程调用规范。
body
请求和响应都可能包含body数据。一个body是以下任何一种类型的实例：
- ArrayBuffer
- ArrayBufferView （Uint8Array和扩展）
- Blob/File
- string
- URLSearchParams
- FormData
Body mixin定义了以下方法来提取体（由得到的Request和Response实施）。这些都会返回一个最终解决实际内容的承诺。
- arrayBuffer()
- blob()
var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});
- json()
- text()
- formData()
上传JSON数据
使用fetch()开机自检JSON编码的数据。
将参数序列化json字符串进行传递
var url = 'https://example.com/profile';
var data = {username: 'example'};
fetch(url, {
method: 'POST', // or 'PUT'
body: JSON.stringify(data), //'{"name":"hehe","age":10}'
headers: new Headers({
'Content-Type': 'application/json'
})
}).then(res => res.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));
请求体中的数据会以普通表单形式（键值对）发送到后端
const options = {
method: "POST",
body: qs.stringify(data),// 'name=hehe&age=10'
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
};
// URLSearchParams，插入一个指定的键/值对作为新的搜索参数。
let url = new URL('https://example.com?foo=1&bar=2');
let params = new URLSearchParams(url.search.slice(1));
//添加第二个foo搜索参数。
params.append('foo', 4);
//查询字符串变成: 'foo=1&bar=2&foo=4'
注：
当使用application/json 的时候，body直接是 JSON.stringify(paramObject) 比较简单
当使用 ‘Content-Type’: ‘application/x-www-form-urlencoded’,时候，需要将对象转换为普通表单形式（键值对）的字符串
疑惑：body已经将数据封装成想要的格式，那fetch 请求中的请求头设置Content-Type到底改变了什么
JSON.parse（用于从一个字符串中解析出json 对象）
JSON.stringify（用于从一个对象解析出字符串）
qs.parse()// 将URL解析成对象的形式
qs.stringify()// 将对象解析成URL的形式
上传文件
可以使用 HTML
input 元素、FormData ()将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接， 和fetch()来上载文件。
var formData = new FormData();
var fileField = document.querySelector("input[type='file']");
formData.append('username', 'abc123');
formData.append('avatar', fileField.files[0]);
fetch('https://example.com/profile/avatar', {
method: 'PUT',
body: formData，
headers: {'Content-Type': 'multipart/form-data'}}
})
.then(response => response.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));
Response对象
当fetch() promise被解析时，Response实例被返回。
一个 Promise，resolve 时回传 Response 对象：
属性：
- status (number) - HTTP请求结果参数，在100–599 范围， 包含响应状态码的整数（默认值200）
- statusText (String) - 服务器返回的状态报告 。一个字符串（默认值“OK”），对应于HTTP状态码消息。
- ok (boolean) - 这是一个用于检查状态是否在200-299范围内的简写，表示请求成功。这返回一个Boolean。
- headers (Headers) - 返回头部信息，下面详细介绍
- url (String) - 请求的地址
has(name) (boolean) - 判断是否存在该信息头
get(name) (String) - 获取信息头的数据
getAll(name) (Array) - 获取所有头部数据
set(name, value) - 设置信息头的参数
append(name, value) - 添加header的内容
delete(name) - 删除header的信息
forEach(function(value, name){ ... }, [thisContext]) - 循环读取header的信息
方法：
- text() - 以string的形式生成请求text
- json() - 生成JSON.parse(responseText)的结果
- blob() - 生成一个Blob
- arrayBuffer() - 生成一个ArrayBuffer
- formData() - 生成格式化的数据，可用于其他的请求
其他方法：
- clone()
- Response.error()
- Response.redirect()
特点：fetch请求对某些错误http状态不会reject
这主要是由fetch返回promise导致的，因为fetch返回的promise在某些错误的http状态下如400、500等不会reject，相反它会被resolve；
仅仅在发生“network error（网络错误）”才会被拒绝。如果可以服务器获得http错误状态，则表明服务器正常工作且在处理请求，而“network error（网络错误）”表示根本无法到达服务器(例如连接拒绝或名称未解析)或请求配置有错误(错误的请求地址)。
// 解决
if(response.ok){
return response.json();
}
else {
return Promise.reject({
status: response.status,
statusText: response.statusText
})
}
对fetch请求做一层封装。
function checkStatus(response) {
if (response.status >= 200 && response.status < 300) {
return response;
}
const error = new Error(response.statusText);
error.response = response;
throw error;
}
function parseJSON(response) {
return response.json();
}
export default function request(url, options) {
let opt = options||{};
return fetch(url, {credentials: 'include', ...opt})
.then(checkStatus)
.then(parseJSON)
.then((data) => ( data ))
.catch((err) => ( err ));
}
其他
fetch不支持jsonp
// 解决
npm install fetch-jsonp --save-dev
fetchJsonp('/users.jsonp', {
timeout: 3000,
jsonpCallback: 'custom_callback'
})
.then(function(response) {
return response.json()
}).catch(function(ex) {
console.log('parsing failed', ex)
})
fetch不支持超时timeout处理
核心是利用建立一个超时的abortPromise和接口请求的fetchPromise传入 Promise.race() 来进行处理，哪个Promise先返回结果则最终输出这个Promise的返回值。
var oldFetchfn = fetch; //拦截原始的fetch方法
window.fetch = function(input, opts){//定义新的fetch方法，封装原有的fetch方法
var fetchPromise = oldFetchfn(input, opts);
var timeoutPromise = new Promise(function(resolve, reject){
setTimeout(()=>{
reject(new Error("fetch timeout"))
}, opts.timeout)
});
retrun Promise.race([fetchPromise, timeoutPromise])
//哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。
}
兼容性
伴随fetch的问世及发展，目前在生产环境使用fetch的企业越来越多。开源社区上有关fetch polyfilll已经多款供选，又因其基于Promise，以下可以完美的解决其兼容性问题(特别是IE)，仅参考：
- 由于 IE8 是 ES3，需要引入 ES5 的 polyfill: es5-shim, es5-sham
- 引入 Promise 的 polyfill: es6-promise
- 引入 fetch 探测库：fetch-detector
- 引入 fetch 的 polyfill: fetch-ie8 // 探测是否存在 window.fetch 方法，如果没有则用 XHR 实现。
- 可选：如果你还使用了 jsonp，引入 fetch-jsonp
- 可选：开启 Babel 的 runtime 模式，现在就使用 async/await
总结
fetch 的好处无需多语，但fetch也存在一些问题，例如
- 不主动携带cookie，
- http错误状态处理，
- 不支持jsonp，
- ie兼容性，
- 请求参数的配置，
- 不支持timeout，
- 不支持 progress，
特别是fetch在跨域问题上与传统跨域的处理方式的区别。