QQ登录

只需要一步,快速开始

APP扫码登录

只需要一步,快速开始

手机号码,快捷登录

手机号码,快捷登录

查看: 740|回复: 0

[HTML/CSS/JS] fetch的使用

[复制链接]

等级头衔

积分成就    金币 : 2857
   泡泡 : 1516
   精华 : 6
   在线时间 : 1317 小时
   最后登录 : 2025-4-23

丰功伟绩

优秀达人突出贡献荣誉管理论坛元老活跃会员

联系方式
发表于 2023-7-23 07:09:33 | 显示全部楼层 |阅读模式
在Web开发中,获取数据是常见的任务之一。fetch是一种在JavaScript中发送HTTP请求和获取响应的方法。fetch使用Promise对响应进行封装,比传统的XHR请求更容易使用。本文将介绍如何在JavaScript中使用Fetch,并提供一个实际的示例。9 A3 k. {0 e( f, L9 F
发送请求
) m1 N- V( O5 O; w, b使用fetch发送请求很简单,只需要提供请求URL和可选参数即可。
2 G9 i! c7 \' F& l5 @
fetch('https://www.XXX.com/todos/1')
  .then(response => response.json())
  .then(data => console.log(data));
在上面的示例中,我们向一个API发送了一个请求,并用.then()方法链式地调用了两个回调函数。% n' @; {( z( s. f5 j; k! I
第一个.then()方法的参数是响应对象response。它提供了很多有用的方法,例如.json(),它将响应转换为JSON格式。
0 E5 Y2 y0 l, y第二个.then()方法的参数是由.json()解析出的数据对象data。在这个示例中,我们只是将数据输出到控制台上。0 z' W; T1 A5 d; v1 O  f
在这里需要注意的是,fetch随着Promise的链式调用而进入回调函数,如果遇到了错误,它会返回rejected状态的Promise对象。因此,在终止回调链之前应始终使用.catch()处理错误。/ r" S2 P9 e6 P+ h
fetch('https://www.XXX.com/todos/0')
  .then(response => {
    if (!response.ok) {
      throw new Error('网络错误');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.log(error));
在上面的示例中,我们向一个不存在的API发送了一个请求,因此响应对象的.ok属性为false。在.then()方法中,我们使用throw语句来抛出一个错误。在.catch()方法中,我们捕获了这个错误并输出它的信息。- i& K1 u" n* `
发送POST请求& W- g7 H2 M0 b/ a3 T' e' V( ]
fetch也可以用来发送POST请求。要发送POST请求,需要使用Request对象传递请求方法和请求头。要注意的是,fetch默认使用GET请求。
4 H$ Z: w1 O+ F' \- ^
fetch('https://www.XXX.com/api', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    username: 'user',
    password: 'pass'
  })
}).then(response => response.json())
  .then(data => console.log(data));
在上面的示例中,我们向一个API发送了一个POST请求。我们使用JSON.stringify()将待发送的数据对象转换为JSON格式,并在请求头中设置Content-Type。
- t$ k* v" G& u% o. ^处理二进制数据
' x4 J/ ]# ?3 X& w( u$ Nfetch也可以处理二进制数据,如Blob、File和FormData等。以下是一个示例代码,演示如何下载二进制文件:1 I0 r8 Q: J+ o3 k1 T6 H
fetch('https://www.XXX.com/img.png')
  .then(response => response.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    const img = document.createElement('img');
    img.src = url;
    document.body.appendChild(img);
  });
在上面的示例中,我们向一个URL发送了一个请求,并使用blob()方法将响应转换为Blob对象。我们使用URL.createObjectURL()方法将Blob对象转换为可用于显示图像的URL。最后,我们将图像的URL添加到文档中。' R& u6 U) ^) Z- U- C- R! @
总结
: h- d4 c) \5 f' q1 l4 mfetch是一种用于在JavaScript中发送HTTP请求和获取响应的方法。它使用Promise封装响应,比传统的XHR请求更容易使用。在本文中,我们介绍了如何使用fetch发送请求、如何发送POST请求、如何处理二进制数据。fetch简单易用,使用时需要注意的是,我们需要处理rejected状态的Promise对象,以及进行错误处理。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|paopaomj.COM ( 渝ICP备18007172号|渝公网安备50010502503914号 )

GMT+8, 2025-4-30 14:26

Powered by paopaomj X3.5 © 2016-2025 sitemap

快速回复 返回顶部 返回列表