Axios和Fetch数据传输效率分析.pdfVIP

◆信息技术与应用◆

1009-0940-2023（2）-27-28

Axios和Fetch数据传输效率分析

何向繁何向繁江西省工业和信息化研究院江西省工业和信息化研究院南昌市南昌市330000330000

摘摘要要：：本文主要是模拟实际使用场景本文主要是模拟实际使用场景，，使用使用AxiosAxios和和FetchFetch方法进行定量数据的传输方法进行定量数据的传输，，从从BrowseBrowse到到ServerServer，，

模拟实际数据传输过程模拟实际数据传输过程，，根据结果深度分析两种方式下网络数据的传输运行效率根据结果深度分析两种方式下网络数据的传输运行效率，，为今后在系统运用中选择哪种方为今后在系统运用中选择哪种方

式进行数据传输提供一个参考式进行数据传输提供一个参考。。

关键词关键词：：AJAXAJAXAxiosAxiosFetchFetchXMLHttpRequestXMLHttpRequest

0引言◎◎FetchFetch采用模块化设计采用模块化设计，，APIAPI分散在多个对象上分散在多个对象上

随着信息技术的飞速发展随着信息技术的飞速发展，，系统建设目前已从系统建设目前已从MVCMVC（（ResponseResponse对象对象、、RequestRequest对象对象、、HeadersHeaders对象对象），），更合更合

向向MVVMMVVM过渡过渡，，在前端技术中在前端技术中ReactReact、、VueVue等框架陆续等框架陆续理一些理一些；；相比之下相比之下，，XMLHttpRequestXMLHttpRequest的的APIAPI设计并不设计并不

被设计出来并应用于实际项目中被设计出来并应用于实际项目中，，其中的前端数据传输其中的前端数据传输是很好是很好，，输入输入、、输出输出、、状态都在同一个接口管理状态都在同一个接口管理，，容易容易

技术也不断的更新迭代技术也不断的更新迭代，，目前比较流行的就是目前比较流行的就是AxiosAxios和和写出非常混乱的代码写出非常混乱的代码。。

FetchFetch，，相比于以往的前端数据传输相比于以往的前端数据传输，，现阶段的传输技现阶段的传输技◎◎FetchFetch通过数据流通过数据流（（StreamStream对象对象））处理数据处理数据，，可可

术在支持术在支持PromisePromise、、ViewModelViewModel层分类等方面具有明显层分类等方面具有明显以分块读取以分块读取，，有利于提高网站性能表现有利于提高网站性能表现，，减少内存占减少内存占

的优势的优势，，本文通过搭建模拟真实的应用场景本文通过搭建模拟真实的应用场景，，通过不同通过不同用用，，对于请求大文件或者网速慢的场景相当有用对于请求大文件或者网速慢的场景相当有用。。

数据量的数据请求数据量的数据请求，，测试目前流行的测试目前流行的AxiosAxios和和FetchFetch框框XMLHTTPRequestXMLHTTPRequest对象不支持数据流对象不支持数据流，，所有的数据必须所有的数据必须

架的传输效率架的传输效率，，对比实际数据传输值对比实际数据传输值，，得出不同情况下得出不同情况下放在缓存里放在缓存里，，不支持分块读取不支持分块读取，，必须等待全部拿到后必须等待全部拿到后，，

的推荐选择参考的推荐选择参考。。再一次性吐出来再一次性吐出来。。

1.2模拟应用场景的搭建

1传输效率分析模拟真实的应用场景模拟真实的应用场景，，主要是做到前后台分离主要是做到前后台分离，，后后