Блог

Я создаю расширение Chrome, в котором я принимаю входные данные с помощью prompt и отправляю их на сервер с помощью 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"
    });
});
 

Здесь данные — это один массив, в котором хранятся данные, полученные от пользователя.

Вы можете ограничить одновременные запросы с помощью флага

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