防止使用 fetch 发送多个 http 请求

Question

我正在创建一个 chrome 扩展，在其中我使用提示获取输入并使用 HTTP 请求将其发送到服务器。通过这样做，我面临着数据重复，这意味着扩展程序正在向服务器发送多个请求，这是我想阻止的。（注意：仅在发送相同数据的多个请求时才从提示中获取数据）示例代码：前端：var data = prompt("Enter your data here");if (data !== null || data !== ''){fetch('http://localhost:3000/post', {  method: 'POST',  body: JSON.stringify({    data: data  }),  headers: {    'Content-Type': 'application/json',  }}).then((res) => {  console.log("wait for whole req");  return res.json();}).then((resData) => {  console.log(resData);  console.log("req send successfully");  // note = null;}).catch((error) => {  // note = null;  console.log(error.message);  // alert(error.message);});后端：app.post("/post", function(req, res) {    const data = req.body.data;    dataList.push(data);    res.status(200).json({       status: "uploaded"    });});这里，data 是一个数组，存储从用户处获取的数据。

Answer 1

您可以通过标志限制并发请求

var data = null, 

isLoading = false, // perhaps you need to make this persistent depending on your overall architecture

if (!isLoading) 

{

   data = prompt("Enter your data here");

}

if (data !== null || data !== ''){

isLoading = true;

fetch('http://localhost:3000/post', {

  method: 'POST',

  body: JSON.stringify({

    data: data

  }),

  headers: {

    'Content-Type': 'application/json',

  }

}).then((res) => {

  console.log("wait for whole req");

  

  return res.json();

}).then((resData) => {

  console.log(resData);

  console.log("req send successfully");

  isLoading = false

  // note = null;

}).catch((error) => {

  // note = null;

  console.log(error.message);

  isLoading = false

  // alert(error.message);

});