vue中aixos如何循环单条数据请求？

Question

问题描述

Vue项目，后台给一个数据接口返回图片名称，然后我根据这个图片名称，请求下载图片接口，请求的要求是一次只能请求一个图片，请求返回图片base64格式。

问题出现的环境背景及自己尝试过哪些方法

如果是批量下载还好操作，但是我需要的图片有多张，但是一次只能请求一次，我想过是for循环，把请求过来的base64字符串push到数组中，但是axios好像是异步的，而且我感觉这种写有点不对。

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
data数据

 data() {
    return {
    imgs:[],
    imglist: ["0522ION3.jpeg", "0522BJD7.jpg"].//请求图片路径
    };
  },

请求方法

downImg() {
      
      for (let item of this.imglist) {
        const fd = new FormData();
        fd.append("path", item);
        downloadBase64(fd)
          .then(res => {
            if (res.status == 200) {
              let imglist = [];
              imglist.push(res.data.code);
               this.imgs =  imglist;
               console.log(imglist);
            
            } else {
              this.$message({
                message: res.content,
                type: "warning"
              });
            }
          })
          .catch(res => {
            console.log(res);
          });
      }
    },

单个请求后台返图片base64码

{
    "status": 200,
    "code": "",
    "msg": "操作成功！",
    "remark": "",
    "data": {
        "code": "/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgMCAgMDAwMEAw....
  }

你期待的结果是什么？实际看到的错误信息又是什么？

如何解决同步请求,或者更好的方法？

Answer 1

用async/await很容易搞

const request = (n) => new Promise(resolve => setTimeout(() => resolve(n), 1000))

const task = [1, 2, 3, 4]

async function walk(list) {
  const results = []
  while (list.length) {
    let res = await request(list.shift())
    console.log('request success! response is ', res)
    results.push(res)
  }

  return results
}

walk(task)
    .then(res => {
      console.log(res)
    })
    .catch(err => {
      console.log(err)
    })

Answer 2

Promise.all了解一下

Answer 3

Promise.all满足不了你的需求

这样写应该可以

async downImg() {
  for (let item of this.imglist) {
    const fd = new FormData();
    fd.append("path", item);
    const res = await downloadBase64(fd)
    if (res.status == 200) {
      let imglist = [];
      imglist.push(res.data.code);
      this.imgs =  imglist;
      console.log(imglist);
    } else {
      this.$message({
        message: res.content,
        type: "warning"
      });
    }
  }
},

Answer 4

更新：噢，我知道了，应该是顺序的问题，那么我觉得楼上的async/await应该可以

菜鸡我觉得好像。。没毛病啊。。就是这里是不是该这么写：

if (res.status == 200) {
    this.imgs.push(res.data.code);
}

Answer 5

Promise.all应该不太合适，按顺序的话Promise.then更合适