Promise顺序打印#Vue3#for循环中调用接口顺序输出

Alexeigirl

已于 2024-06-19 16:21:12 修改

阅读量244

点赞数 3

文章标签： javascript vue.js 前端

于 2024-06-19 16:16:15 首次发布

本文链接：https://blog.csdn.net/weixin_45356258/article/details/139806401

版权

Promise顺序打印#Vue3#for循环中调用接口顺序输出

按照文件id来顺序打印出图片路径

  <!-- <el-scrollbar max-height="500"> -->
  <div v-for="(item, index) in testArr" style="float: left">
    <span>{{ index + 1 }}</span>
    <img style="width: 30px; height: 30px; margin: 2px" :src="item" />
  </div>
  <!-- </el-scrollbar> -->

// 文件id
const demoArr = ref([
  "1800773345021661184",
  "1800773345042632704",
  "1800773305817501696",
  "1800773305838473216",
  "1800773261265604608",
  "1800773261303353344",
  "1800773211810566144",
  "1800773211835731968",
  "1800773211898646528",
  "1800773992588644352",
  "1800773992680919040",
  "1800773896891404288",
  "1800773931767042048",
  "1800774035123081216",
  "1800773852633108480",
  "1800773810690068480",
  "1800773810706845696",
  "1800773724224491520",
  "1800773724249657344",
  "1800773671422398464",
  "1800773434611994624",
  "1800773386822094848",
  "1800773387086336000",
  "1800773387145056256",
  "1799347203286896640",
]);

// 下载文件
const getAxios = (val: any) => {
  return new Promise(function (resolve, reject) {
    DownFile({ id: val }).then((blob: any) => {
      const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
      resolve(imageUrl);
    });
  });
};
let data1 = [];
let testArr = [] as any;
for (let i = 0; i < demoArr.value.length; i++) {
  let result = getAxios(demoArr.value[i]);
  data1.push(result);
}
Promise.all(data1).then((itemList: any) => {
  console.log("itemList", itemList);
  testArr = itemList.concat();
  console.log("testArr", testArr);
});