开发者问题收集

未捕获（在承诺中）TypeError：未定义不是一个函数（Vue.js，Electron）

2020-06-16
2390
javascript node.js vue.js promise electron

我正在尝试使用 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 。

2个回答

几点：

  1. Promise.all() 接受数组。 splashAnim 似乎不是数组。 （如已确认）
  2. 如果 splashAnim 是 Promise（或者甚至只是一个 thenable），则只需 return splashAnim; 。
  3. 如果您正在处理 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 语句允许 mounted() 的调用者通过 Promise 获悉整个动画过程的完成情况。

Roamer-1888
2020-06-16

结果发现问题出在这行代码中，该代码等待了承诺

await Promise.all(splashAnim);

我将其更改为

await splashAnim;

并且它运行正常。这是一个错误，因为 Promise.all 应该只适用于多个承诺，而不是一个。

Areg
2020-06-16