JavaScript Fetch方法(接口)

JavaScript fetch 方法是现代浏览器中用于执行网络请求（尤其是与远程服务器交互）的标准API。它提供了比传统 XMLHttpRequest (XHR) 更简洁、更易用的接口，且基于 Promises，能够很好地配合现代JavaScript异步编程模式。以下是对 fetch() 方法的基本介绍、用法以及常见注意事项：

基本用法

句法：

fetch(url, options)

• url：必填参数，表示要请求的资源的URL。

• options：可选参数，是一个对象，用于配置请求的各种选项，包括但不限于：

  • method：请求方法（如 'GET'、'POST'、'PUT'、'DELETE' 等）。
  • headers：请求头对象，键值对形式，如 { 'Content-Type': 'application/json' }。
  • body：请求体，对于非 GET 请求，可以包含要发送的数据。可以是 Blob、BufferSource、FormData、URLSearchParams、USVString 或 ReadableStream 类型。
  • mode：请求模式，如 'cors'（默认）、'no-cors'、'same-origin'，用于控制跨域资源共享（CORS）行为。
  • credentials：是否携带凭据（如 cookies 和 HTTP 认证信息），可选 'omit'（不带凭据）、'same-origin'（仅同源请求携带）、'include'（所有请求携带）。
  • cache：缓存模式，如 'default'、'no-store'、'reload'、'no-cache'、'force-cache' 或 'only-if-cached'。
  • 其他如 redirect（控制重定向行为）、integrity（校验资源完整性）等。

返回值：

fetch() 方法返回一个 Promise，该 Promise 在网络请求完成（无论成功或失败）时 resolve。Promise 的 resolve 值是一个 Response 对象，代表服务器的响应。若请求失败（如网络问题、URL无效等），Promise 会被 reject，并抛出一个错误。

示例：

基本 GET 请求：

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) { // 检查状态码是否在200-299之间
      throw new Error('Network response was not ok');
    }
    return response.json(); // 如果返回的是JSON，使用 .json() 进行解析
  })
  .then(data => {
    console.log('Fetched data:', data);
    // 在这里处理返回的数据
  })
  .catch(error => {
    console.error('Error fetching data:', error);
    // 在这里处理请求或解析过程中的错误
  });

这段代码使用 JavaScript 的 fetch API 发起一个到 https://api.example.com/data 的 GET 请求，并通过一系列的 .then() 和 .catch() 方法处理请求的结果和可能出现的错误。以下是逐行解释：

fetch('https://api.example.com/data') // Step 1: 发起请求

Step 1: 发起请求

• 使用 fetch() 函数向指定 URL（https://api.example.com/data）发起一个网络请求。默认情况下，这个请求通常是 GET 方法。

.then(response => { // Step 2: 处理响应
  if (!response.ok) { // 检查状态码是否在200-299之间
    throw new Error('Network response was not ok');
  }
  return response.json(); // 如果返回的是JSON，使用 .json() 进行解析
})

Step 2: 处理响应

• 当请求完成后，fetch() 返回的 Promise 将解析为一个 Response 对象，并传递给第一个 .then() 的回调函数。
  • 判断 response.ok 属性，该属性根据HTTP状态码判断请求是否成功（状态码在200-299范围内）。如果不成功（即 !response.ok 为真），抛出一个带有自定义错误信息的新 Error 对象，中断当前 Promise 链，使控制权转向 .catch()。
  • 如果请求成功，调用 response.json() 方法。这是一个异步操作，返回一个新的 Promise，该 Promise 解析响应体为 JSON 格式的数据。当解析完成时，Promise 将解析为解析后的 JSON 数据，并传递给下一个 .then()。

.then(data => { // Step 3: 处理数据
  console.log('Fetched data:', data);
  // 在这里处理返回的数据
})

Step 3: 处理数据

• 当 JSON 数据解析成功后，解析后的数据（在这里称为 data）作为参数传递给第二个 .then() 的回调函数。
  • 打印一条包含已获取数据的日志信息到控制台。
  • 在此回调内，您应编写处理实际数据的逻辑，例如更新UI、存储到状态管理器、进一步加工数据等。这里仅展示了日志打印，实际应用中这部分应替换为实际的数据处理代码。

.catch(error => { // Step 4: 处理错误
  console.error('Error fetching data:', error);
  // 在这里处理请求或解析过程中的错误
});

Step 4: 处理错误

• 如果在之前的任何一个步骤（包括请求、响应状态检查、JSON解析）中出现错误（Promise 被reject），.catch() 方法将捕获这个错误，并传入一个 error 参数。在此回调内：
  • 打印一条包含错误信息的日志到控制台。
  • 应编写处理错误的逻辑，如显示错误提示、重试请求、回退到备用数据源等。这里仅展示了日志打印，实际应用中应根据需求添加适当的错误处理代码。

综上所述，这段代码执行了一个到 https://api.example.com/data 的 GET 请求，检查了响应状态码，解析了JSON响应数据，并分别处理了成功获取数据和发生错误的情况。

POST 请求带 JSON 数据：

const data = {
  username: 'exampleUser',
  password: 'examplePassword'
};

const headers = {
  'Content-Type': 'application/json'
};

fetch('https://api.example.com/login', {
  method: 'POST',
  headers,
  body: JSON.stringify(data)
})
.then(response => /* ...处理响应... */)
.catch(error => /* ...处理错误... */);

注意事项：

1. 错误处理：fetch 不会自动将非2xx状态码的响应视为错误，需要手动检查 response.ok 或 response.status 来判断请求是否成功。
2. CORS：跨域请求需要服务端支持 CORS。确保设置正确的 mode 和 credentials 选项以符合服务器要求。
3. 响应解析：对于 JSON 或其他非文本响应，需要调用 response.json()、response.text()、response.blob() 等方法来获取实际数据，并在 Promise 链中处理。
4. 兼容性：虽然 fetch 已广泛支持现代浏览器，但在旧版本浏览器中可能需要 polyfill 来实现兼容。
5. 超时处理：fetch 本身不直接支持设置请求超时。需要通过外部手段（如使用 AbortController 或封装在 setTimeout 中的 Promise）来实现超时逻辑。

高级用法和特性：

• 流处理：fetch 支持对响应体进行流处理，使用 response.body 作为 ReadableStream。
• 请求取消：使用 AbortController 实例创建可取消的 fetch 请求。
• 请求拦截与中间件：结合 fetch 的工厂函数或第三方库（如 axios、ky），可以实现请求/响应拦截、自动重试、统一错误处理等中间件功能。

综上所述，JavaScript fetch 方法是一个强大的工具，用于在Web应用中执行各种HTTP请求。通过合理的配置和恰当的错误处理，可以有效地与服务器交互并处理响应数据。