Uncaught (в обещании) TypeError: undefined не является функцией (Vue. js, Electron)

Question

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

<script>
import Splash from '../components/Splash.vue';
import Intro from '../components/Intro.vue';

export default {
  components: {
    Splash,
    Intro,
  },
  mounted() {
  //This is the line of the error `const animateSplash = async () => {` 
    const animateSplash = async () => {
      const splashAnim = this.$anime({
        targets: '.logo',
        easing: 'cubicBezier(.5, .05, .1, .3)',
        keyframes: [
          { duration: 1000, opacity: 0 },
          { duration: 1000, opacity: 1 },
          { delay: 3000, duration: 500, opacity: 0 },
        ],
        complete(anim) {
          document.querySelector('.logo-wrapper').style.display = 'none';
        },
      }).finished;

      await Promise.all(splashAnim);
    };

    animateSplash().then(() => {
      const introAnim = this.$anime({
        targets: '.intro-wrapper',
        easing: 'cubicBezier(.5, .05, .1, .3)',
        keyframes: [
          { duration: 1000, opacity: 0 },
          { duration: 1000, opacity: 1 },
        ],
        begin(anim) {
          document.querySelector('.intro-wrapper').style.display = 'flex';
        },
      }).finished;
    });
  },
};
</script>

Я получаю ошибка

Home.vue?76f2:17 Uncaught (in promise) TypeError: undefined is not a function, что снова указывает на const animateSplash = async () => {. Но запускается первая анимация splashAnim.

Answer 1

Несколько точек:

1. Promise.all() принимает массив. splashAnim похоже, не является массивом. (Как уже было подтверждено)

Насколько я могу судить (и предполагая, что this.$anime().finished действительно возвращает Promise), вы пытаетесь сделать следующее:

export default {
    components: { Splash, Intro },
    mounted() {
        return this.$anime({
            'targets': '.logo',
            'easing': 'cubicBezier(.5, .05, .1, .3)',
            'keyframes': [
                { 'duration': 1000, 'opacity': 0 },
                { 'duration': 1000, 'opacity': 1 },
                { 'delay': 3000, 'duration': 500, 'opacity': 0 }
            ]
        }).finished
        .then(() => {
            document.querySelector('.logo-wrapper').style.display = 'none';
            document.querySelector('.intro-wrapper').style.display = 'flex';
            return this.$anime({
                'targets': '.intro-wrapper',
                'easing': 'cubicBezier(.5, .05, .1, .3)',
                'keyframes': [
                    { 'duration': 1000, 'opacity': 0 },
                    { 'duration': 1000, 'opacity': 1 },
                ]
            }).finished;
        });
    }
};

Обратите внимание, что два оператора return позволяют сообщать вызывающему mounted() через Promise о завершении всего процесса анимации.

Answer 2

Оказывается, проблема заключалась в этой строке, которая ждала обещания

await Promise.all(splashAnim);

Я изменил его на

await splashAnim;

и все работало нормально. Это ошибка, потому что Promise.all должен работать только с несколькими обещаниями, а не с одним.