Vue.js: блокировка следующего запроса до выполнения предыдущего - PullRequest
Новая
       19

Vue.js: блокировка следующего запроса до выполнения предыдущего

0 голосов
/ 27 июня 2018

У меня есть сообщения в моем приложении, которые пользователь может либо любить, либо не любить: есть две разные кнопки, и каждая из них показывает, сколько сообщений получает / не нравится. В настоящее время я пытаюсь устранить ошибку этой функции. Если я быстро нажимаю на эти кнопки, одну за другой, а затем останавливаюсь, эти кнопки продолжают отображать это поведение при нажатии, и в течение некоторого времени в моей консоли появляются другие запросы.

Вот что у меня в компоненте: 

<template>
...
<div>
      <a style="cursor: default"
         @click.pointer="dislikePost(getPost.id)">
        <i class="icon-minus"/>{{ getPost.dislikes }} Dislike
      </a>
      <a style="cursor: default"
         @click="likePost(getPost.id)">
        <i class="icon-plus" />{{ getPost.likes }} Like
      </a>
    </div>
...
</template>

А вот что у меня в магазине: 

...
actions: {
likePost({ commit }, postId) {
  http
    .post(`${config.api}/posts/${postId}/like`)
    .then(({ data }) => {
      commit('load_post', data);
    });
},
dislikePost({ commit }, postId) {
  http
    .post(`${config.api}/posts/${postId}/dislike`)
    .then(({ data }) => {
      commit('load_post', data);
    });
},
},
mutations: {
load_posts(state, posts) {
  state.posts = posts;
},
},
...
...