The first sentence of the text – “this article has participated in the good article calling order activities, click to see: back end, big front end of the double track submission, 20,000 yuan prize pool for you to challenge!”

Wait for asynchronous results within the loop

preface

When we are developing business requirements, there is often a situation where users upload a group of pictures in a batch, and we need to independently verify and upload this group of pictures.

In the case of this set of checks, you can see that they are executed asynchronously.

When there is a set of data to complete the above verification cycle, as long as there is a piece of unqualified, directly back, and make a hint, such as this

this._.forEach(files,(item, index) = > {
    // Your validation rules

    // The operation after the verification result is obtained

    // Close the loop
  })
Copy the code

You will find that solving this business requirement requires a waiting cycle

For example, copy the following code to the browser console

async function dome() {
    console.log('I'm in a hurry')
    await delay(3000)
    console.log('Me too')
    function delay(num) {
        return new Promise((resolve, reject) = > {
            setTimeout(() = > {
                console.log('Give me a second.')
                resolve()
            }, num)
        })
    };
    for (let index = 0; index < 100; index++) {
        console.log(index)
        await delay(1000)}}Copy the code

What did you find?

The loop is slowing down, so can we make it this way

async function a(){
        for(let index=0; index>files.length; index++){try {
                let check=await imgarr(files[index])
                } catch(e) {
                  // This is where the error callback is handled
                   console.log(e);
                }
                // Get the return value check and process your logic
                 //xxxxxxx
                //xxxxxxx
                // End the current loop

            }
  }
    a()
    
    function imgarr(item) {
      return new Promise((resolve, reject) = > {
        const myimg = URL.createObjectURL(item)
        const img = new Image()
        img.src = myimg
        img.onload = function() {
          if(! ['jpg'.'jpeg'.'png'].includes(item.type.split('/') [1])) {
            reject('Image format needs to be JPG/JPEG/PNG')}else if (item.size / 1024 / 1024 > 3) {
            reject('Image size needs to be less than 3M')}else if(img.width / img.height ! = =1) {
            reject('The picture needs to be an absolute square with equal length and width.')}else if ((img.width < 500 || img.width > 5000) || (img.height < 500 || img.height > 5000)) {
            reject(Image size (min. 500*500, Max. 5000*5000))}else {
            resolve(item)
          }
        }
      })
    }

Copy the code

Implement validation function

Business problem solving, can it be used in its business, using circular wait operations?

So why don’t I use forEach,forin,map to loop and wait, why is that?

Feel free to reply in the comments section

Feel to write good words, please use your rich hands dot praise!