将HttpRequest搞定

好的，根据您的需求，为您生成以下文章：

作为前端开发者，我们离不开HTTP库的使用。各种HTTP库做了一些适配工作，让我们在不同的浏览器环境下都能轻松发送HTTP请求。

1.XMLHttpRequest对象

XMLHttpRequest对象可以发送HTTP请求，包括GET、POST、PUT和DELETE请求。它可以用来获取数据、发送数据，以及执行其他操作。

XMLHttpRequest对象的方法：

• open()：打开一个HTTP请求。
• send()：发送HTTP请求。
• abort()：取消HTTP请求。
• getAllResponseHeaders()：获取所有HTTP响应头。
• getResponseHeader()：获取一个HTTP响应头。
• status：HTTP状态码。
• statusText：HTTP状态码的文本。
• responseText：HTTP响应正文。
• responseXML：HTTP响应正文的XML文档。

XMLHttpRequest对象的属性：

• readyState：HTTP请求的状态。
• timeout：HTTP请求的超时时间。
• withCredentials：是否发送cookie。

2.fetch()方法

fetch()方法是一个全局函数，可以发送HTTP请求，包括GET、POST、PUT和DELETE请求。它可以用来获取数据、发送数据，以及执行其他操作。

fetch()方法的参数：

• url：请求的URL。
• options：请求的选项，包括方法、正文、头等。

fetch()方法的返回值：

• 一个Promise对象，该对象表示HTTP请求的最终结果。

3.封装HTTP请求

我们可以将XMLHttpRequest对象和fetch()方法封装成一个函数，以便在不同的项目中重复使用。

function request(url, options) {
  // 默认选项
  const defaultOptions = {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
    },
  };

  // 合并选项
  const mergedOptions = Object.assign(defaultOptions, options);

  // 发起请求
  if (window.fetch) {
    // 使用fetch()方法
    return fetch(url, mergedOptions);
  } else {
    // 使用XMLHttpRequest对象
    const xhr = new XMLHttpRequest();
    xhr.open(mergedOptions.method, url);
    xhr.setRequestHeader('Content-Type', mergedOptions.headers['Content-Type']);
    xhr.send(mergedOptions.body);
    return new Promise((resolve, reject) => {
      xhr.onload = () => {
        if (xhr.status >= 200 && xhr.status < 300) {
          resolve(xhr.response);
        } else {
          reject(new Error(xhr.statusText));
        }
      };
      xhr.onerror = () => {
        reject(new Error('Network Error'));
      };
    });
  }
}

4.使用封装后的HTTP请求

我们可以使用封装后的HTTP请求函数来发送HTTP请求。

request('https://example.com/api/v1/users')
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.error(error);
  });

5.总结

我们已经了解了XMLHttpRequest对象和fetch()方法，以及如何将它们封装成一个函数。我们可以使用这个函数来发送HTTP请求，并处理HTTP响应。