如图：简单与否，全凭你自己的实力

微信前端学习群重新开业，可加icepy_1988为好友，邀请你入群。

不知道大家还曾记得$.ajax或者XMLHttpRequest，曾经的我们用于与服务端交互时必然要用的，它们发起一个请求，或有诸多配置，或是较为复杂。fetch API刚出现时，其简洁的语法风格，让人眼前一亮，大呼与服务端进行交互是如此的简单，可真相是否如此？

我们先来看看发起同样一个GET请求，XMLHttpRequest，$.ajax，fetch API的三种实现：

// XMLHttpRequest
var xmlhttp = new XMLHttpRequest();
xmlhttp.open('GET','https://github.com/icepy',true);
xmlhttp.send(null);
xmlhttp.onreadystatechange = function (){ 
    if (xmlhttp.readyState==4){   
        if (xmlhttp.status==200){     
            // code here
        }
     }
}

// $.ajax
$.ajax({
  url:'https://github.com/icepy',  
   success: function(){

  },  error: function(){

  }
})

// fetch
fetch('https://github.com/icepy')

看起来fetch API在简单化方面完爆XMLHttpRequest和$.ajax，其实真的《没那么简单》？

从MDN上你可以查阅到比较细节的问题：

从 fetch() 返回的 Promise 将不会拒绝HTTP错误状态, 即使响应是一个 HTTP 404 或 500。相反，它会正常解决 (其中ok状态设置为false), 并且仅在网络故障时或任何阻止请求完成时，它才会拒绝。
默认, fetch 将不会发送或接收任何 cookies 从服务器, 如果站点依赖于维护一个用户会话，则导致未经认证的请求(要发送 cookies，必须发送凭据头).

这也意味着fetch API在某种程度上来说是非常底层的API，并非人们所想的开箱即用，还需要进一步的封装才能匹敌$.ajax这种封装的很完善的API，而某些情况下又没XMLHttpRequest那么灵活好用，比如浏览器自动处理，同步，取消请求，请求进度事件等。Promise可只有两种状态，而 fetch 始终只会返回一个Promise对象，对于错误，你需要通过response.ok这个属性来判别是否为错误，而reject只会在网络真正出现故障时才会reject。

这就是一个比较蛋疼的处理过程了，error的定义，你不仅需要判断catch还需要判断response.ok这个属性，两者统一起来才能定义一个完整的错误，这方面看起来$.ajax的封装要完胜它。

从上图中应该可以看到两个比较新的玩意：ReadableStream和Headers，ReadableStream是一个比较牛逼的地方，意味着当请求需要发送一个大文件时，成为了可能（不过，大部分情况下，使用“Ajax”都是获取JSON，对于这些场景就比较鸡肋了）。

Body实现了好几个Methods用与转换数据：

arrayBuffer
blob
formData
json
text

既然response成为了流，那么一般的方法对它就无从下手了，必须要使用这几个方法先来转换成对应的类型才行。但是，这增加的一层需要实现数据转换的处理过程，如果数据格式稍有错误，数据转换错误时，因为fetch API 返回的是一个Promise，这样又很难捕获因数据转换出错时抛出的错误了。

迄今为止在MDN上没有查阅到fetch API可以同步，也就是阻塞请求的方式来与服务端交互，这方面不知道后续fetch API的设计是否会增加这方面的内容。

Headers顾名思义，专门处理HTTP Request 和 HTTP Response 中 headers，它提供了一系列的API用于headers的检索，设置，添加以及删除，至于API，大家有机会可以去MDN上学习一下，真的非常简单。

虽然fetch API的设计很先进，处理上稍许复杂，但对于前端而言，需要的还是fetch API，Why？这货绝对是前端界的进步，Promise，ReadableStream，Headers等等，想想如果未来你需要处理图片等媒体资源，ajax就很难处理了，因为没有流就很难处理大文件。当你的请求存在嵌套时，巨多的callback，且不说能不能实现同样效果的问题，只怕你会被同行深深的耻笑了，这都什么年代了，还嵌套callback？当你处理headers的时候，明显XMLHttpRequest或者$.ajax都没有这些API好用。

说了这么多，fetch API还是一个实验特性，至少如果你的浏览器支持度比较广的话，还是需要加入polyfill的。那么除了$.ajax和XMLHttpRequest之外，还有没有更好的库可以用呢？我推荐 axois（https://github.com/mzabriskie/axios ），绝对是一个非常好用，且API与fetch很类似。

axios.get('/user?ID=12345')
.then(function (response) {    
   console.log(response);
})
.catch(function (error) {    
   console.log(error);
});

关于fetch API 更多的细节可以阅读原文，传送门在此（https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API ）。

聊完技术，又到了一周聊生活的时间，最近才看完了一部电视剧《大秦帝国之崛起》，说实话我怎么那么不喜欢隔壁的老乡宁静演这部剧呢，难道是因为前有孙俪的芈八子已入脑海？倒是后半部的秦王，可圈可点的有些让我眼眶都红了，这部电视剧，打个7.5分吧。以前看矮大紧的《晓松奇谈》，这哥们最向往年代就是春秋战国时代，我也是一样，如此绚烂，太波澜壮阔了。

又到了一年一度的331时刻，大家都拼了我也是，虽然有些时候情绪低落，某些时候甚至怀疑过自己，后来还是坚定了信念，信念这个东西，有时候不得不说，对于人的意志有很大的帮助作用，而不至于让人的状态变的，那么飘忽不定。我建议每一个都应该要有一个信念，这个信念可以是具体的东西，也可以是虚无缥缈的思绪，程序员也好，管理人员也罢，如果没有信念，会是一个很大的遗憾。

你身边如果有朋友对混合领域（跨技术栈）或全栈，编程感悟感兴趣，可以转发给他们看哦，^_^先谢过啦。

更多精彩内容可关注我的个人微信公众号：搜索fed-talk或者扫描下列二维码，也欢迎您将它分享给自己的朋友。