XMLHttpRequest 函数仅在最后一次调用时返回数据

Question

我的问题是……

我制作了一个javascript函数来使用XMLHttpRequest从我的数据库中获取一些数据，使用POST方法，如果我只使用这个函数一次，这可以按照我的意愿工作，但是我需要在我的数据库中调用这个函数超过1次项目，当我调用 2 次或更多次时，只有最后一个请求给我一些数据，第一个只显示 POST 方法的主体，但不返回数据，所以问题是......

我怎样才能让这个功能在我每次调用时都能正常工作？

如果你们能告诉我为什么现在会发生这种情况，我也将不胜感激

我把日志放在我的函数中，看看发生了什么，我的 POST 方法请求的主体每次都在那里，但只有最后一个函数得到返回的数据，其他函数甚至返回一些东西......

我的功能：

var xhr = new XMLHttpRequest();

function getListOfProducts(id, paramsCat, paramsSubcat, insertCheckout) {
  var params1 = {
    id_categoria: paramsCat,
    id_subcategoria: paramsSubcat,
    slug: "",
  };
  console.log(params1);

  xhr.open("POST", url);
  xhr.onload = function () {
    console.log("Loaded");
    var parse = JSON.parse(xhr.response);
    var products = parse.results;
    console.log(products);
  };
  xhr.send(JSON.stringify(params1));
}

Answer 1

按照建议，您可以使用fetch。在现有代码中，每次调用 getListOfProducts 时都创建 XMLHttpRequest 对象。因为你有相同的 xhr 实例。所以这在下一次通话中不起作用。

function getListOfProducts(id, paramsCat, paramsSubcat, insertCheckout) {
  var xhr = new XMLHttpRequest();
  //... rest of the code
}

fetch 中的类似代码：

function getListOfProducts(id, paramsCat, paramsSubcat, insertCheckout) {
  var params1 = {
    id_categoria: paramsCat,
    id_subcategoria: paramsSubcat,
    slug: "",
  };
  fetch({
    url: url,
    body: JSON.stringify(params1),
    method: "POST",
  })
    .then((res) => res.json())
    .then((res) => {
      var products = res.results;
      console.log(products);
    });
}