Как решить: «Не удается использовать ключевое слово« await »вне асинхронной функции»

Question

Внутри моего Vue компонента. У меня есть метод (показать), который показывает сообщение ввода sweetalert2. Но он возвращает ошибку после использования laravel mix (npm run watch)

show(){

    const { value: email } = await Swal.fire({
    title: 'Input email address',
    input: 'email',
    inputPlaceholder: 'Enter your email address'
    })

    if (email) {
        Swal.fire('Entered email: ' + email)
    }
}

Ошибка:

Невозможно использовать ключевое слово 'await' вне асинхронной функции

Answer 1

Я не уверен точно, какой синтаксис вызова у вас для метода show, но вам нужно объявить эту функцию как async, чтобы использовать await.

Например, в методе модуля:

const show = async () => {
  const { value: email } = await Swal.fire({
    title: 'Input email address',
    input: 'email',
    inputPlaceholder: 'Enter your email address'
  })

  if (email) {
    Swal.fire('Entered email: ' + email)
  }
}

Как метод экземпляра в классе:

class MyComponent {
  async show() {
    const { value: email } = await Swal.fire({
      title: 'Input email address',
      input: 'email',
      inputPlaceholder: 'Enter your email address'
    })

    if (email) {
      Swal.fire('Entered email: ' + email)
    }
  }
}

Answer 2

async show(){ 
   //here
    const { value: email } = await Swal.fire({
        title: 'Input email address',
        input: 'email',
        inputPlaceholder: 'Enter your email address'
    });

    if (email) {
        Swal.fire('Entered email: ' + email);
    }
}