fetch api 参数

Fetch API 参数详解

参数列表与说明

关键参数详解与示例

1. method

   • 用途：指定 HTTP 方法（如 GET、POST、PUT、DELETE）。
   • 示例：

     fetch('/api/data', { method: 'POST' });

2. headers

   • 用途：设置请求头（如 Content-Type、Authorization）。
   • 注意：直接修改 headers 对象会抛出错误，需使用 Headers.append() 方法。
   • 示例：

     const headers = new Headers();
     headers.append('Content-Type', 'application/json');
     fetch('/api/data', { headers });

3. body

   • 用途：发送请求体数据（仅用于 POST、PUT 等方法）。
   • 支持的类型：String、Blob、Buffer、ArrayBuffer、FormData、URLSearchParams、ReadableStream。
   • 示例：

     fetch('/api/upload', {
       method: 'POST',
       body: JSON.stringify({ file: 'data:text/plain,Hello' }),
       headers: { 'Content-Type': 'application/json' }
     });

4. mode

   

   • 用途：控制跨域请求行为。
     • cors：允许跨域请求，但需服务器设置 Access-Control-Allow-Origin。
     • no-cors：仍受同源策略限制，但无 CORS 响应。
     • same-origin：仅限同源请求。
   • 示例：

     fetch('https://api.example.com/data', { mode: 'cors' });

5. credentials

   • 用途：控制是否发送 Cookie 或授权头。
     • omit：不发送凭据（默认）。
     • same-origin：仅同源时发送。
     • include：总是发送。
   • 示例：

     fetch('/api/auth', { credentials: 'include' });

6. cache

   • 用途：控制缓存策略。
     • default：默认缓存行为（可能缓存）。
     • no-store：禁止缓存。
     • reload：强制重新验证缓存。
     • no-cache：强制向服务器验证资源是否更新。
     • force-cache：仅从缓存获取，不验证。
   • 示例：

     fetch('/api/data', { cache: 'no-store' });

7. redirect

   • 用途：控制重定向行为。
     • follow：自动跟随重定向（默认）。
     • error：将重定向视为错误。
     • manual：手动处理重定向（需检查 response.status）。
   • 示例：

     fetch('/api/redirect', { redirect: 'manual' }).then(response => {
       if (response.status === 307) {
         // 手动处理重定向逻辑
       }
     });

8. signal

   • 用途：配合 AbortController 实现请求中止。
   • 示例：

     const controller = new AbortController();
     fetch('/api/data', { signal: controller.signal });
     // 中止请求
     controller.abort();

注意事项

1. 异步处理

   • fetch 返回的是一个 Promise，需通过 .then() 或 async/await 处理结果。
   • 示例：

     fetch('/api/data').then(response => response.json()).then(data => console.log(data));

2. 错误处理

   • fetch 仅在网络错误时才会 reject，HTTP 状态码错误（如 404）需手动检查。
   • 示例：

     fetch('/api/invalid').then(response => {
       if (!response.ok) {
         throw new Error('Network response was not ok');
       }
       return response.json();
     }).catch(error => console.error('Fetch error:', error));

3. 跨域限制

   • 使用 mode: 'cors' 时，需服务器设置 Access-Control-Allow-Origin。
   • mode: 'no-cors' 会隐藏跨域响应,但无法读取响应体。

相关问题与解答

问题 1：如何用 Fetch API 处理 JSON 响应？

解答：
使用 response.json() 方法将响应体解析为 JSON 对象，需注意该方法返回一个 Promise，因此需要链式调用或使用 async/await。
示例：

fetch('/api/data')
  .then(response => response.json()) // 解析为 JSON
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

问题 2：如何取消正在进行的 Fetch 请求？

解答：
使用 AbortController 创建一个信号对象，并将其传递给 fetch 的 signal 参数，调用 abort() 方法即可中止请求。
示例：

const controller = new AbortController();
const signal = controller.signal;
fetch('/api/data', { signal }).then(response => {
  // 如果请求被中止，此处不会执行
});
// 触发取消
controller.abort();