快乐十分钟开奖走势图-广东十分快乐开奖结果-广东快乐十分开奖查询

热门关键词: 快乐十分钟开奖走势图,广东十分快乐开奖结果,广东快乐十分开奖查询
您的位置:快乐十分钟开奖走势图 > 广东十分快乐开奖结果-web前端 > XMLHttpRequest和Fetch API,您认为哪种最适合Ajax?-

XMLHttpRequest和Fetch API,您认为哪种最适合Ajax?-

2020-01-22 09:46

来台湾出差快一个星期了,相比大陆深圳,还是更喜欢内地多点,这边的天气实在不敢恭维,天天下雨,交通汽车尾气太重了,摩托车四处穿插.....休息时间还是呆在家里,写写东西,给大家分享点干货,今天来聊点数据ajax的基础知识。

2019年3月庆祝Ajax成立20周年。有点。XMLHttpRequest作为IE5.0 ActiveX组件于1999年交付的第一个实现。

在此之前,曾经有一些方法可以在不刷新整个页面的情况下从服务器提取数据,但是它们通常依赖于笨拙的技术,例如``

注入或第三方插件。MicrosoftXMLHttpRequest为Outlook电子邮件客户端开发了一种基于浏览器的替代产品。

XMLHttpRequest直到2006年才成为Web标准,但大多数浏览器都实现了该标准。它在Gmail和Google Maps中的采用导致Jesse James Garrett在2005年发表的文章AJAX:一种新的Web应用程序方法。新术语明确了开发人员的重点。

AJAX to Ajax

AJAX是异步JavaScript和XML的助记符。绝对是“异步的”,但是:

可以使用JavaScript,尽管可以选择VBScript和Flash

有效负载不必是XML,尽管在当时很流行。可以使用任何数据格式,今天,通常首选JSON。

现在,我们将“ Ajax”用作任何客户端过程的通用术语,该过程从服务器获取数据并动态更新DOM,而无需刷新整个页面。Ajax是大多数Web应用程序和单页应用程序的核心技术。

极端XMLHttpRequest

以下JavaScript代码示出了用于一个基本HTTP GET请求http://domain/service使用XMLHttpRequest

letxhr=newXMLHttpRequest();xhr.open('GET','http://domain/service');//requeststatechangeeventxhr.onreadystatechange=function(){//requestcompleted?ifreturn;if{//requestsuccessful-showresponseconsole.log;}else{//requesterrorconsole.log('HTTPerror',xhr.status,xhr.statusText);}};//startrequestxhr.send();

XMLHttpRequest对象具有许多其他选项,事件和响应属性。例如,可以设置和检测以毫秒为单位的超时:

//settimeoutxhr.timeout=3000;//3secondsxhr.ontimeout=()=>console.log('timeout',xhr.responseURL);

一个progress事件可以报告长时间运行的文件上传:

//uploadprogressxhr.upload.onprogress=p=>{console.log(Math.round*100)+'%');}

选项的数量可能令人困惑,并且早期实现XMLHttpRequest存在一些跨浏览器不一致的情况。因此,大多数库和框架都提供Ajax包装函数来处理复杂性,例如jQuery.ajax()方法:

//jQueryAjax$.ajax('http://domain/service').done(data=>console.log.fail=>console.log('error:',status));

Fast Forward to Fetch

该提取API是一个现代化的替代品XMLHttpRequest。通用的Headers,Request和Response接口提供了一致性,而Promises允许更容易的链接和异步/等待而没有回调。上面的XHR示例可以转换为更简单的基于Fetch的代码,甚至可以解析返回的JSON:

fetch('http://domain/service',{method:'GET'}).then(response=>response.json.then(json=>console.log.catch(error=>console.error('error:',error));

Fetch干净,优雅,易于理解,并且在PWA Service Worker中大量使用。为什么不使用它代替古老的XMLHttpRequest?

不幸的是,Web开发从未如此明确。Fetch尚未完全替代Ajax技术...

浏览器支持

Fetch API得到了很好的支持,但是在所有版本的Internet Explorer中都将失败。使用2017年之前版本的Chrome,Firefox和Safari的人可能也会遇到问题。这些用户可能只占您用户群的一小部分……或者可能是主要客户。开始编码之前,请务必检查!

此外,与成熟的XHR对象相比,Fetch API较新,并且可以接收更多正在进行的更改。这些更新不太可能破坏代码,但是希望在未来几年中进行一些维护工作。

默认无Cookie

与不同XMLHttpRequest,并非所有Fetch的实现都会发送Cookie,因此您的应用程序的身份验证可能会失败。可以通过更改第二个参数中传递的启动选项来解决此问题,例如

fetch('http://domain/service',{method:'GET',credentials:'same-origin'})

错误不会被拒绝

令人惊讶的是,HTTP错误(例如404 Page Not Found或)500 Internal Server Error不会导致Fetch Promise拒绝;将.catch()永远不会运行。通常,它将response.ok状态设置为false进行解析。

仅当请求无法完成时才发生拒绝。这会使错误捕获的实现更加复杂。

不支持超时

提取不支持超时,只要浏览器选择,请求将继续。需要进一步的代码将Fetch包装在另一个Promise中,例如

//fetchwithatimeoutfunctionfetchTimeout(url,init,timeout=3000){returnnewPromise=>{fetch.then.catch;setTimeout;}}

…或也许Promise.race()首先获取或超时完成时使用哪个解析,例如:

Promise.race([fetch('http://url',{method:'GET'}),newPromise(resolve=>setTimeout.then(response=>console.log

Aborting a Fetch

轻松终止XHR请求,xhr.abort()并在必要时使用xhr.onabort功能检测此类事件。

几年来无法中止Fetch,但是现在实现AbortController API的浏览器支持它。这将触发一个信号,该信号可以传递给Fetch启动对象:

constcontroller=newAbortController();fetch('http://domain/service',{method:'GET'signal:controller.signal}).then(response=>response.json.then(json=>console.log.catch(error=>console.error('Error:',error));

可以通过调用中止获取controller.abort();。Promise拒绝,因此.catch()调用该函数。

No Progress

在撰写本文时,Fetch不支持进度事件。因此,不可能报告文件上传或类似的大型表单提交的状态。

XMLHttpRequest与Fetch API?

最终,选择是您自己的……除非您的应用程序具有要求上载进度条的IE客户端。

对于更简单的Ajax调用,它XMLHttpRequest是较低级别的,更复杂的,并且您将需要包装函数。不幸的是,一旦您开始考虑超时,调用中止和错误陷阱的复杂性,Fetch也会如此。

您可以选择将Fetch polyfill与Promise polyfill结合使用,以便可以在IE中编写Fetch代码。但是,XHR被用作备用。并非每个选项都能按预期工作,例如,无论设置如何,都会发送Cookie。

获取是未来。但是,该API是相对较新的,它不提供所有XHR功能,并且某些选项比较繁琐。在接下来的几年中请谨慎使用。

总结

总而言之,XMLHttpRequest和Fetch API,对于我们Web前端工程师,都必须掌握,不同场景,不同项目,好自用之即可。

本文由快乐十分钟开奖走势图发布于广东十分快乐开奖结果-web前端,转载请注明出处:XMLHttpRequest和Fetch API,您认为哪种最适合Ajax?-

关键词: