promise大厂面试

分享几道大厂面试题

1.使用Promise实现每隔1秒输出打印1，2，3

这道题比较简单的一种做法是可以用Promise配合着reduce不停的在promise后面叠加.then，请看下面的代码

const arr=[1,2,3]

arr.reduce((p, x) => p.then(() =>new Promise(r => setTimeout(() => r(console.log(x)), 1000))), Promise.resolve())

2. 使用Promise实现红绿灯交替重复亮

红灯3秒亮一次，黄灯2秒亮一次，绿灯1秒亮一次；如何让三个灯不断交替重复亮灯？（用Promise实现）三个亮灯函数已经存在

function red() {
    console.log('red');
}
function green() {
    console.log('green');
}
function yellow() {
    console.log('yellow');
}

function red() {
  console.log("red");
}
function green() {
  console.log("green");
}
function yellow() {
  console.log("yellow");
}
const light = function (timer, cb) {
  return new Promise(resolve => {
    setTimeout(() => {
      cb()
      resolve()
    }, timer)
  })
}
const step = function () {
  Promise.resolve().then(() => {
    return light(3000, red)
  }).then(() => {
    return light(2000, green)
  }).then(() => {
    return light(1000, yellow)
  }).then(() => {
    return step()
  })
}

step();

3. 实现mergePromise函数

实现mergePromise函数，把传进去的数组按顺序先后执行，并且把返回的数据先后放到数组data中。

const time = (timer) => {
  returnnewPromise(resolve => {
    setTimeout(() => {
      resolve()
    }, timer)
  })
}
const ajax1 = () => time(2000).then(() => {
  console.log(1);
  return1
})
const ajax2 = () => time(1000).then(() => {
  console.log(2);
  return2
})
const ajax3 = () => time(1000).then(() => {
  console.log(3);
  return3
})

function mergePromise () {
  // 在这里写代码
}

mergePromise([ajax1, ajax2, ajax3]).then(data => {
  console.log("done");
  console.log(data); // data 为 [1, 2, 3]
});

// 要求分别输出
// 1
// 2
// 3
// done
// [1, 2, 3]

这道题有点类似于Promise.all()，不过.all()不需要管执行顺序，只需要并发执行就行了。但是这里需要等上一个执行完毕之后才能执行下一个。

解题思路：

• 定义一个数组data用于保存所有异步操作的结果
• 初始化一个const promise = Promise.resolve()，然后循环遍历数组，在promise后面添加执行ajax任务，同时要将添加的结果重新赋值到promise上。

答案：

function mergePromise (ajaxArray) {
  // 存放每个ajax的结果
  const data = [];
  let promise = Promise.resolve();
  ajaxArray.forEach(ajax => {
  	// 第一次的then为了用来调用ajax
  	// 第二次的then是为了获取ajax的结果
    promise = promise.then(ajax).then(res => {
      data.push(res);
      return data; // 把每次的结果返回
    })
  })
  // 最后得到的promise它的值就是data
  return promise;
}

const time = (timer) =>
  new Promise((resolve, reject) => {
    setTimeout((_) => {
      resolve();
    }, timer);
  });

const a1 = () =>
  time(2000).then(() => {
    console.log("[ 1 ]", 1);
    return 1;
  });
const a2 = () =>
  time(1000).then(() => {
    console.log("[ 2 ]", 2);
    return 2;
  });
const a3 = () =>
  time(20).then(() => {
    console.log("[ 3 ]", 3);
    return 3;
  });

const mergePromise = (arr) => {
  let promise = Promise.resolve(),
    data = [];
  arr.forEach((a) => {
    promise = promise.then(a).then((d) => {
      data.push(d);
      return data;
    });
  });
  return promise;
};

mergePromise([a1, a2, a3]).then((data) => {
  console.log("[ done ]", "done");
  console.log('[ data ]', data)
});

4 封装一个异步加载图片的方法

这个相对简单一些，只需要在图片的onload函数中，使用resolve返回一下就可以了。

来看看具体代码：

function loadImg(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = function() {
      console.log("一张图片加载完成");
      resolve(img);
    };
    img.onerror = function() {
    	reject(newError('Could not load image at' + url));
    };
    img.src = url;
  });

5 限制异步操作的并发个数并尽可能快的完成全部

有8个图片资源的url，已经存储在数组urls中。

urls`类似于`['https://image1.png', 'https://image2.png', ....]

而且已经有一个函数function loadImg，输入一个url链接，返回一个Promise，该Promise在图片下载完成的时候resolve，下载失败则reject。

但有一个要求，任何时刻同时下载的链接数量不可以超过3个。

请写一段代码实现这个需求，要求尽可能快速地将所有图片下载完成。

var urls = [
  "https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/AboutMe-painting1.png",
  "https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/AboutMe-painting2.png",
  "https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/AboutMe-painting3.png",
  "https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/AboutMe-painting4.png",
  "https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/AboutMe-painting5.png",
  "https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/bpmn6.png",
  "https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/bpmn7.png",
  "https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/bpmn8.png",
];
function loadImg(url) {
  returnnewPromise((resolve, reject) => {
    const img = new Image();
    img.onload = function() {
      console.log("一张图片加载完成");
      resolve(img);
    };
    img.onerror = function() {
    	reject(newError('Could not load image at' + url));
    };
    img.src = url;
  });

看到这道题时，我最开始的想法是：

• 拿到urls，然后将这个数组每3个url一组创建成一个二维数组
• 然后用Promise.all()每次加载一组url（也就是并发3个），这一组加载完再加载下一组。

这个想法从技术上说并不难实现，有点类似于第三题。不过缺点也明显，那就是每次都要等到上一组全部加载完之后，才加载下一组，那如果上一组有2个已经加载完了，还有1个特别慢，还在加载，要等这个慢的也加载完才能进入下一组。这明显会照常卡顿，影响加载效率。

但是开始没有考虑这么多，因此有了第一个版本。

如果你有兴趣可以看看想法一的代码，虽然对你没什么帮助，想直接知道比较好的做法的小伙伴请跳到想法二

function limitLoad (urls, handler, limit) {
  const data = []; // 存储所有的加载结果
  let p = Promise.resolve();
  const handleUrls = (urls) => { // 这个函数是为了生成3个url为一组的二维数组
    const doubleDim = [];
    const len = Math.ceil(urls.length / limit); // Math.ceil(8 / 3) = 3
    console.log(len) // 3, 表示二维数组的长度为3
    for (let i = 0; i < len; i++) {
      doubleDim.push(urls.slice(i * limit, (i + 1) * limit))
    }
    return doubleDim;
  }
  const ajaxImage = (urlCollect) => { // 将一组字符串url 转换为一个加载图片的数组
    console.log(urlCollect)
    return urlCollect.map(url => handler(url))
  }
  const doubleDim = handleUrls(urls); // 得到3个url为一组的二维数组
  doubleDim.forEach(urlCollect => {
    p = p.then(() =>Promise.all(ajaxImage(urlCollect))).then(res => {
      data.push(...res); // 将每次的结果展开，并存储到data中 (res为：[img, img, img])
      return data;
    })
  })
  return p;
}
limitLoad(urls, loadImg, 3).then(res => {
  console.log(res); // 最终得到的是长度为8的img数组: [img, img, img, ...]
  res.forEach(img => {
    document.body.appendChild(img);
  })
});

参考LHH大翰仔仔-Promise面试题

既然题目的要求是保证每次并发请求的数量为3，那么我们可以先请求urls中的前面三个(下标为0,1,2)，并且请求的时候使用Promise.race()来同时请求，三个中有一个先完成了(例如下标为1的图片)，我们就把这个当前数组中已经完成的那一项(第1项)换成还没有请求的那一项(urls中下标为3)。

直到urls已经遍历完了，然后将最后三个没有完成的请求(也就是状态没有改变的Promise)用Promise.all()来加载它们。

不多说，流程图都给你画好了，你可以结合流程图再来看代码。

为了方便你查看，我截了个图，不过代码在后面也有

(说真的，要我看这一大长串代码我也不愿意…)

代码：

function limitLoad(urls, handler, limit) {
  let sequence = [].concat(urls); // 复制urls
  // 这一步是为了初始化 promises 这个"容器"
  let promises = sequence.splice(0, limit).map((url, index) => {
    return handler(url).then(() => {
      // 返回下标是为了知道数组中是哪一项最先完成
      return index;
    });
  });
  // 注意这里要将整个变量过程返回，这样得到的就是一个Promise，可以在外面链式调用
  return sequence
    .reduce((pCollect, url) => {
      return pCollect
        .then(() => {
          returnPromise.race(promises); // 返回已经完成的下标
        })
        .then(fastestIndex => { // 获取到已经完成的下标
        	// 将"容器"内已经完成的那一项替换
          promises[fastestIndex] = handler(url).then(
            () => {
              return fastestIndex; // 要继续将这个下标返回，以便下一次变量
            }
          );
        })
        .catch(err => {
          console.error(err);
        });
    }, Promise.resolve()) // 初始化传入
    .then(() => { // 最后三个用.all来调用
      returnPromise.all(promises);
    });
}
limitLoad(urls, loadImg, 3)
  .then(res => {
    console.log("图片全部加载完毕");
    console.log(res);
  })
  .catch(err => {
    console.error(err);
  });

const timer = (timer) =>
  new Promise((resolve, reject) => {
    setTimeout((_) => {
      resolve(timer);
    }, timer);
  });

const a1 = () =>
  time(2000).then(() => {
    console.log("[ 1 ]", 1);
    return 1;
  });
const a2 = () =>
  time(1000).then(() => {
    console.log("[ 2 ]", 2);
    return 2;
  });
const a3 = () =>
  time(20).then(() => {
    console.log("[ 3 ]", 3);
    return 3;
  });

const mergePromise = (arr) => {
  let promise = Promise.resolve(),
    data = [];
  arr.forEach((a) => {
    promise = promise.then(a).then((d) => {
      data.push(d);
      return data;
    });
  });
  return promise;
};
// console.log(mergePromise([a1, a2, a3]))
// mergePromise([a1, a2, a3]).then((data) => {
//   console.log("[ done ]", "done");
//   console.log('[ data ]', data)
// });


// Promise.all([a1(), a2(), a3()]).then((a,b,c)=>{
//     console.log("[ done ]", "done");
//     console.log('[ data ]', a,b,c)
// })


const tasks = [
  () => {
    return timer(30)
  },
  () => {
    return timer(70)
  },
  () => {
    return timer(100)
  },
  () => {
    return timer(40)
  },
  () => {
    return timer(90)
  },
  () => {
    return timer(120)
  },
]


function createRequest(tasks, pool) {
  pool = pool || 5
  let results = [], together = new Array(pool).fill(null)
  index = 0;
  together = together.map(() => {
    return new Promise((resolve, reject) => {
      const run = function run() {
        if (index >= tasks.length) {
          resolve();
          return
        }
        let old_index = index,
          task = tasks[index++];
        console.log(task)
        task().then(result => {
          results[old_index] = result;
          run()
        }).catch(reason => {
          reject(reason)
        })
      }
      run()
    })
  })
  return Promise.all(together).then(() => results)
}


createRequest(tasks,2).then((res) => {
  console.log(res, '00000')
})