正文

JavaScript同时发送两次请求的5种方法，轻松实现并发请求

/0 浏览量
0507

在JavaScript中，实现并发请求是一个常见的需求，可以帮助我们更高效地处理数据，尤其是在需要从多个源获取数据时。以下是五种实现JavaScript中同时发送两次请求的方法，让你轻松实现并发请求。

方法一：使用Promise.all

Promise.all是一个非常实用的方法，它可以同时处理多个异步操作。当你需要同时发送两个请求时，可以将这两个请求的Promise对象放入一个数组中，然后使用Promise.all来处理。

function sendRequest(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = () => {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(xhr.responseText);
      } else {
        reject(new Error('Failed to load'));
      }
    };
    xhr.onerror = () => reject(new Error('Network error'));
    xhr.send();
  });
}

const urls = ['https://api.example.com/data1', 'https://api.example.com/data2'];
Promise.all(urls.map(url => sendRequest(url)))
  .then(responses => {
    console.log(responses);
  })
  .catch(error => {
    console.error(error);
  });

方法二：使用async/await

async/await是现代JavaScript中处理异步操作的一种更简洁的方式。通过将async关键字添加到函数声明中，你可以使用await关键字来等待Promise对象解析。

async function fetchData(urls) {
  try {
    const responses = await Promise.all(urls.map(url => sendRequest(url)));
    console.log(responses);
  } catch (error) {
    console.error(error);
  }
}

fetchData(['https://api.example.com/data1', 'https://api.example.com/data2']);

方法三：使用fetch

fetch是现代浏览器提供的一个用于网络请求的API，它返回一个Promise对象。使用fetch可以更简洁地发送并发请求。

async function fetchData(urls) {
  try {
    const responses = await Promise.all(urls.map(url => fetch(url)));
    const data = await Promise.all(responses.map(response => response.json()));
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

fetchData(['https://api.example.com/data1', 'https://api.example.com/data2']);

方法四：使用XMLHttpRequest

如果你需要兼容旧版浏览器，可以使用XMLHttpRequest来发送并发请求。

function sendRequest(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = () => {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(xhr.responseText);
      } else {
        reject(new Error('Failed to load'));
      }
    };
    xhr.onerror = () => reject(new Error('Network error'));
    xhr.send();
  });
}

function fetchData(urls) {
  const promises = urls.map(url => sendRequest(url));
  Promise.all(promises).then(responses => {
    console.log(responses);
  }).catch(error => {
    console.error(error);
  });
}

fetchData(['https://api.example.com/data1', 'https://api.example.com/data2']);

方法五：使用库（如axios）

如果你不想直接使用原生JavaScript，可以使用一些第三方库，如axios，来简化并发请求的实现。

const axios = require('axios');

async function fetchData(urls) {
  try {
    const responses = await Promise.all(urls.map(url => axios.get(url)));
    const data = responses.map(response => response.data);
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

fetchData(['https://api.example.com/data1', 'https://api.example.com/data2']);

以上就是JavaScript中实现并发请求的五种方法。选择哪种方法取决于你的具体需求和项目环境。希望这些方法能帮助你更高效地处理并发请求。

-- 展开阅读全文 --