JavaScript 中怎么发出 HTTP 请求

在JavaScript中发出HTTP请求的主要方式包括：XMLHttpRequest对象、Fetch API、Axios库和各种其他的HTTP客户端库。Fetch API 是现代Web开发中推荐的方法，因为它提供了一个更加强大、灵活的接口来处理网络请求。这个API基于Promise设计，因此它可以更好地处理异步操作。

一、XMLHTTPREQUEST对象

XMLHttpRequest（XHR）是一种浏览器内置的HTTP请求工具，可以创建、发送和接收Web服务器上的数据。XHR最初由微软设计，并被大多数浏览器采用，为AJAX（异步JavaScript和XML）引擎提供支持。

• 创建XHR对象：

  要使用XHR发起HTTP请求，首先需要创建一个XMLHttpRequest的实例。

  var xhr = new XMLHttpRequest();
  
  

• 发送请求：

  通过open方法设置请求的类型、URL以及是否异步。然后通过send方法发送请求。

  xhr.open('GET', 'https://api.example.com/data', true);
  
  xhr.send();
  

• 接收响应：

  XHR提供了一个onreadystatechange事件处理函数，该函数会在XHR对象的状态发生变化时被调用。

  xhr.onreadystatechange = function() {
  
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        console.log(xhr.responseText);
      } else {
        console.error('There was a problem with the request.');
      }
    }
  };
  

二、FETCH API

Fetch API是现代浏览器中内置的另一个用于进行网络请求的API，它基于Promise设计，使得管理异步请求更加简单。

• 发起请求：

  Fetch函数接受一个URL和一个可选的配置对象，返回一个Promise，该Promise解析为一个Response对象。

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

• 配置请求：

  可以为fetch()函数提供第二个参数，用于自定义HTTP请求的不同方面，例如方法、头部或主体内容。

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

三、AXIOS库

Axios是一个基于Promise的HTTP客户端，适用于浏览器和node.js，并提供更多的特性，比如拦截请求和响应、取消请求、自动转换JSON数据等。

• 安装Axios：

  在浏览器使用之前，需要先通过npm或者CDN导入Axios。

  npm install axios
  
  

  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  
  

• 使用Axios发送请求：

  Axios API很简洁，可以通过axios.get()、axios.post()等方法直接发送请求。

  axios.get('https://api.example.com/data')
  
    .then(response => console.log(response.data))
    .catch(error => console.error(error));
  

• 配置全局Axios设置：

  可以通过设置axios.defaults来设置全局的配置项，例如请求的基础URL和头部信息。

  axios.defaults.baseURL = 'https://api.example.com';
  
  axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
  

四、其他HTTP客户端库

除了上述方法外，还有诸如jQuery的$.ajax()、Superagent、Got等许多其他的HTTP客户端库。这些库各具特色，但都提供了发送HTTP请求的能力。

在选择合适的HTTP请求方法时，需要考虑项目的需求、兼容性以及开发的便利性。对于现代Web应用程序，Fetch API将是大多数情况下的首选，而对于需要更多功能或者浏览器兼容性的场景，Axios或其他HTTP库也是很好的选择。

相关问答FAQs：

如何在 JavaScript 中发送 HTTP 请求？

• JavaScript提供了内置的XMLHttpRequest对象，以便发送HTTP请求。您可以使用该对象来向服务器发送GET、POST以及其他类型的请求。您只需使用适当的HTTP方法、URL和任何必要的请求头或请求体来配置请求，并使用send()方法将其发送出去。

如何使用fetch函数发送HTTP请求？

• fetch函数是ES6中引入的一种更现代的发送HTTP请求的方法。它使用了Promise的概念，提供了一种更简洁和易于使用的方式来发送网络请求。使用fetch，您无需手动创建XMLHttpRequest对象，并且可以轻松地处理响应数据。

有没有其他的JavaScript库可以帮助发送HTTP请求？

• 当然！除了原生的XMLHttpRequest和fetch函数外，还有许多流行的JavaScript库可用于发送HTTP请求，例如Axios和SuperAgent。这些库提供了更高级和更简化的API，并提供了额外的功能，如处理请求的拦截、发送并行请求等。根据您的需求和喜好，您可以选择适合您的库来发送HTTP请求。