目录

一、fetch 概述

二、fetch 的语法

1、实现一个简单的 fetch 请求

2、fetch 方法介绍

&＃xff08;1&＃xff09;、fetch 方法的第一个参数

&＃xff08;2&＃xff09;、fetch 方法的第二个参数

&＃xff08;3&＃xff09;、fetch 方法的返回值

3、检测 fetch() 请求是否成功

三、fetch 的应用

1、上传 JSON 数据

2、上传文件

3、上传多个文件

四、fetch 的实现

五、fetch 的问题的解决

1、解决 fetch 的兼容问题

2、解决 fetch 不支持 timeout 处理的问题

&＃xff08;1&＃xff09;、通过手动控制 promise 状态的实例来实现 fetch 的 timeout 功能

&＃xff08;2&＃xff09;、利用 Promise.race 方法代替实现 fetch 的 timeout 的功能

3、解决 fetch 不支持进度事件&＃xff08;Progress Event&＃xff09;

&＃xff08;1&＃xff09;、利用 response.body 模拟实现 fetch 的 progress 事件

&＃xff08;2&＃xff09;、使用 Promise&＃43;XHR 结合的方式实现类 fetch 的 progress 效果

4、解决 fetch 不支持 JSONP 跨域的问题

5、解决 fetch 的跨域问题

六、深入学习 fetch 的资源

一、fetch 概述

fetch 是一种 HTTP 数据请求的方式&＃xff0c;它不是 ajax 的进一步封装&＃xff0c;而是 XMLHttpRequest&＃xff08;以下简称 XHR&＃xff09;的一种替代方案。

fetch 与 ajax 的区别&＃xff1a;

• fetch() 方法是原生的 Javascript 方法&＃xff0c;可以直接使用&＃xff0c;而 ajax 需要二次封装成一个方法才更便于使用。
• fetch() 方法会返回的一个 promise 对象&＃xff0c;它不会拒绝 http 的错误状态&＃xff0c;即使响应是一个HTTP 404 或 500&＃xff0c;Promise 状态也会被标记为 resolve&＃xff0c;但是会将 resolve 的返回值的 ok 属性设置为 false。当仅当网络故障时或请求被阻止时&＃xff0c;才会标记为 reject。而 ajax&＃xff0c;默认返回的是一个普通对象。
• 在默认情况下&＃xff0c;fetch() 方法不会接受或者发送 COOKIEs。只有手动设置 credentials 为 include 时&＃xff0c;才可以发送 COOKIEs。而 ajax&＃xff0c;允许接收和发送 COOKIEs。
• fetch() 方法不支持超时&＃xff08;timeout&＃xff09;处理。而 ajax&＃xff0c;支持超时处理。

二、fetch 的语法

1、实现一个简单的 fetch 请求

