Fetch API如何使用

星降

发布时间：2025-08-19 14:47:01

964人浏览过

来源于php中文网

原创

fetch api是现代web开发中基于promise的网络请求工具，它通过链式调用和async/await语法简化异步操作，支持get、post等请求，并可通过配置对象设置请求头、请求体等；与xmlhttprequest相比，fetch语法更简洁、语义更清晰，但默认不发送cookies且不自动reject http错误状态码，需手动检查response.ok来捕获4xx/5xx错误；其高级用法包括使用abortcontroller取消请求、通过formdata上传文件、调用.text()/.blob()等方法处理不同响应类型，以及创建自定义request和response对象，适用于复杂场景如请求拦截、缓存和service worker，从而构建灵活可靠的网络通信机制。

Fetch API如何使用

Fetch API，说实话，它就是现代Web开发里进行网络请求的一个利器。它基于Promise，这意味着你可以用一种更现代、更链式的方式去处理异步操作，告别过去那种回调地狱的烦恼。简单来说，你需要一个URL，然后Fetch会帮你把数据“抓”回来。

Fetch API的使用，核心思路就是调用

fetch()

函数，它会返回一个Promise。这个Promise解析后会得到一个

Response

对象，然后你通常需要再调用

Response

对象上的方法（比如

.json()

或

.text()

）来解析响应体，这又会返回一个新的Promise。

解决方案

最基础的用法，一个GET请求：

fetch('https://api.example.com/data')
  .then(response => {
    // 检查HTTP状态码，确保请求成功
    if (!response.ok) {
      // 抛出错误，让catch块捕获
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    // 解析JSON响应体
    return response.json();
  })
  .then(data => {
    console.log('获取到的数据:', data);
  })
  .catch(error => {
    // 处理网络错误或上面throw的错误
    console.error('Fetch操作中出现问题:', error);
  });

发送POST请求，或者需要配置请求头、请求体时，

fetch()

函数可以接受第二个参数，一个配置对象：

const postData = {
  title: '我的新文章',
  body: '这是一篇关于Fetch API的文章内容。',
  userId: 1
};

fetch('https://api.example.com/posts', {
  method: 'POST', // 请求方法
  headers: {
    'Content-Type': 'application/json', // 告诉服务器发送的是JSON
    'Authorization': 'Bearer your_token_here' // 认证信息
  },
  body: JSON.stringify(postData) // 将JavaScript对象转换为JSON字符串
})
.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('创建文章失败:', error);
});

当然，现在大家更喜欢用

async/await

来写异步代码，它让Promise链看起来更像同步代码，可读性确实好不少：

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    console.log('使用async/await获取到的数据:', data);
  } catch (error) {
    console.error('使用async/await时Fetch操作出现问题:', error);
  }
}

fetchData();

Fetch API与XMLHttpRequest有哪些显著区别？

刚开始接触Fetch API时，可能不少人会想到它和老牌的XMLHttpRequest（XHR）有什么不同。我个人觉得，Fetch最让人省心的地方就是它基于Promise的设计，这直接解决了XHR时代复杂的回调嵌套问题。XHR需要手动监听各种事件（

onload

onerror

onprogress

），代码写起来比较冗长，而且处理异步逻辑时很容易陷入“回调地狱”。Fetch则通过

.then().catch()

链式调用，让异步流程清晰明了，配合

async/await

更是简洁得不像话。

另一个关键区别是，Fetch API默认不发送或接收cookies，除非你明确设置了

credentials

选项。这在处理跨域请求时尤其重要，它提供了更细粒度的控制。此外，Fetch的API设计更贴近HTTP语义，比如

Response

对象直接提供了

ok

属性来判断响应是否成功（2xx状态码），而不需要你手动检查

status

码范围。但话说回来，Fetch也并非完美无缺，比如它不像XHR那样可以直接监听上传进度（

onprogress

），或者直接取消请求（虽然现在有了

