如何在前端JS监听HTTP调用

在前端中，可以使用JavaScript来监听HTTP调用。以下是一种常见的方法：

1. 使用XMLHttpRequest对象：XMLHttpRequest是一个内置对象，用于在浏览器中发送HTTP请求。可以通过创建一个XMLHttpRequest实例，并设置相关的事件监听器来监听HTTP调用的状态和响应。

示例代码如下：

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // HTTP请求成功完成，并且响应状态码为200
    var response = xhr.responseText;
    // 处理响应数据
  }
};

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

在上述代码中，我们创建了一个XMLHttpRequest对象，并通过onreadystatechange事件监听器来检测HTTP请求的状态。当readyState属性为4（请求已完成）且status属性为200（成功）时，表示HTTP请求成功完成。可以在该条件下处理响应数据。

1. 使用fetch API：fetch是一种现代的JavaScript API，用于发送HTTP请求并获取响应。它提供了更简洁和灵活的方式来监听HTTP调用。

示例代码如下：

fetch('http://example.com/api')
  .then(function(response) {
    if (response.ok) {
      return response.text();
    } else {
      throw new Error('HTTP request failed');
    }
  })
  .then(function(data) {
    // 处理响应数据
  })
  .catch(function(error) {
    // 处理错误
  });

在上述代码中，我们使用fetch函数发送HTTP GET请求，并通过Promise链式调用来处理响应。在第一个.then回调函数中，我们检查响应的ok属性，如果为true，则调用response.text()方法获取响应数据。在第二个.then回调函数中，我们可以处理获取到的响应数据。如果发生错误，可以通过.catch回调函数来处理。

以上是两种常见的在前端JS中监听HTTP调用的方法。根据具体的需求和场景，可以选择适合的方法来实现。