fetch(&＃39;http://example.com/movies.json&＃39;).then(function(response) {return response.json();}).then(function(myJson) {console.log(myJson);});

2、fetch 方法介绍

fetch 方法接受两个参数&＃xff1a;一个 URL 地址或一个 request 对象 和 &＃xff08;可选的&＃xff09;一个配置项对象。

&＃xff08;1&＃xff09;、fetch 方法的第一个参数

除了传给 fetch() 一个 URL 地址&＃xff0c;还可以通过使用 Request() 构造函数来创建一个 request 对象&＃xff0c;然后再作为参数传给 fetch() 方法。

var myHeaders &＃61; new Headers();var myInit &＃61; { method: &＃39;GET&＃39;,headers: myHeaders,mode: &＃39;cors&＃39;,cache: &＃39;default&＃39; };var myRequest &＃61; new Request(&＃39;flowers.jpg&＃39;, myInit);fetch(myRequest).then(function(response) {return response.blob();
}).then(function(myBlob) {var objectURL &＃61; URL.createObjectURL(myBlob);myImage.src &＃61; objectURL;
});

&＃xff08;2&＃xff09;、fetch 方法的第二个参数

&＃xff08;可选的&＃xff09;一个配置项对象。该配置项包括所有对请求的设置。

配置项可选的参数有&＃xff1a;

• method&＃xff1a;请求使用的方法&＃xff0c;可选的值有 GET、POST、 PUT、 DELETE、OPTION、HEAD等。
• headers&＃xff1a;请求的头信息&＃xff0c;形式为 Headers 的对象或包含 ByteString 值的对象字面量。
• body&＃xff1a;请求的 body 信息——可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。必须与&＃39;Content-Type&＃39;标头匹配。注意 GET 或 HEAD 方法的请求不能包含 body 信息。
• mode&＃xff1a;请求的模式&＃xff0c;可选的值有 cors、no-cors 或者 same-origin。
• credentials&＃xff1a;请求的资格证书&＃xff0c;可选的值有 omit、same-origin 或者 include。
  • omit&＃xff1a;默认值&＃xff0c;忽略 COOKIE 的发送&＃xff1b;
  • same-origin&＃xff1a;表示 COOKIE 只能同域发送&＃xff0c;不能跨域发送&＃xff1b;
  • include&＃xff1a;COOKIE 既可以同域发送&＃xff0c;也可以跨域发送。
• cache:  请求的 cache 模式 default、no-store、reload、no-cache、force-cache 或者 only-if-cached 。
• redirect&＃xff1a;可用的 redirect 模式: follow (自动重定向)&＃xff0c;error (如果产生重定向将自动终止并且抛出一个错误)&＃xff0c;或者 manual (手动处理重定向). 在Chrome中&＃xff0c;Chrome 47之前的默认值是 follow&＃xff0c;从 Chrome 47开始是 manual。
• referrer&＃xff1a;一个 USVString 可以是 no-referrer、client或一个 URL。默认是 client。
• referrerPolicy&＃xff1a;指定了HTTP头部referer字段的值。可能为以下值之一&＃xff1a; no-referrer、no-referrer-when-downgrade、origin、origin-when-cross-origin、unsafe-url 。
• integrity&＃xff1a;包括请求的  subresource integrity 值&＃xff08; 例如&＃xff1a; sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE&＃61;&＃xff09;。

举个栗子&＃xff1a;

// POST方法实现示例
postData(&＃39;http://example.com/answer&＃39;, {answer: 42}).then(data &＃61;> console.log(data)) .catch(error &＃61;> console.error(error))function postData(url, data) {// 默认值标记为 *return fetch(url, {body: JSON.stringify(data), // 必须与&＃39;Content-Type&＃39;标头匹配cache: &＃39;no-cache&＃39;, // 可选的值有*default, no-cache, reload, force-cache, only-if-cached。credentials: &＃39;same-origin&＃39;, // 可选的值有include, same-origin, *omitheaders: {&＃39;user-agent&＃39;: &＃39;Mozilla/4.0 MDN Example&＃39;,&＃39;content-type&＃39;: &＃39;application/json&＃39;},method: &＃39;POST&＃39;, // 可选的值有*GET, POST, PUT, DELETE等。mode: &＃39;cors&＃39;, // 可选的值有no-cors, cors, *same-originredirect: &＃39;follow&＃39;, // 可选的值有manual, *follow, errorreferrer: &＃39;no-referrer&＃39;, // 可选的值有*client, no-referrer}).then(response &＃61;> response.json()) // 解析JSON响应
}

&＃xff08;3&＃xff09;、fetch 方法的返回值

fetch 方法&＃xff0c;总是返回一个包含响应结果的 Promise 对象。当该 Promise 对象为 resolve 状态时&＃xff0c;在其回调函数中可获取 Response 对象。

Response 的可配置参数包括&＃xff1a;

• type&＃xff1a;类型&＃xff0c;支持&＃xff1a;basic&＃xff0c;cors。
• url&＃xff1a;请求地址。
• useFinalURL&＃xff1a;Boolean 值&＃xff0c;代表 url 是否是最终 URL。
• status&＃xff1a;状态码 (例如&＃xff1a;200&＃xff0c;404等等)。
• ok&＃xff1a;Boolean值&＃xff0c;代表成功响应(status 值在 200-299 之间)。
• statusText&＃xff1a;状态值(例如&＃xff1a;OK)。
• headers&＃xff1a;与响应相关联的 Headers 对象。

Response 提供的方法如下&＃xff1a;

• clone()&＃xff1a;创建一个新的 Response 克隆对象。
• error()&＃xff1a;返回一个新的,与网络错误相关的 Response 对象。
• redirect()&＃xff1a;重定向,使用新的 URL 创建新的 response 对象。
• arrayBuffer()&＃xff1a;返回一个 promise&＃xff0c;resolves 是一个 ArrayBuffer。
• blob()&＃xff1a;返回一个 promise&＃xff0c;resolves 是一个 Blob。
• formData()&＃xff1a;返回一个 promise&＃xff0c;resolves 是一个 FormData 对象。
• json()&＃xff1a;返回一个 promise&＃xff0c;resolves 是一个 JSON 对象。
• text()&＃xff1a;返回一个 promise&＃xff0c;resolves 是一个 USVString (text)。

3、检测 fetch() 请求是否成功

当 fetch 方法返回的 promise 对象的状态是 resolved 时&＃xff0c;调用 then 方法&＃xff0c;在 then 方法的回调函数中判断 response.ok 为 true 时&＃xff0c;才表示 fetch() 请求是成功的。否则&＃xff0c;fetch() 请求就是失败的。

fetch(&＃39;flowers.jpg&＃39;).then(function(response) {if(response.ok) {return response.blob();}throw new Error(&＃39;Network response was not ok.&＃39;);
}).then(function(myBlob) { var objectURL &＃61; URL.createObjectURL(myBlob); myImage.src &＃61; objectURL;
}).catch(function(error) {console.log(&＃39;There has been a problem with your fetch operation: &＃39;, error.message);
});

三、fetch 的应用

1、上传 JSON 数据

var url &＃61; &＃39;https://example.com/profile&＃39;;
var data &＃61; {username: &＃39;example&＃39;};fetch(url, {method: &＃39;POST&＃39;, // 或者 &＃39;PUT&＃39;body: JSON.stringify(data), // 数据可以是“string”或{object}&＃xff01;headers: new Headers({&＃39;Content-Type&＃39;: &＃39;application/json&＃39;})
}).then(res &＃61;> res.json())
.catch(error &＃61;> console.error(&＃39;Error:&＃39;, error))
.then(response &＃61;> console.log(&＃39;Success:&＃39;, response));

2、上传文件

可以通过 HTML 元素&＃xff0c;FormData() 和 fetch() 上传文件。

var formData &＃61; new FormData();
var fileField &＃61; document.querySelector("input[type&＃61;&＃39;file&＃39;]");formData.append(&＃39;username&＃39;, &＃39;abc123&＃39;);
formData.append(&＃39;avatar&＃39;, fileField.files[0]);fetch(&＃39;https://example.com/profile/avatar&＃39;, {method: &＃39;PUT&＃39;,body: formData
})
.then(response &＃61;> response.json())
.catch(error &＃61;> console.error(&＃39;Error:&＃39;, error))
.then(response &＃61;> console.log(&＃39;Success:&＃39;, response));

