就比如这组校验,你会发现他是异步执行的。

当有一组数据需要循环完成以上校验,只要有一张不合格,直接打回,并作出提示,比如这样

this._.forEach(files,(item, index) => {
    //你的校验规则
    //拿到校验结果后的操作
    //结束循环

你会发现,解决这个业务需求,需要循环等待

比如这样,把如下代码复制到浏览器控制台

async function dome() {
    console.log('我着急')
    await delay(3000)
    console.log('我也是')
    function delay(num) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                console.log('你等我一秒')
                resolve()
            }, num)
    for (let index = 0; index < 100; index++) {
        console.log(index)
        await delay(1000)

你发现了什么?

循环变慢了,那么我们是否可以改造成这样

async function a(){
        for(let index=0;index>files.length;index++){
                try {
                let check=await imgarr(files[index])
                } catch(e) {
                  //在这里处理错误回调
                   console.log(e);
                //拿到返回值check后处理你的逻辑
                 //xxxxxxx
                //xxxxxxx
                //结束当前循环
    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('图片格式需要为jpg/jpeg/png格式')
          } else if (item.size / 1024 / 1024 > 3) {
            reject('图片大小需要小于3M')
          } else if (img.width / img.height !== 1) {
            reject('图片需要为长宽相等的绝对正方形')
          } else if ((img.width < 500 || img.width > 5000) || (img.height < 500 || img.height > 5000)) {
            reject('图片尺寸(最小500*500,最大5000*5000)')
          } else {
            resolve(item)

实现确认功能

业务问题解决,能否用在其业务中,使用循环等待操作?这里肯定又朋友要说了,为什么不使用Promise.all,他也可以异步处理所有校验?

因为我这里是用图片验证来做的演示,方便大家理解,假如一组100个数据需要耗费资源来异步处理,只要一个失败全部失败,假如第二个就失败了,使用Promise.all就会浪费98个异步资源。这里又有人要说了,我可以把100个拆成10组分批依次校验就可以避免资源浪费,那么是不是要循环?

那么为什么我不用forEach,forin,map来做循环等待,这是为什么?

欢迎在评论区回复

觉得写得不错的话,请用你们发财的小手点个赞叭!

分类:
前端