Fetch 的 GET 和 POST 请求：现代网络请求的优雅方式

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

引言

Fetch API 是现代浏览器提供的一个用于替代 XMLHttpRequest 的接口，它允许网页进行网络请求，获取资源。Fetch 使用 Promise，使得异步操作更加简洁和易于管理。本文将介绍如何使用 Fetch API 发送 GET 和 POST 请求，以及如何处理响应和错误。

Fetch API 简介

Fetch API 提供了一个 JavaScript Promise 来处理网络请求，它支持流式传输和中断请求等高级功能。Fetch API 是基于资源的请求，而不是基于文档的请求，这意味着它可以用于任何类型的 HTTP 请求。

发送 GET 请求

GET 请求用于从服务器检索数据。以下是使用 Fetch API 发送 GET 请求的基本示例：

// 发送 GET 请求
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json(); // 解析响应体为 JSON
  })
  .then(data => {
    // 处理响应数据
    console.log(data);
  })
  .catch(error => {
    // 处理错误
    console.error('There has been a problem with your fetch operation:', error);
  });

添加请求参数

对于 GET 请求，可以通过在 URL 中添加查询字符串来传递参数：

const url = new URL('https://api.example.com/data');
url.searchParams.append('search', 'keyword');
url.searchParams.append('page', 1);

fetch(url)
  // ...其余部分与上面相同

发送 POST 请求

POST 请求通常用于向服务器发送数据以进行处理。以下是使用 Fetch API 发送 POST 请求的基本示例：

// 发送 POST 请求
fetch('https://api.example.com/data', {
  method: 'POST', // 指定请求方法
  headers: {
    'Content-Type': 'application/json' // 设置请求头
  },
  body: JSON.stringify({ key1: 'value1', key2: 'value2' }) // 请求体
})
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    // 处理响应数据
    console.log(data);
  })
  .catch(error => {
    // 处理错误
    console.error('There has been a problem with your fetch operation:', error);
  });

处理响应和错误

Fetch API 的 then 方法接收一个 Response 对象，该对象包含关于响应的信息。你可以检查 response.ok 来确定请求是否成功，或者使用 response.status 来获取 HTTP 状态码。

错误处理

Fetch API 不会在网络错误（如 DNS 解析失败、连接超时等）时 reject Promise，因此需要在 catch 块中处理这些错误。对于 HTTP 错误状态码（如 404 或 500），你需要手动检查 response.ok 并抛出错误。

结论

Fetch API 提供了一种现代且强大的方式来处理网络请求。它的基于 Promise 的 API 设计使得异步代码更加清晰和易于管理。无论是发送 GET 请求来检索数据，还是发送 POST 请求来提交数据，Fetch API 都提供了一种简单而一致的方式来处理这些操作。通过掌握 Fetch API 的基本用法，你可以更有效地与后端服务进行通信。