Как во Vue2 с помощью axios без setTimeout() перехватить данные асинхронного запроса?

Question

[EVOSandru6]

Добрый день,

Есть такая проблема. По http запросу вытаскиваю данные с сервера для первичной инициализации. Но возникает проблема во время выполнения - данные которые риходят в ответах не получается перехватить из за асинхронности таковых запросов.

Пример отражает мою проблему. Максимально упростил для понятности.

export default {

        data: function () {
            return {
                order: null,
            }
        },
        created() {

            this.initOrder();

            this.initOptions();
        },

        methods: {

            initOrder() {

                HTTP.get('/orders/id=' + this.$route.params.id).then((response) =>
                {

                    this.order = response.data;
                });
            },
            initOptions() {

                console.log(this.order); // return null

                // ...

                this.order.param = 'oops'; // exception cannot read property of null

                // ...

                setTimeout(() => {

                    console.log(this.order); // return expected object

                    this.order.param = 'oops'; // so good by setTimeout is cumbersome

                }, 1000);
            }
        },
    }

}

Интересует - как можно решить данную проблему в крайнем случаем убийством ассинхронности или еще как то по человечески.

Answer 1

[Антон Швец]

Нужно сделать так

data: function () {
            return {
                order: {
                  param: 'default state'
                },
            }
        },

и не будет никаких exception. Т.е. для всех параметров следует описывать структуру заранее.

Плюс к тому, по-хорошему, асинхронные методы должны бы возвращать промис

initOrder() {
  return HTTP.get('/orders/id=' + this.$route.params.id)
    .then((response) => {
      this.loaded = true;
      this.order = response.data;
    });
},

Теперь мы всегда можем повесить какое-то действие на резолв initOrder через then, например вызвать initOptions.
this.initOrder().then(this.initOptions);
А на основной компонент по флагу this.loaded можно показывать какую-нибудь крутилку, пока данные не загружены.
Промис так же можно вернуть, сделав, async initOrder() ну и переписав его как асинк-функцию.

Comments

[EVOSandru6]

Благодарю за ответ.

1. Дело в том, что своим запросом я подгружаю не данные, а поля объекта, т.е. инициализирую объект зануленными полями (о которых клиент пока не знает). Из этого вытекает, что все связывания на разметке ругаются:

example:

<p>{{order.someParam}}</p>

Понимаю, что с точки зрения написания - это далеко не лучший вариант. Все поля можно описать в data компонента, но я отталкиваюсь от сложившейся ситуации.

Пробовал также через async/await и asyncComputed - результат тот же.

В дальнейшем нужно будет таким же образом тянуть поля уже с установленными значениями при редактировании заказа. Получается данная проблема в разметке останется актуальной и для обновления.

2. Задумывался использовать Vuex для инициализации данных, но получается - нужно будет заводить 2 хранилища - для оформления заказа и для обновления. Но.. storage подкидывается в application (new Vue(...)), так же как и vue-router, а перед инициализацией vue-router, storage о нем ничего не знает. Get параметр придется тащить через Javascript. Вытекают какие то страшные дебри. Можете что-то прокомментировать на этот счет?

[Антон Швец]

1. ну чтобы связывания не ругались можно:

• прописать заранее в data
  
• связывать с computed параметрами, которые устанавливаются в зависимости от ваших полученных данных. Не знаю что такое asyncComputed, и зачем оно нужно вообще. Для асинхронных действий достаточно асинхронных методов.
  
• в зависимости от данных подтягивать/генерировать нужные компоненты. Это сложнее
  

2. Vuex нужен для связывания независимых компонентов. Хранилище для одного компонента вы можете создать сами и импортировать его где нужно.

Ничего не понял насчет страшных дебрей.
Зачем роутеру знать про вьюкс или наоборот. Если нужно использовать vuex вне структуры приложения Vue, можно просто импортировать его, так же как вы делали при инициализации new Vue и обращаться к store.

[EVOSandru6]

Антон, Благодарю! В общем понял куда копать надо.