告别错误，玩转fetch：无忧后端数据请求

2023-12-25 17:00:05

fetch：前端开发的利器

在现代前端开发中，fetch API 扮演着至关重要的角色。它为我们提供了五种基本请求方式，让我们可以轻松地与服务器进行数据交互，构建出功能强大的应用程序。

五大请求方式

GET： 从服务器获取数据，主要用于检索资源。
POST： 向服务器提交数据，通常用于创建或更新资源。
PUT： 更新服务器上的资源，一般用于覆盖现有资源。
PATCH： 部分更新服务器上的资源，适合修改资源的特定部分。
DELETE： 从服务器删除资源，用于删除或取消资源。

发送 fetch 请求

使用 fetch 发送请求非常简单：

fetch('https://example.com/api/v1/users')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

跨域请求

在进行跨域请求时，我们需要在请求头中添加 "Origin" 字段，表明请求的来源：

fetch('https://example.com/api/v1/users', {
  headers: {
    'Origin': 'https://yourdomain.com'
  }
});

Cookie 操作

我们可以使用 "document.cookie" 属性来获取和设置 Cookie：

获取 Cookie：

const cookie = document.cookie;

设置 Cookie：

document.cookie = 'name=value; expires=date; path=/';

安全与性能

使用 HTTPS 协议保证数据传输的安全性。
使用缓存提高性能，可以通过设置 "Cache-Control" 和 "Expires" 请求头实现。

错误处理

fetch 请求可能会遇到各种错误，包括网络错误、服务器错误、语法错误等。使用 "catch()" 方法捕获错误并提供友好提示：

fetch('https://example.com/api/v1/users')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => {
    if (error.name === 'TypeError') {
      console.error('JSON parsing error');
    } else if (error.name === 'SyntaxError') {
      console.error('Invalid JSON syntax');
    } else {
      console.error(error);
    }
  });