Fetch API：现代 Web 应用中更强大的网络请求方式

Fetch API：告别XMLHttpRequest的时代，拥抱更优雅的网络请求

话说当年，江湖上混的 Web 开发者们，谁还没用过 XMLHttpRequest (XHR) 呢？那可是曾经的“网络请求一哥”，撑起了 Web 2.0 的半边天。可时代在发展，技术在进步，就像大哥大终究会被智能手机取代一样，XHR 也在逐渐老去。今天，咱们就来聊聊这位后起之秀—— Fetch API，看看它究竟有何魅力，能让越来越多的开发者们抛弃旧爱，投入它的怀抱。

XHR的那些年，我们一起踩过的坑

先别急着给 XHR 发好人卡，毕竟人家也风光过。但是，回忆起当年用 XHR 的日子，总感觉有那么一丝丝的苦涩。

代码冗长，可读性差： 还记得那堆 xhr.open()， xhr.setRequestHeader()， xhr.onreadystatechange() 吗？代码写起来像裹脚布一样又臭又长，稍不留神就出错。
回调地狱： 如果要发起多个依赖关系的请求，那简直就是噩梦。一层又一层的回调函数嵌套，让人看得头昏眼花，调试起来更是叫苦连天。想象一下，你要先请求用户资料，然后根据用户资料请求订单信息，再根据订单信息请求商品详情… 简直就是俄罗斯套娃！
API 设计不合理： XHR 的 API 设计略显笨重，比如 readyState 这种概念，初学者很难理解，也容易出错。

总而言之，XHR 就像一位上了年纪的老员工，虽然经验丰富，但效率不高，而且有些跟不上时代了。

Fetch API：自带光环的救世主

正是在这种背景下，Fetch API 横空出世，自带主角光环。它基于 Promise 设计，语法简洁优雅，功能强大灵活，简直就是 Web 开发者的福音！

Fetch API 的优点，说出来你都不敢信

基于 Promise： Promise 最大的好处就是可以摆脱回调地狱，用 then() 和 catch() 来处理异步操作，让代码逻辑更加清晰易懂。
语法简洁： Fetch API 的语法非常简洁，一个 fetch() 函数就能搞定大部分网络请求。
功能强大： Fetch API 不仅支持 GET、POST 等常见的 HTTP 方法，还支持自定义 Header、处理请求体等高级功能。
模块化设计： Fetch API 将网络请求和响应分离，可以更灵活地处理各种情况。

Fetch API 的基本用法： Hello, World!

光说不练假把式，咱们先来看一个最简单的例子，用 Fetch API 发起一个 GET 请求：

fetch('https://api.example.com/data')
  .then(response => response.json()) // 将响应转换为 JSON 格式
  .then(data => {
    console.log(data); // 在控制台输出数据
  })
  .catch(error => {
    console.error('发生错误:', error); // 处理错误
  });

这段代码看起来是不是比 XHR 简洁多了？让我们来逐行解读一下：

fetch('https://api.example.com/data')：发起一个 GET 请求，请求 https://api.example.com/data 这个地址。
.then(response => response.json())：当请求成功时，会得到一个 response 对象，我们需要用 response.json() 方法将响应体转换为 JSON 格式。注意，response.json() 本身也是一个 Promise，所以我们需要用另一个 .then() 来处理转换后的数据。
.then(data => { console.log(data); })：当 JSON 数据转换成功后，我们就可以在控制台输出数据了。
.catch(error => { console.error('发生错误:', error); })：如果请求过程中发生任何错误，我们都可以在 .catch() 中捕获并处理。

进阶用法：玩转 Fetch API 的各种姿势

掌握了基本用法之后，我们就可以开始探索 Fetch API 的各种高级功能了。

发送 POST 请求：

发送 POST 请求需要设置 method 和 body 两个参数。body 参数可以是一个字符串、一个 FormData 对象、甚至是一个 Blob 对象。

const data = {
  name: '张三',
  age: 30
};

fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json' // 设置请求头，告诉服务器我们发送的是 JSON 数据
  },
  body: JSON.stringify(data) // 将数据转换为 JSON 字符串
})
  .then(response => response.json())
  .then(data => {
    console.log('成功创建用户:', data);
  })
  .catch(error => {
    console.error('创建用户失败:', error);
  });

设置请求头：

通过 headers 参数可以设置请求头，例如 Content-Type、Authorization 等。

fetch('https://api.example.com/data', {
  headers: {
    'Authorization': 'Bearer your_token' // 设置授权 token
  }
})
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('发生错误:', error);
  });

处理不同的响应状态码：

Fetch API 默认情况下不会将 HTTP 错误状态码（如 404、500）视为错误，只有当网络请求失败时才会触发 .catch()。如果需要处理 HTTP 错误状态码，我们需要手动检查 response.ok 属性。

fetch('https://api.example.com/nonexistent_resource')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP 错误! 状态码: ${response.status}`); // 手动抛出一个错误
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('发生错误:', error);
  });

使用 async/await 简化代码：

async/await 是 ES2017 引入的新特性，可以让我们用同步的方式编写异步代码，让代码更加简洁易懂。

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('发生错误:', error);
  }
}

fetchData();

Fetch API 的一些小坑，以及如何优雅地避开它们

虽然 Fetch API 优点多多，但也不是完美无缺。在使用过程中，我们可能会遇到一些小坑，需要注意避开。

CORS 问题：

CORS (Cross-Origin Resource Sharing) 是一种安全机制，用于限制跨域请求。如果你的 Web 应用需要请求不同域名的 API，可能会遇到 CORS 问题。解决 CORS 问题的方法有很多，例如配置服务器端的 CORS 策略，或者使用代理服务器。

Fetch API 不发送 Cookie：

Fetch API 默认情况下不会发送 Cookie。如果需要发送 Cookie，需要在请求中设置 credentials 选项为 include。

fetch('https://api.example.com/data', {
  credentials: 'include' // 允许发送 Cookie
})
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('发生错误:', error);
  });

Fetch API 的浏览器兼容性：

虽然 Fetch API 已经得到了主流浏览器的支持，但在一些老旧的浏览器中可能无法使用。如果需要兼容老旧浏览器，可以使用 polyfill。

Fetch API vs. XMLHttpRequest：谁才是你的真爱？

现在，我们来做一个简单的对比，看看 Fetch API 和 XMLHttpRequest 究竟谁更胜一筹。

特性	Fetch API	XMLHttpRequest
语法	简洁优雅，基于 Promise	冗长复杂，基于回调函数
功能	强大灵活，支持各种 HTTP 方法和高级功能	功能相对有限
可读性	更好，易于理解和维护	较差，容易出错
兼容性	主流浏览器支持，需要 polyfill 兼容老旧浏览器	兼容性好
默认行为	不发送 Cookie	发送 Cookie
错误处理	需要手动检查 `response.ok`	通过 `status` 和 `readyState` 属性判断错误

从上面的对比可以看出，Fetch API 在语法、功能和可读性方面都优于 XMLHttpRequest。虽然 Fetch API 的兼容性略逊一筹，但可以通过 polyfill 来解决。

结论：拥抱 Fetch API，开启 Web 开发新篇章

总而言之，Fetch API 是一款非常优秀的网络请求工具，它不仅可以提高开发效率，还可以让代码更加简洁易懂。如果你还在使用 XMLHttpRequest，不妨尝试一下 Fetch API，相信你一定会爱上它的。就像告别了老旧的诺基亚，拥抱了智能手机，你会发现，原来 Web 开发可以如此轻松愉快！

所以，还在等什么呢？赶紧拿起你的键盘，开始使用 Fetch API 吧！让我们一起告别 XMLHttpRequest 的时代，拥抱更美好的 Web 开发未来！

Fetch API：告别XMLHttpRequest的时代，拥抱更优雅的网络请求

发表回复 取消回复

发表回复取消回复