Как не позволить функции продвинуться дальше?

Question

[Meros]

Я не буду выкладывать компонент полностью, поскольку в нем почти 500 строчек, и разбираться в нем вам будет просто больно.

async created(){
  await this.getUserCheckList();
  ....последующие функции и обработка данных.
}
methods:{
  async getUsersCheckList(){
    await axios.get(this.userListUrl).then((x)=>{this.usernameSlugList = x.data.slug; this.emailSlugList = 
    x.data.email_slug}).catch((e)=>{this.handleUsersListErrors(e)});
  },
  async handleUsersListErrors(e){
    if (!e.status){
      await setTimeout(()=> this.getUsersCheckList(), 10000);
     }
  },
}

Задумка заключается в следующем: если не удалось подключиться к серверу, то через async handleUsersListErrors происходит вызов запрашиваемой функции до тех пор, пока сервер не начнет отвечать. И до тех пор, пока это не произойдет, async created() не должна двигаться дальше await this.getUserCheckList(). У меня же получается так, что после первого вызова handleUserListErrors процессы в created двигаются дальше, и это вызывает тонну ошибок, которые бы я хотел избежать. Собственно, вопрос: как мне организовать код, чтобы в async created() не двигалась дальше, пока this.getUserCheckList не получит данные?

Answer 1

[0xD34F]

await setTimeout

Бессмысленная операция, setTimeout не возвращает Promise, эвейтить тут нечего.

Если хотите использовать await вместе с setTimeout, последний придётся явно завернуть в Promise:

await new Promise(r => setTimeout(r, 1000))

Кроме того, надо возвращать результаты выполнения функций, например здесь

.catch((e)=>{this.handleUsersListErrors(e)})

после того, как catch отработает, вызов getUserCheckList завершается, и created продолжает работу, никакого "не позволить продвинуться" не будет (ну и конечно нелишним будет отметить, что хуки жизненного цикла vue синхронны, так что в любом случае не выйдет "приостановить" выполнение created - в том смысле, чтобы асинхронный код выполнился до начала монтирования экземпляра компонента).

UPD. Держите пример того, как может выглядеть реализация подобной схемы (в роли "запроса" выступает генерация случайного числа, успешным результатом считается число, попадающее в верхние 10% заданного интервала):

data: () => ({
  status: 'unknown',
  val: 'empty',
}),
methods: {
  getVal() {
    this.status = 'awaiting request answer';
    return new Promise((...r) => {
      setTimeout(() => {
        const max = 10000;
        this.val = Math.random() * max | 0;
        r[+(this.val < max * 0.9)]();
      }, 1000);
    }).catch(this.handleError);
  },
  handleError() {
    this.status = 'ERROR, awaiting new request';
    return new Promise(r => setTimeout(r, 2000)).then(this.getVal);
  },
},
async created() {
  await this.getVal();
  this.status = 'OK';
},

<div>status: {{ status }}</div>
<div>value: {{ val }}</div>