正文

JavaScript中一个按钮发送两个请求的简单方法

/0 浏览量
0507

在JavaScript中，使用按钮触发两个并发请求是一项常见的任务。这里，我将展示几种简单的方法来实现这个功能。

1. 使用原生JavaScript的XMLHttpRequest

首先，我们可以使用XMLHttpRequest对象来发送HTTP请求。以下是一个例子，展示了如何通过点击按钮来发送两个请求：

// 函数用于发送GET请求
function sendGetRequest(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      callback(xhr.responseText);
    }
  };
  xhr.send();
}

// 函数用于处理请求结果
function handleResponse(response) {
  console.log('Response:', response);
}

// 为按钮添加点击事件监听器
document.getElementById('myButton').addEventListener('click', function() {
  // 发送第一个请求
  sendGetRequest('https://api.example.com/data1', handleResponse);

  // 发送第二个请求
  sendGetRequest('https://api.example.com/data2', handleResponse);
});

在这个例子中，sendGetRequest函数用于发送GET请求，并在接收到响应时调用handleResponse函数。

2. 使用fetch API

fetch API提供了一个更现代和简洁的方式来发送网络请求。以下是如何使用fetch来发送两个请求的例子：

// 函数用于发送GET请求
function sendGetRequest(url) {
  fetch(url)
    .then(response => response.text())
    .then(handleResponse)
    .catch(error => console.error('Error:', error));
}

// 函数用于处理请求结果
function handleResponse(response) {
  console.log('Response:', response);
}

// 为按钮添加点击事件监听器
document.getElementById('myButton').addEventListener('click', function() {
  // 发送第一个请求
  sendGetRequest('https://api.example.com/data1');

  // 发送第二个请求
  sendGetRequest('https://api.example.com/data2');
});

在这个例子中，sendGetRequest函数使用fetch发送请求，并在请求完成后调用handleResponse函数。

3. 使用Promise.all

如果你想要同时处理两个请求，并且需要等到它们都完成才能继续执行代码，可以使用Promise.all。以下是如何实现的例子：

// 函数用于发送GET请求
function sendGetRequest(url) {
  return fetch(url)
    .then(response => response.text());
}

// 为按钮添加点击事件监听器
document.getElementById('myButton').addEventListener('click', function() {
  // 使用Promise.all等待两个请求都完成
  Promise.all([
    sendGetRequest('https://api.example.com/data1'),
    sendGetRequest('https://api.example.com/data2')
  ])
  .then(([response1, response2]) => {
    console.log('Response 1:', response1);
    console.log('Response 2:', response2);
  });
});

在这个例子中，Promise.all会等待两个请求都完成后，才执行回调函数，并传入两个响应。

这些方法都非常简单，可以根据你的具体需求选择适合的一种。希望这些信息能帮助你解决问题！

-- 展开阅读全文 --