---
title: "JavaScript Fetch API 使用教程：附实例讲解"
description: "通过实际示例学习 JavaScript Fetch API 的使用方法。本篇新手指南涵盖 GET 请求、POST 请求、async/await、错误处理等内容。"
url: "https://marsproxies.cn/blog/javascript-fetch-api/"
---

- [EN ](https://marsproxies.com/blog/javascript-fetch-api/ "英语")
  [CN](https://marsproxies.cn/blog/javascript-fetch-api/ "语言切换器")

[联系销售](https://marsproxies.cn/contact-sales/) [注册](https://dashboard.marsproxies.com/register/) [登录](https://dashboard.marsproxies.com/login/)

[联系销售](https://marsproxies.cn/contact-sales/) [注册](https://dashboard.marsproxies.com/register/) [登录](https://dashboard.marsproxies.com/login/)

[联系销售](https://marsproxies.cn/contact-sales/)

[登录](https://dashboard.marsproxies.com/login/) [注册](https://dashboard.marsproxies.com/register/)

- [EN ](https://marsproxies.com/blog/javascript-fetch-api/ "英语")
  [CN](https://marsproxies.cn/blog/javascript-fetch-api/ "语言切换器")

[返回博客](https://marsproxies.cn/blog/) 2025年11月12日

# JavaScript Fetch API 使用教程：附实例讲解

[操作指南](https://marsproxies.cn/blog/category/how-to/)

\-

目录

1. [什么是 JavaScript 中的 Fetch API？](https://marsproxies.cn/blog/javascript-fetch-api/#b-%E4%BB%80%E4%B9%88%E6%98%AF-javascript-%E4%B8%AD%E7%9A%84-fetch-api)
2. [Fetch API 的语法与结构](https://marsproxies.cn/blog/javascript-fetch-api/#b-fetch-api-%E7%9A%84%E8%AF%AD%E6%B3%95%E4%B8%8E%E7%BB%93%E6%9E%84)
3. [JavaScript Fetch API GET 请求示例](https://marsproxies.cn/blog/javascript-fetch-api/#b-javascript-fetch-api-get-%E8%AF%B7%E6%B1%82%E7%A4%BA%E4%BE%8B)
4. [JavaScript Fetch API POST 请求示例](https://marsproxies.cn/blog/javascript-fetch-api/#b-javascript-fetch-api-post-%E8%AF%B7%E6%B1%82%E7%A4%BA%E4%BE%8B)
5. [How to use async/await with Fetch](https://marsproxies.cn/blog/javascript-fetch-api/#b-how-to-use-asyncawait-with-fetch)
6. [处理错误与响应状态](https://marsproxies.cn/blog/javascript-fetch-api/#b-%E5%A4%84%E7%90%86%E9%94%99%E8%AF%AF%E4%B8%8E%E5%93%8D%E5%BA%94%E7%8A%B6%E6%80%81)
7. [如何在 Fetch API 中设置请求头](https://marsproxies.cn/blog/javascript-fetch-api/#b-%E5%A6%82%E4%BD%95%E5%9C%A8-fetch-api-%E4%B8%AD%E8%AE%BE%E7%BD%AE%E8%AF%B7%E6%B1%82%E5%A4%B4)
8. [使用 Fetch API 的最佳实践](https://marsproxies.cn/blog/javascript-fetch-api/#b-%E4%BD%BF%E7%94%A8-fetch-api-%E7%9A%84%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5)
9. [Fetch API 的常见使用场景](https://marsproxies.cn/blog/javascript-fetch-api/#b-fetch-api-%E7%9A%84%E5%B8%B8%E8%A7%81%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF)
10. [Fetch API 与 Axios、XMLHttpRequest 的对比](https://marsproxies.cn/blog/javascript-fetch-api/#b-fetch-api-%E4%B8%8E-axiosxmlhttprequest-%E7%9A%84%E5%AF%B9%E6%AF%94)

\-

核心要点：

- JavaScript Fetch API 是一种发起 HTTP 请求的现代方式，支持 Promise 并拥有简洁的语法。

* 务必检查响应状态并谨慎处理错误，才能让 Fetch 请求稳定可靠。

- 使用 async/await、正确设置[请求头](https://marsproxies.cn/blog/curl-send-http-headers/)，并妥善解析响应体，是构建可靠应用的关键。

JavaScript Fetch API 让浏览器中处理 HTTP 请求变得更简单，可以帮助您从服务器获取数据、提交新内容，并以更现代、更简洁的方式调用各类 API。

本文将通过示例和讲解，带您学习如何发起 Fetch 请求、处理响应以及管理错误。

## 什么是 JavaScript 中的 Fetch API？

Fetch API 是浏览器内置的 HTTP 请求接口，可用它获取数据并通过 JavaScript 与各类 API 交互。参见我们的[Java 网络爬取指南](https://marsproxies.cn/blog/java-web-scraping/)。

以往使用 XMLHttpRequest 实现，而 Fetch API 更简单，且返回 Promise，这意味着您可以写出更易读、更易维护的异步代码。

大多数现代应用和网站都在使用它，因为它支持所有常见的 HTTP 方法，通过 response.json() 与 JSON 无缝衔接，并提供基于 Promise 的简洁接口来处理网络请求。

## Fetch API 的语法与结构

以下是 Fetch 请求的基本结构：

```javascript
fetch (url, options)
  . then ( response => {
    // handle the response
  } )
  . catch ( error => {
    // handle errors
  } ) ;
```

- *url*是您要调用的端点。
- options 是一个对象，用于存放请求方法、请求头、请求体等内容。

Fetch API 基于 Promise，调用后会返回一个解析为 Response 对象的 Promise。随后可以通过 .then() 或 async/await 调用 response.json() 或 response.text() 等方法来读取响应体。

可在 options 的 method 中使用 GET、POST、PUT、DELETE 等方法。

## JavaScript Fetch API GET 请求示例

您可以在浏览器 DevTools 控制台、带有 \<script> 标签的本地 HTML/JS 文件，或现代 Node.js 开发环境中测试 GET 和 POST 示例

假设您想从某个公共 API 获取数据：

```javascript
fetch ( 'https://api.sampleapis.com/coffee/hot' )
  . then ( response => response. json ( ) )
  . then ( data => {
    console. log (data) ;
  } ) ;
```

在此示例中，我们使用 .json() 将响应体解析为可用的 JSON 对象，这有助于您轻松获取服务器返回的数据。

## JavaScript Fetch API POST 请求示例

要发送数据，请使用 POST 请求：

```typescript
fetch ( 'https://api.restful-api.dev/objects' , {
  method: 'POST' ,
  headers: {
    'Content-Type' : 'application/json'
  } ,
  body: JSON . stringify ( {
    name: 'John' ,
    email: 'john@example.com'
  } )
} ) ;
```

具体流程如下：

- 我们使用 POST 请求方法来发送数据。
- 我们通过 'Content-Type': 'application/json' 设置请求头。
- body 是请求的数据载荷，我们使用 JSON.stringify() 将 JavaScript 对象转换为 JSON 格式的字符串。

这在处理表单、用户输入等场景中非常实用。

## How to use *async/await* with Fetch

使用*async/await*可以让代码更简洁、更易理解。以下是使用*async/await*改写的同一个 Fetch 请求：

```javascript
async function getUsers ( ) {
  try {
    const response = await fetch ( '' https : / /api.sampleapis.com/coffee/hot'' ) ;
    const data = await response. json ( ) ;
    console. log (data) ;
  } catch (error) {
    console. error ( 'Error fetching data:' , error) ;
  }
}
```

这样的写法更易读，尤其在涉及多个步骤时；而且搭配 try/catch 处理错误也更简单。

## 处理错误与响应状态

要处理 HTTP 错误，您需要自行检查响应状态：

```javascript
fetch ( '' https : / /api.sampleapis.com/coffee/hot'' )
  . then ( response => {
    if ( !response.ok) {
      throw new Error ( ` HTTP error! status:  ${response.status} ` ) ;
    }
    return response. json ( ) ;
  } )
  . then ( data => console. log (data) )
  . catch ( error => console. error ( 'Fetch error:' , error) ) ;
```

务必检查*response.ok*和 response.status，这有助于在服务器返回错误时避免意外情况。

## 如何在 Fetch API 中设置请求头

请求头可以告诉服务器您发送的内容或期望得到的内容，设置方式如下：

```javascript
fetch ( '' https : / /api.sampleapis.com/coffee/hot'' , {
  method : 'GET' ,
  headers : {
    'Authorization' : 'Bearer your-token' ,
    'Content-Type' : 'application/json'
  }
} ) ;
```

请求头的常见使用场景：

- 发送[bearer token](https://marsproxies.cn/blog/curl-bearer-token/)以完成身份验证。
- 设置 Content-Type 以配合 JSON 使用。
- 为特定 API 或代理服务器设置自定义请求头。

您发送的请求头需要与 API 的要求保持一致，否则会报错，务必检查响应头以了解服务器返回的具体内容。

在使用代理时，您经常需要处理请求头。更习惯在命令行中操作？我们的[cURL API 指南](https://marsproxies.cn/blog/curl-api-guide/)通过[cURL 指南](https://marsproxies.cn/blog/using-proxy-with-curl-guide/)讲解了相同的概念。欢迎查看我们的[网络数据抓取技巧](https://marsproxies.cn/blog/web-scraping-techniques/)，了解数据抓取策略、代理在其中的作用，以及请求头为何重要。

2026年用 Fetch API 高效批量抓取网页数据

[立即开始抓取](https://dashboard.marsproxies.com/products/datacenter-proxies#buy-now)

## 使用 Fetch API 的最佳实践

为了在使用 Fetch API 时获得最佳体验，请遵循以下最佳实践：

- 使用*async/await*编写易读的异步代码。
- 务必检查响应状态和 response.ok。
- 如果网络响应耗时过长，请手动实现[超时](https://marsproxies.cn/blog/curl-timeout/)和重试机制（例如借助 AbortController 或自定义逻辑）。

此外，还需注意 CORS 限制：您可以在允许的范围内调整请求头，但最终仍需服务器返回正确的 CORS 响应头，请求才能成功。

## Fetch API 的常见使用场景

您在以下情况中最常用到 Fetch API：

- 调用 REST API 获取数据。
- 处理需要在请求头中携带令牌的登录系统。
- 动态获取外部 HTML 或其他资源（例如 JSON，或以 blob 形式获取的[图片](https://marsproxies.cn/blog/image-scraper/)）。

如果您从事[网络数据抓取](https://marsproxies.cn/blog/cheerio-web-scraping/)，也可以使用 Fetch API 通过代理服务器（在 Fetch 之外配置，例如在浏览器、系统或服务器层面）发送请求，从而让流量经由不同的位置转发。

## Fetch API 与 Axios、XMLHttpRequest 的对比

Fetch API 是原生的、基于 Promise 的方案，适用于大多数场景，但：

- Axios 提供了一些便利功能，例如自动解析 JSON（在响应的内容类型正确时）、请求/响应拦截器，以及内置的超时支持。
- XMLHttpRequest 更为老旧，与 Promise 或现代异步代码配合使用较为麻烦。

如果您想用更少的配置获得更多高级功能，可以使用[Axios](https://marsproxies.cn/blog/axios-proxy/)；如果您倾向于轻量、无额外依赖的方案，则坚持使用 Fetch API。

如果 Fetch 请求失败会怎样？

如果出现网络错误，Fetch API 会拒绝（reject）该 Promise，您可以使用 .catch() 或 try/catch 来捕获它。

如何在 Fetch API 中处理错误？

检查 response.ok 和 response.status 来发现 HTTP 错误，并使用 try/catch 捕获网络故障；如果服务器提供了错误详情，也可以记录响应体或响应头。

如何在 JavaScript 中从 API 获取图片？

使用 fetch() 获取图片的 blob 数据，然后将其转换为 URL：

REST API 与 Fetch API 有什么区别？

REST API 是提供服务或数据的来源，而 Fetch API 是 JavaScript 中用于连接该来源、并通过网络请求获取数据的工具。

[了解更多](https://dashboard.marsproxies.com/register/)

\-

作者

[Dalius Pamedytis 软件工程师](https://marsproxies.cn/blog/authors/dalius-pamedytis/)

目录

1. [什么是 JavaScript 中的 Fetch API？](https://marsproxies.cn/blog/javascript-fetch-api/#b-%E4%BB%80%E4%B9%88%E6%98%AF-javascript-%E4%B8%AD%E7%9A%84-fetch-api)
2. [Fetch API 的语法与结构](https://marsproxies.cn/blog/javascript-fetch-api/#b-fetch-api-%E7%9A%84%E8%AF%AD%E6%B3%95%E4%B8%8E%E7%BB%93%E6%9E%84)
3. [JavaScript Fetch API GET 请求示例](https://marsproxies.cn/blog/javascript-fetch-api/#b-javascript-fetch-api-get-%E8%AF%B7%E6%B1%82%E7%A4%BA%E4%BE%8B)
4. [JavaScript Fetch API POST 请求示例](https://marsproxies.cn/blog/javascript-fetch-api/#b-javascript-fetch-api-post-%E8%AF%B7%E6%B1%82%E7%A4%BA%E4%BE%8B)
5. [How to use async/await with Fetch](https://marsproxies.cn/blog/javascript-fetch-api/#b-how-to-use-asyncawait-with-fetch)
6. [处理错误与响应状态](https://marsproxies.cn/blog/javascript-fetch-api/#b-%E5%A4%84%E7%90%86%E9%94%99%E8%AF%AF%E4%B8%8E%E5%93%8D%E5%BA%94%E7%8A%B6%E6%80%81)
7. [如何在 Fetch API 中设置请求头](https://marsproxies.cn/blog/javascript-fetch-api/#b-%E5%A6%82%E4%BD%95%E5%9C%A8-fetch-api-%E4%B8%AD%E8%AE%BE%E7%BD%AE%E8%AF%B7%E6%B1%82%E5%A4%B4)
8. [使用 Fetch API 的最佳实践](https://marsproxies.cn/blog/javascript-fetch-api/#b-%E4%BD%BF%E7%94%A8-fetch-api-%E7%9A%84%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5)
9. [Fetch API 的常见使用场景](https://marsproxies.cn/blog/javascript-fetch-api/#b-fetch-api-%E7%9A%84%E5%B8%B8%E8%A7%81%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF)
10. [Fetch API 与 Axios、XMLHttpRequest 的对比](https://marsproxies.cn/blog/javascript-fetch-api/#b-fetch-api-%E4%B8%8E-axiosxmlhttprequest-%E7%9A%84%E5%AF%B9%E6%AF%94)

分类

- [产品动态](https://marsproxies.cn/blog/category/product-news/)

  [5](https://marsproxies.cn/blog/category/product-news/)
- [产品对比](https://marsproxies.cn/blog/category/comparisons/)

  [9](https://marsproxies.cn/blog/category/comparisons/)
- [反检测解决方案](https://marsproxies.cn/blog/category/antidetect-solution/)

  [3](https://marsproxies.cn/blog/category/antidetect-solution/)
- [操作指南](https://marsproxies.cn/blog/category/how-to/)

  [122](https://marsproxies.cn/blog/category/how-to/)
- [球鞋抢购机器人](https://marsproxies.cn/blog/category/sneaker-bots/)

  [2](https://marsproxies.cn/blog/category/sneaker-bots/)
- [资讯](https://marsproxies.cn/blog/category/insights/)

  [89](https://marsproxies.cn/blog/category/insights/)

## 相关文章

[操作指南](https://marsproxies.cn/blog/category/how-to/)

### [2026年如何用 Python 抓取 Amazon 产品数据](https://marsproxies.cn/blog/amazon-web-scraping/)

从轮换 User-Agent 到处理分页，本指南将逐步介绍安全提取数据所需的全部内容。

[Dalius Pamedytis 软件工程师](https://marsproxies.cn/blog/authors/dalius-pamedytis/)

2026年1月20日