fetch()：更轻松、更强大的 XMLHttpRequest 替代方案

2023-12-19 13:24:24

使用 Fetch API 进行高效的网络请求

在现代网络开发中，与后端服务器进行交互至关重要。Fetch API 提供了一种简单高效的方法来处理网络请求，从而简化了这一过程。本文将深入探讨 Fetch API 的基本和高级用法，帮助您掌握这强大的工具。

Fetch 的基本用法

Fetch 的基本用法非常简单。只需传递一个请求 URL 作为参数，即可发送 GET 请求。例如：

fetch('https://example.com/api/users')
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Error: ' + response.status);
    }
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.log(error);
  });

这段代码向 https://example.com/api/users 发出 GET 请求，解析服务器返回的数据为 JSON 格式，并在控制台中输出。

Fetch 的高级用法

发送其他类型的请求：

Fetch 并不仅限于 GET 请求。它还支持 POST、PUT、DELETE 等其他类型。只需在第一个参数中指定请求 URL 和方法即可。例如：

fetch('https://example.com/api/users', {
  method: 'POST',
  body: JSON.stringify({
    name: 'John Doe',
    email: 'john.doe@example.com'
  }),
  headers: {
    'Content-Type': 'application/json'
  }
});

设置请求头：

请求头提供了关于请求的重要信息，例如请求体的格式或身份验证凭证。Fetch 允许您轻松设置请求头。

fetch('https://example.com/api/users', {
  method: 'POST',
  body: JSON.stringify({
    name: 'John Doe',
    email: 'john.doe@example.com'
  }),
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwczovL2V4YW1wbGUuY29tIiwiaWF0IjoxNjQ3NzY1NTM0LCJleHAiOjE2NDc4NTE5MzQsImF1ZCI6Imh0dHBzOi8vZXhhbXBsZS5jb20iLCJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIn0.Z2F-2yQDgnf4dD61GkExgwd7vXbsDqbaXgMD4lX7fJY'
  }
});

处理错误：

Fetch 自动处理错误并提供错误信息。您可以使用 response.status 和 response.statusText 属性判断请求是否成功并采取相应措施。

fetch('https://example.com/api/users')
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Error: ' + response.status);
    }
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.log(error);
  });

总结

Fetch API 提供了处理网络请求的强大而灵活的机制。通过其简单易用的界面，它简化了开发人员与服务器进行交互的任务。无论是发送基本 GET 请求还是设置复杂的请求头，Fetch 都能满足您的需求。

常见问题解答

Fetch API 是否支持所有浏览器？

是的，Fetch API 得到所有主流浏览器的广泛支持，包括 Chrome、Firefox、Safari、Edge 和 Opera。

Fetch API 是否支持文件上传？

是的，您可以使用 FormData 对象发送文件上传。例如：

const formData = new FormData();
formData.append('file', fileInputElement.files[0]);
fetch('https://example.com/upload', {
  method: 'POST',
  body: formData
});

如何取消 Fetch 请求？

您可以使用 AbortController 取消 Fetch 请求。例如：

const controller = new AbortController();
const signal = controller.signal;
fetch('https://example.com/api/users', { signal })
  .then(response => {
    // 请求成功
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      // 请求已取消
    } else {
      // 其他错误
    }
  });
controller.abort(); // 取消请求

如何超时 Fetch 请求？

您可以设置一个超时以在指定时间后自动取消 Fetch 请求。例如：

fetch('https://example.com/api/users', {
  timeout: 5000 // 5 秒超时
})
  .then(response => {
    // 请求成功
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      // 请求超时
    } else {
      // 其他错误
    }
  });