undefinedfix
Sign in

How does aixos loop a single data request in Vue?

Tousif edited in Mon, 22 Aug 2022

Problem description

Vue project, the background returns the image name to a data interface, and then I request to download the image interface according to the image name. The request is that only one image can be requested at a time, and the request returns the image Base64 format.

The background of the problem and what methods have you tried

If it's a batch download, it's easy to operate, but I need more than one picture, but I can only request one at a time. I thought about the for loop, which pushes the requested Base64 string into the array, but Axios seems to be asynchronous, and I feel that this kind of writing is a bit wrong.

Related codes

//Please paste the code text below (do not use pictures instead of codes) data

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

Request method

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);
          });
      }
    },

Single request back to image Base64

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

What are your expectations? What is the actual error message?

How to solve the synchronization request, or a better way?

5 Replies
StrongEaster
commented on Tue, 23 Aug 2022

It's easy to do with 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)
    })
zkuir
commented on Tue, 23 Aug 2022

Promise.all Find out

Sourcerer
commented on Tue, 23 Aug 2022

Promise . I can't meet your needs

This should be OK

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"
      });
    }
  }
},
Peritia
commented on Tue, 23 Aug 2022

Update: Oh, I see. It should be a matter of order. Then I think the async / await upstairs should be OK

Vegetable chicken, I feel like.. No problem.. This is where it should be written:

if (res.status == 200) {
    this.imgs.push(res.data.code);
}
freeeflyer
commented on Tue, 23 Aug 2022

Promise.all It shouldn't be appropriate, in order Promise.then More appropriate