初识fetch

发布时间:2019-08-10 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了初识fetch脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

始终不是很懂fetch的作用,然后查了很多资料,看了一篇不错的文章,结合自己之前学习的Promise,然后做一篇文章,稍微记录一下。
传统 Ajax 已死,Fetch 永生

虽然标题感觉比较大,然后指出了XMLHttPRequest的局限性。XMLHttpRequest是一个设计粗糙的@L_406_2@,不符合关注分离的原则,配置和调用方式也很混乱,而且基于事件的异步模式没有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。

脚本宝典总结

以上是脚本宝典为你收集整理的初识fetch全部内容,希望文章能够帮你解决初识fetch所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。