如何使用 JavaScript Fetch API 获取数据？

Fetch API 是一个用于获取数据的 JavaScript 接口，它使用 Promise 实现异步操作，可以方便地处理 HTTP 请求和响应，实现了 XMLHttpRequest 的替代方案。

一、基本使用

fetch() 函数接受一个 URL 参数，返回一个 Promise 对象，可以使用 then() 方法处理响应数据。

fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => response.json())
  .then(data => console.log(data));

这里请求了一个 JSON 数据，使用了response.json()方法将 response 对象转换成 JSON 格式。

二、处理错误

我们可以使用 catch() 方法处理请求错误。

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

三、通过 POST 发送数据

fetch() 函数可以通过设置方法为 POST，设置请求头信息和 body 字符串来实现数据的提交。

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1
  })
})
  .then(response => response.json())
  .then(data => console.log(data));

这里向服务器发送了一个 JSON 对象，通过 JSON.stringify() 方法将其转换成字符串。

四、处理请求头

fetch() 函数的第二个参数可以设置请求头信息。

fetch('https://jsonplaceholder.typicode.com/users', {
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  }
})
  .then(response => response.json())
  .then(data => console.log(data));

五、设置超时

我们可以设置 fetch() 函数的超时时间，确保响应返回的有效性和及时性。

const controller = new AbortController();
const { signal } = controller;

setTimeout(() => controller.abort(), 5000);

fetch('https://jsonplaceholder.typicode.com/users', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error));

这里设置了一个超时时间为 5 秒，如果请求超时则会抛出异常。

六、处理响应头

我们可以从响应头中获取相关信息，比如自定义头部、响应时间等。

fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => {
    const headers = response.headers;
    const contentType = headers.get('content-type');
    const date = headers.get('date');

    console.log(contentType);
    console.log(date);
    return response.json();
  })
  .then(data => console.log(data));

这里使用了 headers.get() 方法获取响应头内容。

七、配置 SSL/TLS

fetch() 函数支持 HTTPS 协议，可以通过设置 SSL/TLS 证书来实现安全传输。

fetch('https://example.com', {
  agent: new https.Agent({
    rejectUnauthorized: false
  })
})
  .then(response => response.json())
  .then(data => console.log(data));

这里设置了 rejectUnauthorized 属性为 false，忽略服务器证书的验证。

以上就是使用 JavaScript Fetch API 获取数据的介绍，希望对您有所帮助。