摘要： fetch简介 在 AJAX 时代，进行请求 API 等网络请求都是通过XMLHttpRequest 或者封装后的框架进行网络请求。而在前端快速发展地过程中，为了契合更好的设计模式，产生了 fetch 框架。

fetch简介

在 AJAX 时代，进行请求 API 等网络请求都是通过XMLHttpRequest 或者封装后的框架进行网络请求。而在前端快速发展地过程中，为了契合更好的设计模式，产生了 fetch 框架。 fetch相比XMLHttpRequest，提供更加强大、高效的网络请求方式，所以在 Hybrid App 开发模式中，大量的用到了fetch框架作为网络请求。

fetch在浏览器中使用

在 Chrome 浏览器中已经全局支持了 fetch 函数，打开调试工具，在 Console 中可以进行体验下fetch。先不考虑跨域请求的使用方法，我们先请求同域的资源。例如：

fetch("http://blog.csdn.net/xiangzhihong8").then(function(response){console.log(response)})

fetch语法

使用 fetch 的构造函数请求数据后，返回一个 Promise 对象，然后根据具体的实际情况处理。

fetch("http://baidu.com") .then(function(response){ // ... })

说明，在请求后的 Response 中，常常有如下返回情况：

Response.status 也就是 StatusCode，如成功就是 200 ；Response.statusText 是 StatusCode 的描述文本，如成功就是 OK ；Response.ok 一个 Boolean 类型的值，判断是否正常返回，也就是 StatusCode 为 200-299 。

fetch请求实例

1.使用get方式进行网络请求，例如：

fetch('http://nero-zou.com/test', { method: 'GET' }).then(function(response) { //获取数据,数据处理 }).catch(function(err) { //错误处理 });

2.使用post方式进行网络请求，例如：

let param = {user:'xxx',phone:'xxxxxx'}; fetch(url, { method: 'post', body: JSON.stringify(param) }).then(function(response) { //获取数据,数据处理 });

3.其它写法，例如：

try { fetch(url, { method: 'post', body: JSON.stringify(param) }).then(function(response) { //获取数据,数据处理 }); } catch(e) { //捕获异常消息 }

4.带header 或其它参数，例如：

fetch(url, { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify({ firstParam: 'yourValue', secondParam: 'yourOtherValue', }) })

fetch请求并填充界面

原文链接