AbortController

来弥补）。

如何处理Fetch请求中的错误和异常？

错误处理在任何网络请求中都是一个核心环节。Fetch API在这方面，我得提醒一句，它默认情况下，即使服务器返回了4xx或5xx的HTTP错误状态码（比如404 Not Found或500 Internal Server Error），

fetch()

返回的Promise也不会被reject。它只有在网络错误（比如断网、DNS解析失败）或者请求被阻止（比如CORS策略）时才会reject。

PPT.CN,PPTCN,PPT.CN是什么,PPT.CN官网,PPT.CN如何使用

一键操作，智能生成专业级PPT

下载

所以，为了捕获HTTP错误，你需要在第一个

.then()

块里手动检查

Response

对象的

ok

属性。

response.ok

是一个布尔值，如果HTTP状态码在200-299范围内，它就是

true

。否则，你就需要手动抛出一个错误，让后续的

.catch()

块来处理。

fetch('https://api.example.com/nonexistent-endpoint')
  .then(response => {
    if (!response.ok) {
      // 这里的response.status就是404，response.statusText可能是"Not Found"
      throw new Error(`服务器返回错误: ${response.status} ${response.statusText}`);
    }
    return response.json(); // 或者response.text()，根据实际情况
  })
  .then(data => console.log(data))
  .catch(error => {
    // 这个catch会捕获网络错误，也会捕获上面手动throw的HTTP错误
    console.error('请求失败或处理响应时出错:', error.message);
  });

这种分离处理 HTTP 错误和网络错误的方式，一开始可能会让人有点不适应，但它确实提供了更细致的错误分类能力。网络错误通常是不可恢复的，而HTTP错误则可能需要根据具体的状态码进行不同的业务逻辑处理。

Fetch API在实际开发中有哪些高级用法？

Fetch API在日常开发中远不止GET和POST那么简单，它有很多高级用法能让你的网络请求更灵活、更强大。

取消请求 (AbortController): 这绝对是Fetch一个非常重要的补充。想想看，如果你在做一个搜索框，用户快速输入，每次输入都发请求，之前的请求就没必要继续了。

AbortController

就是为此而生。

const controller = new AbortController();
const signal = controller.signal;

setTimeout(() => controller.abort(), 5000); // 5秒后取消请求

fetch('https://api.example.com/long-running-task', { signal })
  .then(response => response.json())
  .then(data => console.log('数据:', data))
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Fetch请求被取消了。');
    } else {
      console.error('Fetch错误:', error);
    }
  });

发送表单数据 (FormData): 如果你需要上传文件或者发送复杂的表单数据，

FormData

对象是你的好帮手。它会自动设置

Content-Type

为

multipart/form-data

，你不需要手动去处理。

const formData = new FormData();
formData.append('username', 'JohnDoe');
formData.append('profilePicture', myFileInput.files[0]); // myFileInput是元素

fetch('https://api.example.com/upload', {
  method: 'POST',
  body: formData // 直接传递FormData对象
})
.then(response => response.json())
.then(data => console.log('上传成功:', data))
.catch(error => console.error('上传失败:', error));

处理不同类型的响应体: 除了
```
.json()
```
，
```
Response
```
对象还提供了
```
.text()
```
（获取纯文本）、
```
.blob()
```
（获取二进制大对象，常用于文件下载）、
```
.arrayBuffer()
```
（获取通用的二进制数据缓冲区）等方法，满足你对不同数据格式的需求。

自定义Request和Response对象: 你甚至可以先创建

Request

对象，再把它传给

fetch()

，这在需要复用相同请求配置或者拦截请求时很有用。

const myRequest = new Request('https://api.example.com/data', {
  method: 'GET',
  headers: {
    'X-Custom-Header': 'MyValue'
  }
});

fetch(myRequest)
  .then(response => response.json())
  .then(data => console.log('自定义请求获取的数据:', data));

类似地，你也可以创建一个