Javascript同步运行多个作业（vuejs、axios）

我希望使用API获取数据，合并数据，并使用for循环执行一些操作

之后，将结果显示到屏幕上

但就我而言，由于某些UI场景，我无法在模板中使用v-if。

如何同步完成这一切

API.js

getDataNum1: () => {
    return axios.get("/api/data1");
},
getDataNum2: () => {
    return axios.get("/api/data2");
}

Test.vue

 <div v-model="mergeDataList"></div>
 
 <script>
     methods: {
          initialize() {
               let mergedList = this._mergeData();
               let convertedList = [];
               _.forEach(mergedList, function(item){
                     convertedList.push(item.name + item.value);  // need some works not-simple 
               });
               this.mergeDataList = convertedList;
          },
          _mergeData() {
               let that = this;
               API.getDataNum1().then((response)=>{that.data1 = response.data;});
               API.getDataNum2().then((response)=>{that.data2 = response.data;});
               return data1.concat(data2);
          }
     }
 </script>

方法：{
初始化（）{
让mergedList=this.\u mergeData（）；
让convertedList=[]；
_.forEach（合并列表，功能（项）{
convertedList.push（item.name+item.value）；//需要一些不简单的工作
});
this.mergeDataList=convertedList；
},
_合并数据（）{
让那=这；
然后（（response）=>{that.data1=response.data；}）；
然后（（response）=>{that.data2=response.data；}）；
返回data1.concat（data2）；
}
}

您可以使用它来简化

async _mergeData() {
  let that = this;
  let { data: data1 } = await API.getDataNum1();
  let { data: data2 } = await API.getDataNum2()
  return data1.concat(data2);
}

如果您特别想使用

承诺

，您可以使用它们并获得相同的行为

let data = []
API.getDataNum1().then(response => {
  data = data.concat(response.data);
  return API.getDataNum2();
}).then(response => {
  data = data.concat(response.data);
})

或者你可以用这种方式做事，但是如果任何一个承诺被拒绝了，那么这种方式作为一个整体被拒绝了

Promise.all([API.getDataNum1(), API.getDataNum2()]).then(values => {
  let data = [...values]
})

您还可以查看较新的API，以便更轻松地处理错误

Promise.allSettled([API.getDataNum1(), API.getDataNum1()]).then(results => {
  for (let result in results) {
    if (result.status === 'fulfilled') {
      data = data.concat(results.value)
    } else {
      console.log(`Failure reason: ${result.reason}`);
    }

  }
})

---

Promise.all

和

Promise.allsolited

在IE中不受支持，但如果您使用的是babel，则应该在此处介绍您。

由于axios调用return promises，您的Promise

。然后
方法。。。或者使用异步/等待-尽管。。。没有什么东西可以使它同步，因为如果不打破时间和空间法则，就无法将异步代码转换为同步代码