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

Question

I'm creating a chrome extension, in which I take input from using prompt and send it to the server using an HTTP request. By doing this I'm facing duplication of data, which means the extension is sending multiple requests to the server, which I want to prevent. (Note: by taking data from prompt only once it is sending multiple requests of same data)

Example code: Front-End:

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);
});

Back-End:

app.post("/post", function(req, res) {
    const data = req.body.data;
    dataList.push(data);
    res.status(200).json({
       status: "uploaded"
    });
});

Here, data is one array that stores data taken from the user.

Answer 1

You can limit concurrent requests by a flag

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);
});