Упорядоченное выполнение событий внутри метода в машинописи с гарантией

Question

Я делаю приложение в Ionic3.Приложение требует, чтобы при нажатии на определенную кнопку выполнялись следующие действия в следующем порядке:

1. Все кнопки на этой странице будут скрыты
2. Снимок экрана
3. Отображение загрузчика
4. Сохранение данных через API
5. dismiss loader
6. share на Whatsapp
7. с отображением только необходимых кнопок после возврата из whatsapp

Вот мой код:

saveandshare() {
    this.homebtn = false;
    this.logout = false;
    this.back = false;
    this.save = false;

    let loading = this.loadingCtrl.create({
      content: 'Please wait...'
    });

    this.screenshot.URI(80).then(res => {
      this.screen = res.URI;
    });

    loading.present();

    this.share.testsubmit(this.screen).subscribe(
      data=>{
          console.log('Data Submnitted');
      })
      loading.dismiss();

      this.socialshare.shareViaWhatsApp('Test', this.screen, null).then(
        ()=>{  }
      )
    this.homebtn = true;
    this.logout = true;
  }

Код работает правильно, без ошибок, но события не synchronous, как после сборки приложения, иногда кнопки видны на скриншоте, иногда изображение не появляется, когда яподелиться на WhatsApp, а в некоторых случаях после возвращения из WhatsApp все кнопки видны, а иногда и нет.

Кажется, что это связано с asynchronous характер javascript.Как заставить их выполнить по порядку?

Пожалуйста, предложите мне.Любая помощь или предложение будет высоко ценится.Спасибо!

Answer 1

Это объяснение того, как асинхронные функции могут обрабатываться в JavaScript.

Рассмотрим 2 функции, которые возвращаются асинхронно.Это также может быть любой сетевой вызов.

function asyncA(){
  return new Promise((resolve, reject)=>{
    setTimeout(()=>{
      resolve('Handled A()');
    }, 1000)
  });
}

function asyncB(){
  return new Promise((resolve, reject)=>{
    setTimeout(()=>{
      resolve('Handled B()');
    }, 1000)
  });
}

Метод 1. Обратные вызовы обработчика успеха - Быстрее, но имеет тесную связь

function callA(){
  asyncA().then(
    data => { 
      console.log(data);
      callB(); // continue calling other function
    },
    error => { console.log('Error while calling A()') }
  )
}

function callB(){
  asyncB().then(
    data => { 
      console.log(data);
      // continue calling if required.
      // Hide buttons
    },
    error => { console.log('Error while calling B()') }
  )
}

############### OR ##################

asyncA().then( data => { 
  console.log(data); // returned values from asyncA()
  return asyncB();
})
.then( data => { 
  console.log(data); // returned values from asyncB()
  // Hide buttons
});

Метод 2. async-await - Более понятный, слабосвязанный, медленный

async function callAll(){
  // make sure to handle errors using try { } cathc(err){ }
  let a_val = await asyncA();
  let b_val = await asyncB();
  console.log(a_val, b_val);

  // all functions have returned, hide buttons
}

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

Я пойду с 1-го метода (упомянутого выше).Ниже приведена последовательность, которой я бы следовал () для достижения требуемой функциональности.Обязательно обрабатывайте ошибки.

this.screenshot.URI(80).then(res => {
  console.log('Screenshot API finished');
  this.screen = res.URI;
  loading.present();

  // create separate function for below code
  this.share.testsubmit(this.screen).subscribe(
    data=>{
      console.log('Data Submmitted');
      loading.dismiss();

      // create separate function for below code
      this.socialshare.shareViaWhatsApp('Test', this.screen, null).then(
        ()=>{
          // shraing completed
          // perform final actions. Create separate funcitons if required
          this.homebtn = true;
          this.logout = true;
        }
      );
    });
});

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