Question

我正在尝试执行3个函数，然后在console.log之后更改它们的值。我认为应该针对此类问题采用更好的方法，但是我不确定这是什么。我所做的是我上了旧学校，并添加了加载标志。基本上，loading = 3在加载函数时，loading--

我想演示我当前的代码（实际上是不一样的，但是可以用于演示目的），所以您可以得到这样的感觉：

data:() => ({
  loading: 3,
  first: null,
  second: null,
  third: null
}),

methods: {
  first() {
    this.$route.get('/data/for/first').then(response => {
      this.first = response.data;
      this.loading--;
    })
  },
  second() {
    this.$route.get('/data/for/second').then(response => {
     this.second = response.data;
     this.loading--;
    })
  },
  third() {
    this.$route.get('/data/for/third/a').then(responseA => {
      let thirdA = responseA.data;
      this.$route.get('/data/for/third/b').then(responseB => {
        let thirdB = responseB.data;

        if (thirdA === thirdB) {
          this.third = true;
        }

        this.loading--;
      })
    })
  },
  fireFunctions() {
    this.first();
    this.second();
    this.third();
  }
},

watch: {
  loading: function() {
      if (this.loading === 0) {
          console.log(this.first, this.second, this.third)
      }
   }
}

输出看起来像这样：

dataForFirst, dataForSecond, dataForThird;

但是，如果我不使用观察程序，并在mount（）中加载this.fireFunctions（），则会得到：

dataForFirst, dataForSecond, undefined;

据我所知，这正在发生，因为this.third（）需要更多时间来处理数据。如您在代码中所见，我添加了加载标志。因此，只有在所有功能都加载后才能执行触发功能。我认为这不是最好的方法，所以我想听听您对此的看法。

您将如何处理？

Answer 1

使用Promise.all等待所有异步函数返回，然后运行之后需要执行的任何代码，例如：

#!/usr/bin/env bash
set -eu

if tty &>/dev/null && [ "$#" -eq 0 ]; then
  echo "USAGE: $0 plugin1 plugin2 ..."
  exit 1
fi

if tty &>/dev/null; then
  plugins=("$@")
else
  mapfile -t plugins
fi

for plugin in "${plugins[@]}"; do
  echo install_plugin "$plugin"
done

如何确保该功能在VueJS中执行

1 个答案: