咨询电话：400-829-6069

网工干货知识

文章知识点

超全学习笔记

无线技术专题

网工技术科普

网工技术实战

网工技术详解

网工实验

精选题库

认证考试大纲

超全学习笔记

当前位置：首页 > 干货知识

使用 Fetch API 进行获取和发送数据的方法

更新时间：2026年03月27日作者：spoto 标签(Tag)：

fetch()方法用于向服务器发送HTTP请求，而无需重新加载页面。这提供了一种比旧的XMLHttpRequest对象更高效的替代方案。fetch()的主要优点之一就是它使用了……承诺/诺言与回调相比，这种方式能够更有效地管理异步操作。使用Promise可以避免不必要的麻烦。回调地狱在嵌套的回调函数中，很难理解和维护这些回调函数的逻辑。

不过，值得注意的是，并非所有浏览器都原生支持 fetch() 方法。对于较旧的浏览器来说不过，您仍然可能需要依赖 XMLHttpRequest 对象，或者使用一些替代方案来确保兼容性。

fetch()方法可以处理多种类型的HTTP请求，比如GET、POST、PUT和DELETE等。在本文中，我们将通过实际示例来探讨如何运用fetch()API。

fetch()函数的基本语法

`fetch()`请求的基本语法如下所示：

JavaScript

获取/提取(URL,{选项}).那么(数据=>{// 在这里做一些事情吧}).捕捉(错误/失误=>{// 捕获并显示错误})

Fetch与XMLHttpRequest的比较

fetch()函数中的承诺：与XMLHttpRequest不同，fetch()是基于Promises的，这使得处理多个异步操作变得更加容易。
易于理解的代码：与 XMLHttpRequest 中的回调相比，使用 fetch() 方法可以使得代码更加易读且易于维护。
浏览器兼容性：虽然 fetch() 得到了广泛的支持，但有些较旧的浏览器可能并不支持它。在这种情况下，仍然需要使用 XMLHttpRequest。

使用 fetch() 函数时，可以结合不同的 HTTP 方法来发送请求。

示例1：使用fetch()方法发起GET请求

GET请求用于从服务器中获取数据。我们以 https://jsonplaceholder.typicode.com/ 为例，这是一个免费的REST API，它提供了诸如帖子、用户等示例数据。

HTML代码：

首先，创建一个基本的HTML文件，并在其中加入JavaScript脚本。在JavaScript脚本中，我们将执行相关的请求操作。

HTML

<!DOCTYPE html><HTML 长=“en”>  <头部>    <标题>Fetch API</标题>  </头部>  <身体>    <除法>      <h1>Fetch API GET REQUEST</h1>      <h3>Fetching Users</h3>      <!-- 用于显示获取到的用户数据的表格 -->      <表格/列表 id=“用户”></表格/列表>    </除法>         <!-- 链接JavaScript文件 -->    <脚本/程序 来源/出处=“main.js”></脚本/程序>  </身体></HTML>

JavaScript代码（GET请求）：

在 JavaScript 文件中（例如 script.js），编写以下代码以从 API 中获取用户数据：

JavaScript

// main.js// 使用 fetch() 方法发起 GET 请求获取/提取(https://jsonplaceholder.typicode.com/users)// 将接收到的数据转换为JSON格式.那么(回应/答复=>回应/答复.JSON()).那么(JSON=>{// 创建一个变量来存储 HTML 内容让li=`<tr><th>姓名</th><th>电子邮件</th></tr>`;// 遍历每个数据，并添加一行表格记录。JSON.forEach(用户=>{li+=`<tr>`<td>${用户.名称}</td><td>${用户.电子邮件}</td></tr>;});// 显示结果文件/文档.使用 `getElementById` 方法可以轻松地获取具有特定ID的元素。(“用户”).innerHTML=li;});

现在，当您打开这个HTML文件时，会看到如下所示的结果：

当您在 Chrome 中打开 DevTools（按 F12 键）时，你会看到有一个请求被发送到 users 这个路由。

您可以从请求中获取更多数据。请参考相关说明。https://jsonplaceholder.typicode.com/guide/文档/资料。

示例2：使用fetch()方法发送POST请求

POST请求用于向服务器发送数据，通常用于提交表单或添加新数据。在这个例子中，我们将发送一个POST请求，以在JSONPlaceholder API的“posts”端点上添加一篇新的帖子。服务器会返回带有唯一ID的创建好的帖子。

JavaScript代码（POST请求）：

请将以下代码添加到你的script.js文件中，以执行POST请求：

JavaScript

// main.js// 使用 fetch() 进行 POST 请求获取/提取(https://jsonplaceholder.typicode.com/posts,{// 添加方法类型方法/方式:“POST”,// 添加需要发送的内容或数据身体:JSON.字符串化({标题:“foo”,身体:“酒吧”,用户ID:1}),// 在请求中添加头部信息标题/首行信息:{内容类型:application/json;字符集=UTF-8}})// 转换为JSON格式.那么(回应/答复=>回应/答复.JSON()))// 将结果输出到控制台中.那么(JSON=>控制台.日志/记录(JSON));

现在，如果你打开浏览器的JavaScript控制台，然后重新加载页面，你会看到如下所示的结果：

该API返回的状态为：201这是一种用于描述HTTP状态的代码。创建/制作.

使用 fetch() 处理错误

需要注意的是，当发生网络故障时，`fetch()`才会拒绝该Promise。但是，如果响应的状态码不在2xx范围内（比如404或500错误），则不会自动被拒绝。因此，你必须手动通过`response.ok`来检查响应的状态。

JavaScript

获取/提取(URL).那么(回应/答复=>{if(!回应/答复.ok){投掷新的错误/失误(HTTP错误！状态：${回应/答复.状态/身份}`);}返回回应/答复.JSON();}).那么(数据=>{// 处理成功返回的结果}).捕捉(错误/失误=>{控制台.错误/失误(“获取错误”：无法获取所需的数据/信息。,错误/失误);});

马上抢免费试听资格

上一篇： HTTP头部信息 | 内容位置

下一篇： HTTP头部信息 | Access-Control-Max-Age

意向课程：		*必选
姓名：		*必填
联系方式：		*必填请填写正确手机号
QQ：