初识fetch

始终不是很懂fetch的作用，然后查了很多资料，看了一篇不错的文章，结合自己之前学习的Promise，然后做一篇文章，稍微记录一下。

虽然标题感觉比较大，然后指出了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的主要优点是

语法简洁，更加语义化
基于标准的Promise实现，支持async/await
同构方便

但是也有它的不足

fetch请求默认是不带cookie的，需要设置fetch(url, {credentials: ‘include’})
服务器返回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。