Hi I have a server that emulates queues and slow database)
nodeJs 22:

const http = require('http');
const url = require('url');

let messages = [];
let queue = [];

const processQueue = () => {
    if (queue.length > 0) {
        const message = queue.shift();
        messages.push(message);
        console.log(messages);
    }
    // Call processQueue again after a delay to process the next message
    setTimeout(processQueue, 3000);
};

const server = http.createServer((req, res) => {
    const parsedUrl = url.parse(req.url, true);
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'OPTIONS, GET, POST');
    res.setHeader('Access-Control-Allow-Headers', '*');

    if (req.method === 'OPTIONS') {
        res.end();
        return;
    }

    if (parsedUrl.pathname === '/messages') {
        if (req.method === 'GET') {
            res.setHeader('Content-Type', 'application/json');
            res.end(JSON.stringify(messages));
        } else if (req.method === 'POST') {
            let body = '';
            req.on('data', chunk => {
                body += chunk.toString();
            });
            req.on('end', () => {
                const message = JSON.parse(body);
                queue.push(message);
                res.end();
            });
        }
    } else {
        res.statusCode = 404;
        res.end();
    }
});

server.listen(3000, () => {
    console.log('Server listening on port 3000');
});

// Start processing the queue
processQueue();

The server code cannot be edited:)
and my client index.html code (without AbortController)

<button id="add" onclick="addMessage(generateMessage())">addmessage</button>
<div id="container"></div>
<script>
  function generateMessage() {
    return {
      text: (Math.random() + 1).toString(36).substring(7)
    };
  }
  async function updateMessages() {
    let response = await fetch("http://localhost:3000/messages");
    let messages = await response.json();
    counter = messages.length;
    let container = document.getElementById("container");
    container.innerHTML = "";
    renderMessages(messages);
  }
  function renderMessages(messages) {
    messages.forEach((message) => {
        addMessageDom(message)
    });
  }
  function addMessageDom(message){
    let messageWrapper = document.createElement("div");
    messageWrapper.innerText = message.text;

    let container = document.getElementById("container");
    container.appendChild(messageWrapper);
  }
  async function addMessage(message) {
    addMessageDom(message)
    let response = await fetch("http://localhost:3000/messages", {
      method: "POST",
      body: JSON.stringify(message),
      headers: {
        'Content-Type': 'application/json'
      }
    }).then(() => {
      updateMessages();
    });
  }
  updateMessages();
</script>

Well, if I run server and open index.html
I’m gonna see current messages and a button to post message.
Get messages on server works immediately, but Post takes 3 seconds and executes in queue.

To optimize massage and make it looks sent immediately, it renders added message and only after post request was successful updates messages

The problem is, if I click addmessage 2 or 3 or more times quickly, the messages shown will blink
to avoid this behaviour I would like to cancel all previous requests to get messages in updateMessages function
that means messages won’t blink and will always up to date:)

I tried to add AbortController this way for funciton updateMessages

  let controller = new AbortController();
  async function updateMessages() {
    controller.abort();
    controller = new AbortController();
    let response = await fetch("http://localhost:3000/messages");
    let messages = await response.json();
    counter = messages.length;
    let container = document.getElementById("container");
    container.innerHTML = "";
    renderMessages(messages);
  }

It don’t helps