始终不是很懂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。


jyren_Rachel
107 声望4 粉丝