JavaScript教程：深入理解Fetch API的高级配置

JavaScript教程：深入理解Fetch API的高级配置

ru.javascript.info Современный учебник JavaScript 项目地址: https://gitcode.com/gh_mirrors/ru/ru.javascript.info

前言

在现代Web开发中，Fetch API已经成为发送网络请求的标准方式。它提供了比传统XMLHttpRequest更简洁、更强大的功能。本文将深入探讨Fetch API的高级配置选项，帮助开发者充分利用其全部潜力。

Fetch API基础回顾

Fetch API的核心是一个简单的fetch()函数，它返回一个Promise，解析为Response对象。基本用法如下：

fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

高级配置选项详解

1. referrer和referrerPolicy

这两个选项控制HTTP Referer头部的行为：

• referrer：可以设置为空字符串来完全移除Referer头部，或者指定一个同源的URL
• referrerPolicy：定义Referer在不同请求场景下的发送策略

fetch('/api', {
  referrer: "", // 不发送Referer
  referrerPolicy: "origin-when-cross-origin" // 跨域时只发送源
});

2. mode选项

控制跨域请求的行为：

• "cors"：默认值，允许跨域请求
• "same-origin"：禁止跨域请求
• "no-cors"：只允许简单跨域请求

fetch('https://other-site.com/api', {
  mode: 'no-cors' // 只允许简单请求
});

3. credentials选项

控制是否发送cookies和认证信息：

• "same-origin"：默认值，同源时发送
• "include"：总是发送
• "omit"：从不发送

fetch('/auth', {
  credentials: 'include' // 发送认证信息
});

4. cache选项

精细控制HTTP缓存行为：

• "default"：遵循标准HTTP缓存规则
• "no-store"：完全忽略缓存
• "reload"：忽略缓存但保存响应
• "no-cache"：使用条件请求
• "force-cache"：强制使用缓存
• "only-if-cached"：只使用缓存

fetch('/data', {
  cache: 'no-cache' // 使用条件请求
});

5. redirect选项

控制重定向行为：

• "follow"：默认值，自动跟随重定向
• "error"：重定向时报错
• "manual"：手动处理重定向

fetch('/old-url', {
  redirect: 'manual' // 手动处理重定向
}).then(response => {
  if (response.redirected) {
    console.log('Redirected to:', response.url);
  }
});

6. integrity选项

提供子资源完整性校验：

fetch('/script.js', {
  integrity: 'sha256-abcdef1234567890'
});

7. keepalive选项

允许请求在页面卸载后继续：

window.addEventListener('unload', function() {
  fetch('/analytics', {
    method: 'POST',
    body: JSON.stringify(analyticsData),
    keepalive: true
  });
});

实际应用场景

安全敏感请求

对于包含敏感信息的请求，可以限制Referer：

fetch('https://bank.com/transfer', {
  referrerPolicy: 'same-origin'
});

性能优化

合理使用缓存策略提升性能：

fetch('/static/data.json', {
  cache: 'force-cache' // 优先使用缓存
});

数据完整性

确保下载资源的完整性：

fetch('/important-file.zip', {
  integrity: 'sha384-abcdef1234567890'
});

注意事项

1. keepalive请求有64KB大小限制
2. 跨域请求需要服务器正确配置CORS头
3. 某些选项如integrity需要现代浏览器支持
4. 错误处理应始终完善

总结

Fetch API提供了丰富的配置选项，让开发者能够精细控制网络请求的各个方面。理解这些高级选项可以帮助我们构建更安全、更高效、更可靠的Web应用。在实际开发中，应根据具体需求选择合适的配置组合。

ru.javascript.info Современный учебник JavaScript 项目地址: https://gitcode.com/gh_mirrors/ru/ru.javascript.info