在前端快速发展地过程中为了契合更好的设计模式产生了 fetch 框架此文将简要介绍下 fetch 的基本使用。在 AJAX 时代进行 API 等网络请求都是通过 XMLHttpRequest 或者封装后的框架进行网络请求。现在产生的 fetch 框架简直就是为了提供更加强大、高效的网络请求而生虽然在目前会有一点浏览器兼容的问题但是当我们进行 Hybrid App 开发的时候如我之前介绍的 Ionic 和 React Native都可以使用 fetch 进行完美的网络请求。1. fetch 初体验在 Chrome 浏览器中已经全局支持了 fetch 函数打开调试工具在 Console 中可以进行初体验。先不考虑跨域请求的使用方法我们先请求同域的资源如在我的博客页面中打开 Console 进行如下请求。{% codeblock lang:js%}fetch(“http://blog.parryqiu.com”).then(function(response){console.log(response)}){% endcodeblock %}返回的数据https://oindk07nf.qnssl.com这样就很快速地完成了一次网络请求我们发现返回的数据也比之前的 XMLHttpRequest 返回的数据丰富、易用的多。2. 关于 fetch 标准概览虽然 fetch 还不是作为一个稳定的标准发布但是在其一直迭代更新的 标准描述 中我们发现已经包含了很多的好东西。fetch 支持了大部分常用的 HTTP 的请求以及和 HTTP 标准的兼容如 HTTP MethodHTTP HeadersRequestResponse。3. fetch 的使用3.1 兼容浏览器的处理可以通过下面的语句处理浏览器兼容的问题。{% codeblock lang:js%}if(self.fetch) {// 使用 fetch 框架处理} else {// 使用 XMLHttpRequest 或者其他封装框架处理}{% endcodeblock %}3.2 一般构造请求的方法使用 fetch 的构造函数请求数据后返回一个 Promise 对象处理即可。{% codeblock lang:js%}fetch(“http://blog.parryqiu.com”).then(function(response){// do something…}){% endcodeblock %}3.3 fetch 构成函数的其他选项我们可以将与 HTTP Headers 兼容的格式加入到请求的头中如每次 API 的请求我们想不受缓存的影响那么可以像下面这样请求{% codeblock lang:js%}fetch(“http://blog.parryqiu.com”, {headers: {‘Cache-Control’: ‘no-cache’}}).then(function(response){// do something…}){% endcodeblock %}具体的可选参数可以查看 这里。如我们还可以这样使用添加了更多的头部参数{% codeblock lang:js%}var myHeaders new Headers();myHeaders.append(“Content-Type”, “text/plain”);myHeaders.append(“Content-Length”, content.length.toString());myHeaders.append(“X-Custom-Header”, “ProcessThisImmediately”);var myInit {method: ‘GET’,headers: myHeaders,mode: ‘cors’,cache: ‘default’};fetch(“http://blog.parryqiu.com”, myInit).then(function(response){// do something…}){% endcodeblock %}3.4 返回的数据结构在请求后的 Response 中具体的定义在 这里。常用的有Response.status 也就是 StatusCode如成功就是200Response.statusText 是 StatusCode 的描述文本如成功就是OKResponse.ok 一个 Boolean 类型的值判断是否正常返回也就是 StatusCode 为200-299。做如下请求{% codeblock lang:js%}fetch(“http://blog.parryqiu.com”).then(function(response){console.log(response.status);console.log(response.statusText);console.log(response.ok);}){% endcodeblock %}返回的数据https://oindk07nf.qnssl.com3.5 Body 参数因为在 Request 和 Response 中都包含 Body 的实现所以包含以下类型ArrayBufferArrayBufferView (Uint8Array and friends)Blob/FilestringURLSearchParamsFormData在 fetch 中实现了对应的方法并返回的都是 Promise 类型。arrayBuffer()blob()json()text()formData()这样处理返回的数据类型就会变的特别地方便如处理 json 格式的数据{% codeblock lang:js%}var myRequest new Request(‘http://api.com/products.json’);fetch(myRequest).then(function(response) {return response.json().then(function(json) {for(i 0; i json.products.length; i) {var name json.products[i].Name;var price json.products[i].Price;// do something more…}});});{% endcodeblock %}4. 浏览器兼容目前项目给出的浏览器支持如下图如果需要兼容低版本浏览器那么可以通过上面介绍的浏览器兼容处理办法解决此问题不过相信很快就不需要考虑兼容问题了在 Hybrid App 开发中使用基本没有问题因为基本都是基于 Node.js 进行开发的。有朋友提出兼容性问题的严谨性其实通过 JS polyfill已经可以获得很好的支持。如使用 A window.fetch JavaScript polyfill 可以获得如下支持。https://oindk07nf.qnssl.com如使用 fetch-ie8 可以获得如下支持。https://oindk07nf.qnssl.com5. 结语下面是一个格式更好的文档比标准描述的页面更加清晰供参考。https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API在使用 React Native 开发 App 的时候接触到了 fetch发现的确非常方便高效框架的设计模式也非常清晰灵活所以分享出来供大家探讨。更多的细节可以查阅相关文档有什么问题可以留言讨论交流。