JavaScript HTTP 请求: XMLHttpRequest 和 Fetch 的最佳实践

使用 JavaScript 发出 HTTP 请求是开发 Web 应用程序的常见任务。为了实现这一点，您可以使用内置的 XMLHttpRequest 对象或更现代的 fetch 函数。这篇文章将深入探讨两种方法，并提供清晰的代码示例来帮助您选择最适合您的方法。

使用 XMLHttpRequest

XMLHttpRequest 对象是 JavaScript 中用于发出 HTTP 请求的传统方法。以下是一个使用 XMLHttpRequest 发送 HTTP 请求的示例：

function makeHttpRequest(url, method, body) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === XMLHttpRequest.DONE) {
        if (xhr.status >= 200 && xhr.status < 300) {
          resolve(xhr.responseText);
        } else {
          reject(new Error(xhr.statusText));
        }
      }
    };
    xhr.onerror = function() {
      reject(new Error('Network error'));
    };
    xhr.send(body);
  });
}

// 示例用法：
var url = 'https://api.example.com/data';
var method = 'GET';
var body = null;

makeHttpRequest(url, method, body)
  .then(function(response) {
    console.log('HTTP response:', response);
  })
  .catch(function(error) {
    console.error('Error:', error);
  });

使用 Fetch

fetch 函数是 JavaScript 中用于发出 HTTP 请求的现代方法，它提供了更简洁的 API 和更强大的功能。以下是一个使用 fetch 发送 HTTP 请求的示例：

function makeHttpRequest(url, method, body) {
  var options = {
    method: method,
    body: body
  };

  return fetch(url, options)
    .then(function(response) {
      if (!response.ok) {
        throw new Error(response.statusText);
      }
      return response.text();
    });
}

// 示例用法：
var url = 'https://api.example.com/data';
var method = 'GET';
var body = null;

makeHttpRequest(url, method, body)
  .then(function(response) {
    console.log('HTTP response:', response);
  })
  .catch(function(error) {
    console.error('Error:', error);
  });

选择合适的方法

XMLHttpRequest 和 fetch 都可以用于发出 HTTP 请求，但它们有一些关键的区别：

• API 简洁性： fetch 的 API 比 XMLHttpRequest 更简洁易用，更易于理解和使用。
• Promise 支持： fetch 函数本身返回一个 Promise 对象，这使得它更容易处理异步操作。
• 浏览器支持： fetch 在现代浏览器中得到了广泛的支持，但 XMLHttpRequest 的支持范围更广。

一般来说，如果您的应用程序需要支持较旧的浏览器，或者您更喜欢使用传统的 API，那么 XMLHttpRequest 是一个不错的选择。但是，如果您需要一个更简洁的 API 并且希望利用 Promise 的优势，那么 fetch 是一个更好的选择。

最佳实践

以下是一些使用 XMLHttpRequest 和 fetch 发出 HTTP 请求的最佳实践：

• 使用 async/await： async/await 是处理异步操作的最佳实践，它可以使代码更易于阅读和理解。
• 处理错误： 始终在代码中处理错误，以确保您的应用程序即使在出现错误时也能正常运行。
• 设置请求头： 在必要时设置 Content-Type 等请求头，以便服务器正确解析请求。
• 使用缓存： 使用 Cache-Control 标头或其他缓存机制来提高应用程序的性能。

通过遵循这些最佳实践，您可以有效地使用 XMLHttpRequest 和 fetch 发出 HTTP 请求，并与 API 进行交互，以构建强大的 Web 应用程序。