Uncaught (in promise) TypeError: undefined is not a function (Vue.js, Electron)答案

【问题标题】：Uncaught (in promise) TypeError: undefined is not a function (Vue.js, Electron)Uncaught (in promise) TypeError: undefined is not a function (Vue.js, Electron)
【发布时间】：2020-10-06 00:02:41
【问题描述】：

我正在尝试使用带有一些承诺函数的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。

【问题讨论】：

从你的代码中不清楚this.$anime是什么，我在你的对象中看不到这样的键，所以它是undefined
@DmitryReutov 它工作正常，它是一个附加到每个 vue 实例的anime.js 原型
这里有 90% 的问题不值得留下。别担心

标签： javascript node.js vue.js promise electron

【解决方案1】：

几点：

Promise.all() 接受数组。 splashAnim 似乎不是数组。（已经承认）
如果splashAnim 是Promise（甚至只是一个thenable），那么只需return splashAnim;。
如果您正在处理 Promise，您可以（并且可以说应该）避免那些繁琐的 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 获知整个动画过程的完成。

【讨论】：

@Areg，您是否有证据表明内部动画中不需要.finished？我包含它的理由是，为了完全通知调用者两个动画的完成，需要返回一个 Promise，并且似乎需要 .finished 才能返回 Promise。因此，.finished 的两个出现都是必需的，或者两者都不是必需的。它是哪一个？如果我什么也没听到，我就回滚。
对 - it's an electon thing，并且由于上述原因是必需的.....回滚。
我在没有最后一个 .finished 的情况下尝试了这段代码，它工作正常
@Areg，它本身可以正常工作，但如果没有调用者中的内部.finished、mounted().then(...)，将无法识别第二个动画。即使您不建议链接.then()，也应该包含内部.finished。

【解决方案2】：

原来问题出在等待承诺的这一行

await Promise.all(splashAnim);

我改成

await splashAnim;

而且效果很好。这是一个错误，因为 Promise.all 应该只适用于多个 Promise 而不是一个。

【讨论】：

这是我的第一个想法，但后来我虽然完成了可以返回几个完成的承诺