javascript - 未捕获( promise )TypeError : undefined is not a function (Vue. js，Electron)

Question

我正在尝试使用带有某些promise函数的anime.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

几点:

Promise.all()接受数组。 splashAnim似乎不是数组。 (已确认)

如果splashAnim是Promise(甚至只是一个可忍受的话)，则只需return splashAnim;即可。

如果您正在处理Promises，则可以(并且应该争论)避免那些麻烦的begin和complete回调。

据我所知(并假设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语句允许通过Promise将mounted()的调用者通知整个动画过程的完成。