3、上传多个文件

可以通过HTML 元素&＃xff0c;FormData() 和 fetch() 上传文件。

var formData &＃61; new FormData();
var photos &＃61; document.querySelector("input[type&＃61;&＃39;file&＃39;][multiple]");formData.append(&＃39;title&＃39;, &＃39;My Vegas Vacation&＃39;);
// formData 只接受文件、Blob 或字符串&＃xff0c;不能直接传递数组&＃xff0c;所以必须循环嵌入
for (let i &＃61; 0; i }fetch(&＃39;https://example.com/posts&＃39;, {method: &＃39;POST&＃39;,body: formData
})
.then(response &＃61;> response.json())
.then(response &＃61;> console.log(&＃39;Success:&＃39;, JSON.stringify(response)))
.catch(error &＃61;> console.error(&＃39;Error:&＃39;, error));

四、fetch 的实现

export default async(url &＃61; &＃39;&＃39;, data &＃61; {}, type &＃61; &＃39;GET&＃39;, method &＃61; &＃39;fetch&＃39;) &＃61;> {type &＃61; type.toUpperCase();url &＃61; baseUrl &＃43; url;if (type &＃61;&＃61; &＃39;GET&＃39;) {let dataStr &＃61; &＃39;&＃39;; //数据拼接字符串Object.keys(data).forEach(key &＃61;> {dataStr &＃43;&＃61; key &＃43; &＃39;&＃61;&＃39; &＃43; data[key] &＃43; &＃39;&&＃39;;})if (dataStr !&＃61;&＃61; &＃39;&＃39;) {dataStr &＃61; dataStr.substr(0, dataStr.lastIndexOf(&＃39;&&＃39;));url &＃61; url &＃43; &＃39;?&＃39; &＃43; dataStr;}}if (window.fetch && method &＃61;&＃61; &＃39;fetch&＃39;) {let requestConfig &＃61; {credentials: &＃39;include&＃39;,//为了在当前域名内自动发送 COOKIE &＃xff0c; 必须提供这个选项method: type,headers: {&＃39;Accept&＃39;: &＃39;application/json&＃39;,&＃39;Content-Type&＃39;: &＃39;application/json&＃39;},mode: "cors",//请求的模式cache: "force-cache"}if (type &＃61;&＃61; &＃39;POST&＃39;) {Object.defineProperty(requestConfig, &＃39;body&＃39;, {value: JSON.stringify(data)})}try {const response &＃61; await fetch(url, requestConfig);const responseJson &＃61; await response.json();return responseJson} catch (error) {throw new Error(error)}} else {return new Promise((resolve, reject) &＃61;> {let requestObj;if (window.XMLHttpRequest) {requestObj &＃61; new XMLHttpRequest();} else {requestObj &＃61; new ActiveXObject;}let sendData &＃61; &＃39;&＃39;;if (type &＃61;&＃61; &＃39;POST&＃39;) {sendData &＃61; JSON.stringify(data);}requestObj.open(type, url, true);requestObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");requestObj.send(sendData);requestObj.onreadystatechange &＃61; () &＃61;> {if (requestObj.readyState &＃61;&＃61; 4) {if (requestObj.status &＃61;&＃61; 200) {let obj &＃61; requestObj.responseif (typeof obj !&＃61;&＃61; &＃39;object&＃39;) {obj &＃61; JSON.parse(obj);}resolve(obj)} else {reject(requestObj)}}}})}
}

五、fetch 的问题的解决

1、解决 fetch 的兼容问题

支持 fetch 的浏览器版本有&＃xff1a;Chrome、Firefox、Safari 6.1&＃43; 和 IE 10&＃43;。

虽然&＃xff0c;不是所有的浏览器都支持 fetch 请求&＃xff0c;但是我们可以用window.fetch polyfill来处理兼容问题。

2、解决 fetch 不支持 timeout 处理的问题

fetch 的 timeout 的特点&＃xff1a;

• timeout 不是请求连接超时的含义&＃xff0c;它表示请求的 response 时间&＃xff08;包括请求的连接、服务器处理 和 服务器响应回来的时间&＃xff09;。
• fetch 的 timeout 即使超时发生了&＃xff0c;本次请求也不会被丢弃掉&＃xff0c;它在后台仍然会发送到服务器端&＃xff0c;只是本次请求的响应内容被丢弃而已。

&＃xff08;1&＃xff09;、通过手动控制 promise 状态的实例来实现 fetch 的 timeout 功能

实现 fetch 的 timeout 功能&＃xff0c;其思想就是新创建一个可以手动控制promise状态的实例&＃xff0c;根据不同情况来对新promise实例进行resolve或者reject&＃xff0c;从而达到实现timeout的功能。

var oldFetchfn &＃61; fetch; //拦截原始的fetch方法
window.fetch &＃61; function(input, opts){//定义新的fetch方法&＃xff0c;封装原有的fetch方法return new Promise(function(resolve, reject){var timeoutId &＃61; setTimeout(function(){reject(new Error("fetch timeout"))}, opts.timeout);oldFetchfn(input, opts).then(res&＃61;>{clearTimeout(timeoutId);resolve(res)},err&＃61;>{clearTimeout(timeoutId);reject(err)})})
}

&＃xff08;2&＃xff09;、利用 Promise.race 方法代替实现 fetch 的 timeout 的功能

var oldFetchfn &＃61; fetch; //拦截原始的fetch方法
window.fetch &＃61; function(input, opts){//定义新的fetch方法&＃xff0c;封装原有的fetch方法var fetchPromise &＃61; oldFetchfn(input, opts);var timeoutPromise &＃61; new Promise(function(resolve, reject){setTimeout(()&＃61;>{reject(new Error("fetch timeout"))}, opts.timeout)});retrun Promise.race([fetchPromise, timeoutPromise])
}

3、解决 fetch 不支持进度事件&＃xff08;Progress Event&＃xff09;

Progress Events定义了与客户端服务器通信有关的事件。这些事件最早其实只针对XHR操作&＃xff0c;但目前也被其它API借鉴。有以下6个进度事件&＃xff1a;

• loadstart&＃xff1a;在接收到相应数据的第一个字节时触发。
• progress&＃xff1a;在接收相应期间周期性地持续不断地触发。
• error&＃xff1a;在请求发生错误时触发。
• abort&＃xff1a;在因为调用abort()方法而终止链接时触发。
• load&＃xff1a;在接收到完整的相应数据时触发。
• loadend&＃xff1a;在通信完成或者触发error、abort或load事件后触发。

Ajax 的 XHR 是原生支持 progress 事件的&＃xff0c;比如&＃xff1a;

var xhr &＃61; new XMLHttpRequest()
xhr.open(&＃39;POST&＃39;, &＃39;/uploads&＃39;)
xhr.onload &＃61; function() {}
xhr.onerror &＃61; function() {}
function updateProgress (event) {if (event.lengthComputable) {var percent &＃61; Math.round((event.loaded / event.total) * 100)console.log(percent)}
xhr.upload.onprogress &＃61;updateProgress; //上传的progress事件
xhr.onprogress &＃61; updateProgress; //下载的progress事件
}
xhr.send();

但 fetch 就不支持该事件。不过&＃xff0c;fetch 内部设计实现了 Request 和 Response 类。其中 Response 封装一些方法和属性&＃xff0c;通过 Response 实例可以访问这些方法和属性&＃xff0c;例如 response.json()、response.body 等等。

response.body是一个可读字节流对象&＃xff0c;其实现了一个getRender()方法&＃xff0c;其具体作用是&＃xff1a;用于读取响应的原始字节流&＃xff0c;该字节流是可以循环读取的&＃xff0c;直至body内容传输完成。因此&＃xff0c;利用到这点可以模拟出 fetch 的 progress。

&＃xff08;1&＃xff09;、利用 response.body 模拟实现 fetch 的 progress 事件

// fetch() returns a promise that resolves once headers have been received
fetch(url).then(response &＃61;> {// response.body is a readable stream.// Calling getReader() gives us exclusive access to the stream&＃39;s contentvar reader &＃61; response.body.getReader();var bytesReceived &＃61; 0;// read() returns a promise that resolves when a value has been receivedreader.read().then(function processResult(result) {// Result objects contain two properties:// done - true if the stream has already given you all its data.// value - some data. Always undefined when done is true.if (result.done) {console.log("Fetch complete");return;}// result.value for fetch streams is a Uint8ArraybytesReceived &＃43;&＃61; result.value.length;console.log(&＃39;Received&＃39;, bytesReceived, &＃39;bytes of data so far&＃39;);// Read some more, and call this function againreturn reader.read().then(processResult);});
});

&＃xff08;2&＃xff09;、使用 Promise&＃43;XHR 结合的方式实现类 fetch 的 progress 效果

function fetchProgress(url, opts&＃61;{}, onProgress){return new Promise(funciton(resolve, reject){var xhr &＃61; new XMLHttpRequest();xhr.open(opts.method || &＃39;get&＃39;, url);for(var key in opts.headers || {}){xhr.setRequestHeader(key, opts.headers[key]);}xhr.onload &＃61; e &＃61;> resolve(e.target.responseText)xhr.onerror &＃61; reject;if (xhr.upload && onProgress){xhr.upload.onprogress &＃61; onProgress; //上传}if (&＃39;onprogerss&＃39; in xhr && onProgress){xhr.onprogress &＃61; onProgress; //下载}xhr.send(opts.body)})
}
fetchProgress(&＃39;/upload&＃39;).then(console.log)

4、解决 fetch 不支持 JSONP 跨域的问题

JSONP 是外链一个Javascript资源。

如何基于Promise来实现一个JSONP&＃xff0c;并且使其看起来就像 fetch 支持 JSONP 一样&＃xff1f;

可以使用 fetch-jsonp 插件。使用演示如下&＃xff1a;

首先需要用 npm 安装 fetch-jsonp&＃xff1a;

npm install fetch-jsonp --save-dev

然后在像下面一样使用&＃xff1a;

fetchJsonp(&＃39;/users.jsonp&＃39;, {timeout: 3000,jsonpCallback: &＃39;custom_callback&＃39;}).then(function(response) {return response.json()}).catch(function(ex) {console.log(&＃39;parsing failed&＃39;, ex)})

5、解决 fetch 的跨域问题

XHR 2 级 支持一种跨域&＃xff1a;

• XHR 2 级是支持跨域请求的&＃xff0c;只不过要满足浏览器端支持 CORS&＃xff0c;服务器通过 Access-Control-Allow-Origin 来允许指定的源进行跨域&＃xff0c;仅此一种方式。

fetch 支持两种跨域请求&＃xff1a;

• 最常用&＃xff1a;与 XHR 2 级一样&＃xff0c;支持跨域请求需要满足两个条件&＃xff1a;浏览器端支持 CORS 和 服务器通过 Access-Control-Allow-Origin 来允许指定的源进行跨域。
• 特殊&＃xff1a;fetch 还支持一种跨域&＃xff0c;不需要服务器支持的形式&＃xff0c;具体可以通过其 mode 的配置项来实现。fetch 的 mode 配置项有3个值&＃xff0c;如下&＃xff1a;
  • same-origin&＃xff1a;该模式是不允许跨域的&＃xff0c;它需要遵守同源策略&＃xff0c;否则浏览器会返回一个error告知不能跨域&＃xff1b;其对应的response type为basic。
  • cors&＃xff08;最常用&＃xff09;&＃xff1a;该模式支持跨域请求&＃xff0c;顾名思义它是以CORS的形式跨域&＃xff1b;当然该模式也可以同域请求不需要后端额外的CORS支持&＃xff1b;其对应的response type为cors。
  • no-cors&＃xff08;特殊&＃xff09;&＃xff1a;该模式用于跨域请求但是服务器不带CORS响应头&＃xff0c;也就是服务端不支持CORS&＃xff1b;这也是fetch的特殊跨域请求方式&＃xff1b;其对应的response type为opaque。&＃xff08;该模式允许浏览器发送本次跨域请求&＃xff0c;但是不能访问响应返回的内容&＃xff0c;这也是其response type为opaque透明的原因。&＃xff09;

总的来说&＃xff0c;fetch 的跨域请求是使用 CORS 方式&＃xff0c;需要浏览器和服务端的支持。

六、深入学习 fetch 的资源

Js中fetch方法&＃xff1a;https://www.cnblogs.com/WindrunnerMax/p/13024711.html

传统 Ajax 已死&＃xff0c;Fetch 永生&＃xff1a;https://segmentfault.com/a/1190000003810652

XHR or Fetch API ?&＃xff1a;http://jartto.wang/2017/01/17/xhr-or-fetch-api/

res.json() 与 res.send() 的区别&＃xff1f;&＃xff1a;https://andyli.blog.csdn.net/article/details/79753342