Javascript 如何通过同时执行两个异步函数在收到响应值后执行函数

在同时执行asynchronous1和asynchronous2之后，我希望在接收到这两个响应值后执行LastFunction。

您可以得到如下结果：

export default {
  data: () =>({
    data1: [],
    data2: [],
    lastData: []
  }),
  mounted() {
    asynchronous1(val, (data)=>{
      return this.data1 = data
    })
    asynchronous2(val, (data)=>{
      return this.data2 = data
    })
    function lastFuction() {
      this.lastData = this.data1.concat(this.data2)
    }
  },
}

---

假设asynchronous1和asynchronous2不返回承诺-这很可能是因为它们使用回调函数

你可以这样做（凌乱）

但它会起作用的

更好的解决方案是使用异步/等待和承诺

export default {
  data: () =>({
    data1: [],
    data2: [],
    lastData: []
  }),
  mounted() {
    let lastFunction = (() => {
      let count = 0;
      return () => {
        count++;
        if (count === 2) {
          this.lastData = this.data1.concat(this.data2);
        }
      };
    })();
    asynchronous1(val, (data) => {
        this.data1 = data;
        lastFunction();
    })
    asynchronous2(val, (data) => {
        this.data2 = data;
        lastFunction();
    })
  },
}

我可能会这么说：

export default {
  data: () =>({
    data1: [],
    data2: [],
    lastData: []
  }),
  async mounted() {
    const p1 = new Promise(resolve => {
        asynchronous1(val, (data) => {
            this.data1 = data;
            resolve();
        })
    });
    const p2 = new Promise(resolve => {
        asynchronous2(val, (data) => {
            this.data2 = data;
            resolve();
        })
    });
    await Promise.all([p1, p2]);
    this.lastData = this.data1.concat(this.data2);
  },
}

这里的区别是，在两个异步函数完成之前，this.data1/this.data2不会被填充-这可能不符合您的喜好

你可以

export default {
  data: () =>({
    data1: [],
    data2: [],
    lastData: []
  }),
  async mounted() {
    const promisify = fn => (...args) => new Promise(resolve => fn(...args, resolve));
    
    const p1 = promisify(asynchronous1);
    const p2 = promisify(asynchronous2);
    const [r1, r2] = await Promise.all([p1(val), p2(val)]);
    this.data1 = r1;
    this.data2 = r2;
    this.lastData = [...r1, ...r2];
  },
}

而不是

        const [r1, r2] = await Promise.all([
            p1(val).then(r => this.data1 = r), 
            p2(val).then(r => this.data2 = r)
        ]);

    const [r1, r2] = await Promise.all([asynchronous1(val), asynchronous2(val)]);

这将使它以与原始代码相同的方式填充-我只是讨厌使用async/await和。然后。。。但在某些情况下，它比纯异步/等待更好——在我看来

当然，如果asynchronous1/2可以在不指定回调函数的情况下返回承诺（现在越来越普遍），那么代码可能会更简单

i、 e

而不是

        const [r1, r2] = await Promise.all([
            p1(val).then(r => this.data1 = r), 
            p2(val).then(r => this.data2 = r)
        ]);

    const [r1, r2] = await Promise.all([asynchronous1(val), asynchronous2(val)]);

---

您不能同时执行两个函数。@Pointy-抱歉，这意味着asynchronous2在返回Asynchronous1之前执行，前提是

asynchronous

返回一个承诺

lastFunction

将永远不会执行，因为您返回的是firstoops，忘记清理了-根本不需要返回：p@Dan谢谢你的提醒你通常写的比这更好的答案。更好的方法是将两个异步函数包装在一个承诺中。@danh-开始：pThanks@Dan-这就是湿代码的问题（即非干代码）

    const p1 = promisify(asynchronous1);
    const p2 = promisify(asynchronous2);
    const [r1, r2] = await Promise.all([p1(val), p2(val)]);