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 对象，然后根据具体的实际情况处理。

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

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

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

fetch请求实例

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

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

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

let param = {user:'xxx',phone:'xxxxxx'}; fetch(url,{ method: 'post',114)">body: JSON.stringify(param) }).then(function(response) {  3.其它写法，例如：
 
 
try { fetch(url,{ method: body: catch(e) { //捕获异常消息  } 
 
 
 4.带header 或其它参数，例如：
 
 
fetch(url,{ method: 'POST',headers: { 'Accept': 'application/json','Content-Type': body: JSON.stringify({ firstParam: 'yourValue',secondParam: 'yourOtherValue',}) }) 
 
 
 fetch请求并填充界面
 
 
 原文链接