Explain the logic error in the component?

Question

Vue.js

Given:
the user object
in the user includes the articles array (here id (12,13,14,15))
To add an article to the user, I do the following, I will indicate the comments in the code

try {
        this.bookmarks = await this.user.articles.map(function (ids) {
          return ids.id; //получаю массив с ID
        });
        this.query = await id.concat(this.bookmarks); //добавляю ID нового article в массив articles с последующим созданием нового массива query
        this.user = await this.$strapi.$users.update("me", {
          articles: this.query, // отправляю данные на сервер для обновления
        });
      } catch (e) {
        this.error = e.response.data.message[0].messages[0].message;
}

The problem is the following, if you quickly click on different articles to add, then not all are added, I concluded that this is due to the fact that I get bookmarks from user, I also update the state user in the request to the server, and it turns out what a "vicious" circle.
How can I fix this?

Answer 1

1. Reorganize work with state, when adding - send info to the server, but do not update state based on the results of this request, update state locally
2. Use a state machine so as not to spam requests during state transition (but you still prefer option 1)