es6的fetch异步请求

• 使用fetch的优点
  • 语法简洁，更加语义化
  • 基于标准 Promise 实现，支持 async/await
  • 同构方便，使用 isomorphic-fetch

---

为什么要用fetch

XMLHttpRequest 是一个设计粗糙的 API，不符合关注分离（Separation of Concerns）的原则，配置和调用方式非常混乱，而且基于事件的异步模型写起来也没有现代的 Promise，generator/yield，async/await 友好。
fetch就是为了解决xhr的问题的

使用xhr传递一个json请求 ，

var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'json';

xhr.onload = function() {
  console.log(xhr.response);
};

xhr.onerror = function() {
  console.log("Oops, error");
};

xhr.send();

使用fetch来传递请求

fetch(url).then(function(response) {
  return response.json();
}).then(function(data) {
  console.log(data);
}).catch(function(e) {
  console.log("Oops, error");
});

与ajax相比

• ajax只能实现同源请求，fetch可实现跨域请求；
• Fetch代码很像jQuery中的ajax，但是两者是不同的，fetch是原生的js，而jQuery中的ajax是库封装的；
• ajax几乎所有的主流浏览器都支持，但fetch由于目前并没有被列入标准，只有像firefox最新版，chrome最新版，以及IE10+等以上才支持；

---

一个完整的post请求和响应过程

 var url = "/fetch";
          fetch(url,{
              method:"post",
              headers:{
                  "Content-type":"application/x-www-form-urlencoded"
              },
              body:"name=luwenjing&age=22"
          })
            .then(function (response){
                if (response.status == 200){
                    return response;
                }
            })
            .then(function (data) {
              return data.text();
            })
            .then(function(text){
                console.log("请求成功，响应数据为:",text);
            })
            .catch(function(err){
                console.log("Fetch错误:"+err);
            });

与异步编程相关的ES7的Async/Await