初识fetch

始终不是很懂fetch的做用，而后查了不少资料，看了一篇不错的文章，结合本身以前学习的Promise，而后作一篇文章，稍微记录一下。
传统 Ajax 已死，Fetch 永生

虽然标题感受比较大，而后指出了XMLHttpRequest的局限性。XMLHttpRequest是一个设计粗糙的API，不符合关注分离的原则，配置和调用方式也很混乱，并且基于事件的异步模式没有Promise友好。虽然我也没有以为这样的理由足够强大到能够把Ajax逼死，可是毕竟流行是一种趋势。随着ES6时代的全面爆发，相信fetch的时代也将不会很远了。

如今来比较为了发起一个异步请求，两种写法的区别。

fetch的好处

用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("error")
    }
    xhr.send();

用fetch实现的方式：

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

使用ES6的箭头函数后

fetch(url).then(response => response.json())
    .then(data => console.log(data))
    .catch(e => console.log("error"))

也能够用async/await的方式

try{
        let response = await fetch(url);
        let data = await response.json();
        console.log(data);
    } catch(e){
        console.log("error")
    }

用了await后，写异步代码感受像同步代码同样爽。await后面能够跟Promise对象，表示等待Promise resolve()才会继续下去执行，若是Promise被reject()或抛出异常则会被外面的try...catch捕获。

fetch的主要优势是

1. 语法简洁，更加语义化

2. 基于标准的Promise实现，支持async/await

3. 同构方便

可是也有它的不足

1. fetch请求默认是不带cookie的，须要设置fetch(url, {credentials: 'include'})

2. 服务器返回400,500这样的错误码时不会reject,只有网络错误这些致使请求不能完成时，fetch才会被reject.

另外fetch的不足来自Promise

没有 Deferred

Deferred 能够在建立 Promise 时能够减小一层嵌套，还有就是跨方法使用时很方便。
ECMAScript 11 年就有过 Deferred 提案，但后来没被接受。其实用 Promise 不到十行代码就能实现 Deferred：es6-deferred。如今有了 async/await，generator/yield 后，deferred 就没有使用价值了。

没有获取状态方法：isRejected，isResolved

标准 Promise 没有提供获取当前状态 rejected 或者 resolved 的方法。只容许外部传入成功或失败后的回调。我认为这实际上是优势，这是一种声明式的接口，更简单。

缺乏其它一些方法：always，progress，finally

always 能够经过在 then 和 catch 里重复调用方法实现。finally 也相似。progress 这种进度通知的功能尚未用过，暂不知道如何替代。

不能中断，没有 abort、terminate、onTimeout 或 cancel 方法

Fetch 和 Promise 同样，一旦发起，不能中断，也不会超时，只能等待被 resolve 或 reject。