正文

JavaScript监听某个请求响应完成，通常使用以下方法： 1. 使用`XMLHttpRequest`对象： ```javascript var xhr = new XMLHttpRequest(); xhr.open("GET", "url", true); xhr.onreadystatechange = function () { if

/0 浏览量
0527

在JavaScript中，监听网络请求的响应是进行前后端交互的关键步骤。以下将详细介绍两种常用的方法：使用XMLHttpRequest对象和fetch API。

1. 使用XMLHttpRequest对象

XMLHttpRequest是JavaScript中用于在后台与服务器交换数据的传统方式。以下是如何使用XMLHttpRequest对象来发送请求并监听响应的示例：

var xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象
xhr.open("GET", "url", true); // 初始化一个请求，包括请求类型、URL和异步标志
xhr.onreadystatechange = function () { // 设置回调函数，用于处理请求状态的变化
  if (xhr.readyState == 4 && xhr.status == 200) { // 检查请求是否完成，状态码是否为200
    // 请求成功，响应数据在xhr.responseText中
    console.log(xhr.responseText); // 打印响应文本
  }
};
xhr.send(); // 发送请求

在上述代码中，onreadystatechange事件处理函数会在请求的状态发生变化时被调用。当readyState属性等于4（意味着请求已完成），且status属性等于200（意味着请求成功）时，我们就可以在xhr.responseText中获取到响应数据。

2. 使用fetch API

fetch API是现代浏览器提供的一个更简洁、更强大的网络请求接口。以下是如何使用fetch API来发送请求并监听响应的示例：

fetch("url") // 发送请求
  .then(response => {
    if (!response.ok) { // 检查响应状态
      throw new Error('Network response was not ok');
    }
    return response.text(); // 解析响应体为文本
  })
  .then(data => {
    // 请求成功，data为响应数据
    console.log(data); // 打印响应文本
  })
  .catch(error => {
    // 请求失败，error为错误信息
    console.error('Fetch error:', error); // 打印错误信息
  });

在fetch API中，返回的是一个Promise对象，这使得链式调用变得非常方便。通过链式调用.then()和.catch()方法，我们可以处理请求成功或失败的情况。

总结

两种方法各有优缺点，XMLHttpRequest是更传统的API，而fetch是更现代的API。通常，如果你需要更复杂的请求（如发送POST请求、发送JSON数据等），fetch可能更适合。如果你只需要简单的GET请求，并且希望代码更加简洁，那么fetch也是一个不错的选择。

无论选择哪种方法，正确监听请求的响应对于确保你的应用程序能够正确处理网络交互至关重要。

-- 展开阅读全文 --