JavaScript 中 Fetch API 的用法？

推荐答案

// www.javascriptcn.com code example
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log('Data:', data);
  })
  .catch(error => {
    console.error('There was a problem with the fetch operation:', error);
  });

本题详细解读

Fetch API 的基本用法

Fetch API 是 JavaScript 中用于发起网络请求的现代方法。它返回一个 Promise，该 Promise 在请求完成后解析为 Response 对象。Fetch API 的基本用法如下：

1. 发起请求：使用 fetch(url) 发起一个 GET 请求。url 是请求的目标地址。

2. 处理响应：fetch 返回的 Promise 解析为 Response 对象。你可以通过 response.ok 检查请求是否成功（状态码在 200-299 之间），并通过 response.json() 将响应体解析为 JSON 格式。

3. 处理错误：如果网络请求失败或响应状态码不在 200-299 之间，fetch 不会自动抛出错误。你需要手动检查 response.ok 并在必要时抛出错误。

4. 链式调用：由于 fetch 返回的是 Promise，你可以使用 .then() 和 .catch() 来处理成功和失败的情况。

示例代码解析

// www.javascriptcn.com code example
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log('Data:', data);
  })
  .catch(error => {
    console.error('There was a problem with the fetch operation:', error);
  });

• 第一行：发起一个 GET 请求到 https://api.example.com/data。
• .then(response => {...})：处理响应。首先检查 response.ok，如果为 false，则抛出错误。否则，调用 response.json() 将响应体解析为 JSON。
• .then(data => {...})：处理解析后的 JSON 数据，并将其打印到控制台。
• .catch(error => {...})：捕获并处理任何在请求过程中发生的错误。

其他注意事项

• 请求方法：默认情况下，fetch 发起的是 GET 请求。你可以通过传递一个配置对象来指定其他请求方法（如 POST、PUT 等）。

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
});

• 请求头：你可以通过 headers 选项设置请求头。

• 请求体：对于 POST、PUT 等请求，你可以通过 body 选项传递请求体数据。

• 跨域请求：Fetch API 支持跨域请求，但需要服务器正确配置 CORS 头。

通过以上内容，你应该能够理解并掌握 Fetch API 的基本用法及其在实际开发中的应用。