Использование метода vue router BeforeRouteEnter для ожидания завершения http-запроса - PullRequest
Новая
       23

Использование метода vue router BeforeRouteEnter для ожидания завершения http-запроса

0 голосов
/ 12 апреля 2020

Привет. Я пытаюсь сделать так, чтобы при открытии пользователем страницы она не открывалась до тех пор, пока данные с сервера не были успешно извлечены, чтобы она не появлялась через 0,5 с или около того после входа пользователя.

Для этого я прочитал, что мне нужно использовать BeforeRouteEnter, но у меня возникают проблемы с поиском информации о том, как правильно использовать это, особенно с ожиданием, пока мой REST API завершит свой запрос.

Вот метод, который я хочу дождаться завершения, прежде чем перенаправить на мой новый компонент: 

 async getThread() {
            const response = await postsService.fetchOneThread({
                id: this.blockId,
                topic: this.topicId,
                thread: this.postId
            });
            this.thread = response.data;
        }

, поэтому, как только this.thread = response.data, я хочу, чтобы страница отображалась.

Важно отметить, что я также передаю параметры URL, чтобы получить данные, которые являются идентификатором темы / черного / сообщения.

Здесь также используется мой метод getUrlParam 

url() {
            let x = this.$route.params.topic.split('-');
            this.topicId = x[0];

            let y = this.$route.params.id.split('-');
            this.blockId = y[0];

            let post = this.$route.params.thread.split('-');
            this.postId = post[1];

            this.getThread();
        }

Спасибо

1 Ответ

0 голосов
/ 12 апреля 2020

Вам нужно переместиться getThread внутрь beforeRouteEnter

beforeRouteEnter: (to, from, next) => {
  postsService.fetchOneThread({
    id: this.blockId,
    topic: this.topicId,
    thread: this.postId
  }).then( response => {
     //store the data somewhere accessible
     next()
  })
},

Несколько замечаний:

  • Я не думаю, что beforeRouteEnter может быть асин c поэтому я использую then, чтобы получить ответ
  • компонент еще не готов, поэтому вы не можете получить к нему доступ, вам нужно сохранить информацию в другом месте, чтобы ее могли прочитать компонент. Я бы предложил использовать для этого Vuex .

Если вы решите использовать Vuex, то вам нужно добавить мутацию и вызвать ее из обратного вызова обещания. 

store.commit('ADD_THREAD', response.data)
...