fetch的使用:拳打axios、脚踢ajax

最新推荐文章于 2024-01-30 11:13:02 发布
最新推荐文章于 2024-01-30 11:13:02 发布
阅读量429 收藏 1
点赞数
分类专栏： java javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/n_s_X14/article/details/107533137
版权

如果你是一名对未来开发趋势有所了解的开发者，那么你一定知道，前后端分离的趋势。

现在的web体系中包含这么一项技术，称之为异步请求。

与之相对应的就是，模板页面。它是我我眼中比较旧的技术体系，因为其使用的还是通过模板引擎来生产页面，简单来说类似于asp,jsp那一类,无不例外使用了模板引擎，吹牛归吹牛，现在还是很多东西用的模板引擎开发出来的，是当下的主流技术。

在这种开发模式中，前端的网页要是涉及到后端数据的话，那么百分之百会将页面丢到后端开发者，后端开发者将页面修改为模板，以适应对模板开发的要求。这就有几率触发发生前端与后端开发者之间矛盾，造成对整个团队的开发效率下降。当然，如果团队管理者分发任务得当，工作分工合理，标准制作合理，那么问题也不大。但是如果团队管理者不懂技术，对团队内部的分工也不合理，那么前后端开发者发生了矛盾，能不能解决就不好说了。

在未来的技术开发体系中，前端与后端之间的联系渐渐断开，美曰其名：前后端分离。也就是前端的页面不再会交给后端开发人员做二次修改，而是使用js解析引擎中的网络请求api实现对数据的请求。具体表现为：前端开发者通过JavaScript语言，去调用浏览器内置的JavaScript api，实现从浏览器到服务器的数据请求。

前端开发人员编写的网络程序，应该用怎么样的数据格式请求到后端，或者后端开发者应该怎么配合前端发送数据，这需要前后端开发人员进行预先协商，这个协商和前面通过模板的方式协商不同。前后端分离后协商的内容将减小，主要讨论前端与后端怎么交换数据的问题，也就是关键在于后端网路接口该如何定义，前端数据请求有什么特点以及要求，会发送什么样格式的数据。

如果没有前后端分离，那么可能就不仅仅是协商api如何定义的问题了，可能还会涉及到其他问题，造成团队总体开发效率下降。

基于以上趋势，异步请求是解决前后端分离的一项炙手可热的技术。

现在所能直接使用的异步请求有两种一种称之为ajax，另外一种就是本文要介绍的fetch。当然，你可能会说那jQuery还能异步请求呢！其实jQuery只是包装了下ajax。还有vue开发团队开发的另外一个异步请求，那就是axios，这个组件相对于jQuery要更加高级一点，还封装了一层premise，可以实现对异步请求的链式调用，编程效率更高。

而本文所介绍的fetch api是用来替代ajax的下一代异步网络请求，axios的用法跟fetch相似。fetch关键在于他是原生的，可以在js代码中直接调用，而不同于jQuery、axios需要导入组件。

目录

环境声明

  1. 浏览器 Google Chrome 84.0.4147.89 测试无异常
  2. 浏览器 Firefox 78.0.2 测试无异常
  3. 开发工具1 vscode 1.47
  4. 开发工具2 IntelliJ IDEA 2020.1 (Ultimate Edition) Build #IU-201.6668.121
  5. web服务器 Tomcat 8.5.49
  6. java 编译工具 maven 3.6.2
  7. java 版本 1.8.0_231

参考链接

  1. mdn ：fetch的构造器
  2. mdn：fetch的使用demo
  3. mdn：Request对象

阅读本文需要具备的基本条件

  1. 熟悉es2015(es6) 语法
  2. 熟悉es2015 premise 对象
  3. 熟悉JavaScript对象JSON
  4. 掌握java语言*
  5. 熟悉java servlet注解*

以上技术列表中，带有*号结尾的是非必须掌握的，因为文中会涉及到前端到后端的完整过程，如果读者朋友不懂java后端，可以忽略这个要求，忽略后，不影响对fetch api的使用

一 、 fetch api 简介

  • 语法：fetch( UrlStr|RequestObj [,initPropertiesObj] )
  • 返回值：一个被Premise对象包装过的Response对象
  • 特点：
    • fetch发送http请求的时候，默认不携带cookie信息，除非在initPropertiesObj中显式声明
    • 因为fetch()方法返回的是一个被Premise对象包装过的Response对象，所以即使Response对象的响应码是400或者500错误码，也算完成了一次http交互，因为返回400或者500也算一次完整http交互，所以不算Premise失败。
    • fetch()方法不接受跨域的cookie

1. 参数1 urlStr|RequestObj

1.1 使用url字符串作为fetch的第一个参数

fetch的第一个参数，大部分博客中使用的url字符串，作为异步请求的请求地址，其第二参数是可选的。如果使用fetch的时候，只传入了url字符串作为第一个参数，在这种请情况下，fetch只是一个简单的get请求。如果你需要将 fetch 改为post请求，那么就必须要将第二个参数对象中添加 method 属性，且 method 属性值等于字符串POST字面值。

1.2 使用Request对象作为fetch的第一个参数

但你如果使用了Request对象作为fetch的第一个参数，那么就不需要传入fetch的第二个参数了。本质上，如果使用Request对象作为参数，fetch充其量就算个异步请求启动器了。

因本文同大多数博客一样，使用的 url 字符串作为 fetch 的第一个参数，所以下文就只贴上Request对象相关文档链接了。因为在这里介绍 Request 对象的话，那么下文将会出现相当多的内容与这里重复。也就是说在下文介绍的 InitPropertiesObj 参数的时候，其属性与 Request 对象基本一致。
相关文档：mdn：Request构造器文档

2. 参数2 initPropertiesObj (可选)

fetch方法的第二个参数：initPropertiesObj是一个对象，这个对象中定义了请求中的请求头，请求体，方法等内容。如果不传入fetch的第二个参数，那么默认就是一个简单的get请求、

以下开始介绍这个对象会被使用属性，被*号标注的表示是我所认为的、不常用的、需要了解的

  1. method : 请求类型(GET,POST,PUT,OPTIONS,HEAD,DELETE,CONNECT,TRACE)
  2. headers : 请求头字典对象或者Header对象
  3. body : 请求体(jsonstr,FormData对象)
  4. mode* : 请求模式(cors,no-cors,same-origin,navigate)，是否是跨域请求
  5. credentials* : 发送的请求是否使用cookie，这里单独取出来配置，是因为默认fetch是不携带cookie发送请求的。可取值：{omit,same-origin,include}
  6. cache* : 定义请求的缓存模式。可取值{default, no-store,reload,no-cache,force-cache,only-if-cached}
  7. redirect* : 定义重定向行为处理方式，可取值：{manual,follow,error}

3. fetch返回值Premise以及Response对象

  • fetch函数调用后，返回值是一个Premise对象实例，其内部包含response对象。可以通过调用Premise的then函数来获取其内部的response对象。then函数的参数是必须是一个带参函数，这样then在内部调用这个传入的函数时，就会将premise内部的response传给这个函数，以达到使用response的目的。传入then函数的函数，可以有返回值，也可以没有返回值。如果有返回值，那么then将会把这个返回值包装成premise返回出来。这样，你可以在then后面继续调用新的premise对象。这就是链式编程，可以无限调用新的premise对象的then函数。

  • response对象的相关文档 : mdn：response对象文档链接 , 通过premise对象的then函数获得其内部的response之后，这个response对于我来说，所用到的属性不多，我下面就简单介绍下相关属性：

    • ok：代表这次请求是否成功，这个是否成功的判断依据就在于http状态码在200-299之间的数字
    • status：表示http状态码

    除了以外，我还常用其自带的函数来解析来自后端发来的数据，通常会用两个response对象的函数：

    • json(): 这个函数通过对后端返回的数据按照json字符串解析为JavaScript对象，在第二大节的时候我会使用到。
    • text()：这个函数式直接将后端响应的原始数据体返回。在下文中我不会使用到这个函数。

二、 fetch api的使用

1. 后端基本环境以及配置(java)

  • maven主要依赖
     <dependency  
       <groupId>com.alibaba</groupId 
      <artifactId>fastjson</artifactId>
       <version>1.2.68</version>
     </dependency>
     <dependency>
       <groupId>javax.servlet</groupId>
       <artifactId>javax.servlet-api</artifactId>
       <version>4.0.1</version>
     </dependency>
  • Filter代码
     @WebFilter(urlPatterns = "/json_api")
     public class CharsetFilter implements Filter {
         @Override
         public void init(FilterConfig filterConfig) throws ServletException {
             System.out.println("字符过滤器初始化成功");
         }
         @Override
         public void doFilter(ServletRequest servletRequest, 
             ServletResponse servletResponse, 
             FilterChain filterChain) 
                 throws IOException, ServletException 
         {
             servletRequest.setCharacterEncoding("utf-8");
             servletResponse.setCharacterEncoding("utf-8");
             servletResponse.setContentType("application/json");
             filterChain.doFilter(servletRequest, servletResponse);
         }
         @Override
         public void destroy() {
             System.out.println("字符过滤器销毁成功");
         }
     }
  • servlet代码
@MultipartConfig   //这里必须标注，如果不标注，会出现fetch的post请求数据无法接收的情况
@WebServlet(urlPatterns = "/json_api", name = "test_api")
public class FetchJsonTestServlet extends HttpServlet {
    Map respMap = new HashMap();

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) 
    throws ServletException, IOException {
        try (PrintWriter writer = resp.getWriter()) {
            System.out.println(
                String.format("get request,query string 'p' was %s", 
                req.getParameter("p"))
            );
            respMap.put("msg", "这是get返回消息");
            writer.write(JSON.toJSONString(respMap));
        }
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) 
    throws ServletException, IOException {
        System.out.println(
        String.format("post request,Parameter 'p' was %s, parameter 's' was %s",
            req.getParameter("p"), 
            req.getParameter("s")));
        System.out.println(
            String.format("upload file name was %s", 
            req.getPart("f") == null ? 
                "null" : req.getPart("f").getSubmittedFileName()));
    }
}

2. fetch的普通get请求实例(文件index.html)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>fetch测试</title>
</head>
<body>
</body>
<script>
    fetch('http://localhost/2020722/json_api').then(res => {
        return res.json()
    }).then(json => {
        console.log(json)
    })
</script>
</html>

代码解释:
以上代码表明我的使用fetch请求后，通过调用其返回premise对象的then函数，然后用箭头函数传入给then，然后这个箭头函数内部，通过调用response对象的json()函数，这个json()将后端返回的数据体按照json格式，解析为对象并返回了出来。我编写的这个箭头函数，又将这个解析好的对象返回给了then内部，这样then函数将这个解析好的对象再次包装成一个新的premise对象返回出来。我们继续调用这个新Premise对象then函数，将这个新premise内部被解析好的对象传递给我们的箭头函数,最后我在箭头函数内部将这个对象，输出到了浏览器控制台。

通过Firefox访问index.html,控制台输出结果如下
通过浏览器访问网站index.html的控制台输出
通过GoogleChrome访问inex.html结果如下
在这里插入图片描述
以上代码，整个流程看起来非常紧凑，这是因为在实例中使用了箭头函数，是因为这样的代码看起来整洁、简约、高效，但是对于没有搞懂premise对象的和不熟悉es6语法的读者可能不太友好。

以上index.html中的JavaScript代码等同于：

 function resphandler(response) {
	return response.json()
}
function jsonoutput(jsonobj) {
	console.log(jsonobj)
}
let pre1 = fetch('http://localhost/2020722/json_api')
let pre2 = pre1.then(resphandler)
pre2.then(jsonoutput)

那么，通过以上的直观比较，很容易看出来箭头函数以及premise对象简单高效的优势。

3. Fetch在url中携带参数

fetch('http://localhost/2020722/json_api?p=param'),这种写法等于在浏览器地址栏中输入http://localhost/2020722/json_api?p=param，这两种方式，从http请求本质上来看是一样的，但是结果形式不一样。fetch使用的异步，而地址栏请求使用的是同步

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>fetch测试</title>
</head>
<body>

</body>
<script>
	fetch('http://localhost/2020722/json_api?p=param').then(res =>{
		return res.json()
	}).then(json >={
		console.log(json)
	})
</script>
</html>

不论是通过地址栏还是通过fetch异步请求，在后端控制台都会以下输出：

get request,query string 'p' was param

以上能说明通过地址栏和通过fetch，且fetch不额外添加参数的情况下，本质上http请求都是一个类别。

4. fetch模拟表单提交

从这里开始就要涉及到较多的对象了.现index.html主体代码如下：

<head>
	<meta charset="UTF-8">
    <title>fetch测试</title>
</head>
<body>
    <div id="app">
		<h6>通过fetch提交的表单</h6>
		参数p<input type="text" name="p" value="">
		参数s<input type="text" name="s" value="">
		文件f<input type="file" name="f">
		<button onclick="submit()">提交</button>
	</div>
</body>
<script>
	function submit() {
		let data = new FormData()
		data.append('p', document.querySelector('input[name=p]').value)
		data.append('s', document.querySelector('input[name=s]').value)
		data.append('f', 
		    document.querySelectorAll('input[type=file]').item(0).files.item(0))
		fetch('http://localhost/2020722/json_api', {
			method: 'POST',
			body: data,
		}).then(response =>{
			console.log(response.ok)
		})
	}
</script>

代码解释：
代码中主要模拟了一个普通表单，并携带文件的的post请求。以上代码中我传入了fetch的第二个参数，initPropertiesObj,我给这个对象设置了method方法，也就是说这次异步请求，是一个http的post请求，接着我配置了post请求的请求体，body属性。这里使用了FormData对象，这个对象是用于自定义表单的，对于前端开发者来说，FormData对象就是为了异步请求而存在的。FormData对象这里就不再做过多的介绍

请参考以下文档

通过GoogleChrome提交的表单内容截图
在这里插入图片描述后端接收到的表单内容以及文件如下：

post request,Parameter ‘p’ was p, parameter ‘s’ was s
upload file name was titl2.png

5. fetch提交json数据

index.html 内容修改为：

<head>
    <meta charset="UTF-8">
    <title>fetch测试</title>
</head>

<body>
    <div id="app">
        <h6>通过fetch提交的表单</h6>
        参数p<input type="text" name="p" value="">
        参数s<input type="text" name="s" value="">
        <button onclick="submit()">提交</button>
    </div>
</body>
<script>
    function submit() {
        fetch('http://localhost/2020722/json_api', {
            method: 'POST',
            body: JSON.stringify({
                p: document.querySelector('input[name=p]').value,
                s: document.querySelector('input[name=s]').value,
            }),
            headers: {
                'content-type': 'application/json'
            }
        }).then(response => {
            console.log(response.ok)
        })
    }

</script>

后端servlet doPost方法代码修改为：


    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) 
        throws ServletException, IOException 
    {
        try (BufferedReader reader = req.getReader()) {
            String jsonStr = reader.readLine();
            System.out.println(jsonStr);
            Map map = JSON.parseObject(jsonStr, Map.class);
            System.out.println(map);
        }
    }

使用Google Chrome提交表单截图
在这里插入图片描述

后端输出如下

{“p”:“param”,“s”:“str”}
{p=param, s=str}

三、踩坑告诫

我所踩的坑，都是为了模拟form标签的默认enctype请求,也就是form标签内部的enctype为application/x-www-form-urlencoded值时，所提交的post表单请求。但是没有模拟成功过，我所做过的实验都失败了。通过总结我发现，fetch post提交的表单数据永远是按照content-type类型为multipart/form-data格式提交的，即使在fetch第二参数initPropertiesObj对象中声明content-type类型为普通表单(application/x-www-form-urlencoded)也没有用。

基于以上总结，能解释后端(java)代码中，必须在servlet上标注@MultipartConfig注解，才能接收到fetch的POST请求，否则servlet是无论如何都没法接收到来自前端的请求数据的。

所以基于目前最主流的提交数据格式来看，fetch的使用场景局限于jsonStr提交和使用FormData对象将数据提交到后端。

n_s_X14
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
axios-fetch-adapter:提取适用于axios的适配器
05-10
我将在Web应用程序中采用PWA，并且这些Web应用程序大量使用带有默认XMLHTTPRequest适配器的Axios。 因此，我必须切换到Fetch适配器； 但是，Axios目前没有用于提取API的适配器。 因此，我在等待Axios正式发布时编写...
axios-like-fetch:像使用便宜的axios一样使用fetch
04-18
轴索式提取像使用便宜的axios一样使用fetch。 基于 ，但为大多数功能提供语法。 希望我们不再需要其他包装。贡献请随时打开您观察到的问题，或打开以下请求： 解决问题更新文件添加测试安装npm install axios-like-...
fetch和axios的优缺点
weixin_45532305的博客
07-31 3593
fetch与axios fetch fetch 是一个低层次的API，你可以把它考虑成原生的XHR，所以使用起来并不是那么舒服，需要进行封装。多年来，XMLHttpRequest一直是web开发者的亲密助手。无论是直接的，还是间接的， 当我们谈及Ajax技术的时候，通常意思就是基于XMLHttpRequest的Ajax，它是一种能够有效改进页面通信的技术。 Ajax的兴起是由于Google的Gmail所带动的，随后被广泛的应用到众多的Web产品（应用）中，可以认为， 开发者已经默认将XMLHttpRequ
在vue中使用fetch代替axios
6块腹肌的博客
06-09 3687
fetch是ES6新出的，基于promise设计，没有进行封装，属于原生js，所以在vue中使用的时候也不需要进行import引入就可以直接使用。 fetch的语法简单 fetch请求返回的是promise对象，需要进行json转换，所以需要两次.then() 用法示例： fetch("/api/test/") .then(res => { return res.json...
Fetch和Axios我该用哪个？哪个更适合HTTP请求？
前端全栈开发者
11-29 2236
前端开发最重要的部分之一是通过发出HTTP请求与后端进行通信，我们有几种方法可以异步地在Javascript中进行API调用。 几年前，大多数应用程序都使用Ajax发送HTTP请求，Ajax代表异步Javascript和XML。但是现在，开发人员通常会决定在fetch() API和Axios之间进行选择。 在本文中，我想比较这两种方法，并简要介绍一下基本知识和语法。除此之外，我还将比较在两种情况下以及在错误处理中将数据转换为JSON格式的过程。我还将讨论HTTP拦截和下载进度。 开始吧！ Fetch概述和.
vue3(四)-基础入门之 fetch 与 axios
weixin_43520586的博客
11-28 3582
3.Axios 默认返回 JSON 格式的数据，而 Fetch 返回的是 Response 对象，需要自己通过 Response 的方法（如 json()、text() 等）将结果转换成所需的格式。4.Axios 对于请求错误可以直接抛出异常，方便进行错误处理，而 Fetch 的错误处理比较繁琐，需要手动检查 Response.ok 属性。2.Axios 可以拦截请求和响应，可以全局配置默认的请求头、超时时间等，而 Fetch 目前不支持这些功能。// 2.axios post请求。// post 请求。
fetch与axios的区别
wyhcyzai99的博客
08-13 1869
fecth与xios的定义 fecth是浏览器提供的一个api，而axios是社区封装的一个组件 fecth是一个低底层的api，是W3C的正式标准，使用起来不怎么舒服，所以需要封装，以便使用。 fetch和axios的区别 fetch是规范底层api axios是封装 fetch和axios的优缺点 ...
ajax、axios、fetch区别
01-03
ajax、axios、fetch区别 ajax $.ajax({ type: 'POST', url: url, data: data, dataType: dataType, success: function () {}, error: function () {} }); 优缺点： 本身是针对MVC的编程,不符合现在前端MVVM的...
对异步请求xhr、ajax、axios、fetch的区别比较
01-08
总结来说，xhr是最基础的异步请求方式，jQuery的$.ajax简化了使用，axios提供了Promise支持，适合现代项目，而fetch则提供了一种更现代、简洁的API。选择哪种方式取决于项目需求、浏览器兼容性和开发团队的技术栈。
javascript-axios:使用AXIOS（HTTP库）和JSON占位符APIJavaScript Fetch API速成课程
03-27
AXIOS和Fetch API都是JavaScript中广泛使用的库和原生功能，用来处理这些请求。让我们深入了解一下这两个工具。 首先，AXIOS是一个基于Promise的HTTP库，可运行在浏览器和Node.js环境中。它被设计为轻量级且易于...
Axios 与Fetch 的区别
乌龙茶不甜的博客
03-07 1750
Axios与Fetch的区别
fetch和axios的区别和封装一个功能齐全的axios
最新发布
程序媛的梦工厂
01-30 1347
概念不同 Fetch是一种新的获取资源的接口方式，可以直接使用 Axios是一个基于XMLHttpRequest封装的工具包，需要引入才可以使用 传递数据的方式不同 Fetch则是需要放在body属性中，以字符串的方式进行传递 Axios是放到data属性里，以对象的方式进行传递 响应超时 Fetch需要通过AbortController来设置 Axios是直接设置timeout就可以 对数据的转化 Fetch则不同，它需要使用者进行手动转化,arrayBuffer()，blob()，
必备-6.axios和fetch用法
pinganaaa的博客
11-20 1389
文章目录必背-6.axios和fetch用法axiosFetch同源与跨域 必背-6.axios和fetch用法 axios 1.axios是什么？ axios官方网址：http://www.axios-js.com/zh-cn/docs/ axios是什么：axios是基于Promise封装的ajax库，基于这个类库发送ajax请求，默认就是基于promise管理的，核心是XMLHttpRequest ==axios基于请求方式分为了:get/head/delete/opations/post/put/
fetch与axios的对比
nick_zhang的博客
06-06 1021
fetch缺陷 1.fetch默认不会带cookie，需要添加配置项, 要用crendentials:“include”, 2.fetch不支持abort，不支持超时控制， axios好处 1.提供了一些并发请求的接口 function getUserAccount() { return axios.get('/user/12345'); } function getUserPermissions() { return axios.get('/user/12345/permissions'); }
promise fetch axios
hc3176的博客
05-30 164
promise fetch axios 基于Promise发送Ajax // 路由 app.get('/data', (req, res) => { res.send('Hello World!') }) function queryData(url) { var p = new Promise(function (resolve, reject) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = func
Fetch和Axios到底有什么区别
weixin_48309048的博客
08-25 7861
Fetch和Axios到底有什么区别
ajax、fetch和axios的比较
qq_43539854的博客
05-30 4552
AJAX、Fetch、axios AJAX AJAX可以在不更新全局的情况下更新局部页面。通过在与服务器进行数据交换，可以使网页实现异步更新。 AJAX的原理就是通过XHR对象来向服务器发起异步请求，从服务器获得数据，然后用JS来操作DOM更新页面。领导想找小李汇报一下工作，就委托秘书去叫小李，自己就接着做其他事情，直到秘书告诉他小李已经到了，最后小李跟领导汇报工作。Ajax请求数据流程与“领导想找小李汇报一下工作”类似，上述秘书就相当于XMLHttpRequest对象，领导相当于浏览器，响应数据相当于小
fetch与axios的区别（fetch的真正用法）
热门推荐
zuggs_的博客
06-22 4万+
首先不得不吐槽一下fetch的response机制了，真的太麻烦了，当我快放弃的时候，才真正懂得怎么用 axios使用特别简单 axios("http://xxx/xxx.json？a=123'").then((r)=&gt;{     console.log(r)//这里的r是响应结果 }) 但是axios不支持jsonp就比较恶心了，不过我们可以引入jsonp模块，详细使用前面blog...
Vue之fetch&axios
weixin_46015333的博客
02-26 1960
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码
ajax fetch axios
04-27
综上所述，Fetch和Axios都比传统的AJAX更加简单直观、易于维护，因此已经成为当今最为流行的前端数据请求解决方案之一。但是，在选择具体的技术时，需要根据具体的项目需求和开发经验来做出决策。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值