promise 面试题（编程题）

原创

已于 2023-11-08 13:47:33 修改 · 172 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

于 2023-10-26 22:25:34 首次发布

本文探讨了如何使用Promise封装异步加载图片的方法，实现顺序执行的mergePromise函数，以及解决红绿黄灯交替亮灯问题。此外，还讨论了如何创建串行Queue类，限制并发下载图片的数量，转换error-first-callback函数为返回Promise的函数，以及实现限流调度器和带有取消功能的Promise。这些问题都展示了Promise在处理异步操作和控制流程中的关键作用。

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

function loadImage (url) {
    return new Promise((resolve, reject) => {
        let image = new Image();
        image.onload = () => {
            resolve(image);
        }
        image.onerror = () => {
            reject(new Error('图片加载失败,url:' + url))
        }
        image.src= url;
    })
}

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

const timeout = ms => new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve();
    }, ms);
});
 
const ajax1 = () => timeout(2000).then(() => {
    console.log('1');
    return 1;
});
 
const ajax2 = () => timeout(1000).then(() => {
    console.log('2');
    return 2;
});
 
const ajax3 = () => timeout(2000).then(() => {
    console.log('3');
    return 3;
});
mergePromise([ajax1, ajax2, ajax3]).then(data => {
    console.log('done');
    console.log(data); // data 为 [1, 2, 3]
});

const mergePromise = ajaxArray => {
    // 在这里实现你的代码
};

解答：
顺序执行意味着链式调用，输出结果为收集结果的数组（使用promise，用data收集，结果resolve）

const mergePromise = ajaxArray => {
    // 在这里实现你的代码
    let promises = Promise.resolve()
    let data = []
    ajaxArray.forEach(p => {
        promises = promises.then(p).then((res) => {
            data.push(res)
            return data
        })
    });
    return promises
};

写一个函数实现arr的串行调用，让arr依次输出run1/run2/run3。必须按照arr的顺序执行，需要用Promise的状态去实现先后顺序（resolve或者reject函数执行状态改变后才能执行下一个）。

let arr = [()=>{
  return new Promise(res=>{
      console.log("run1", Date.now());
      res()
  })
},()=>{
  return new Promise(res=>{
      console.log("run2", Date.now());
      res()
  })
},()=>{
  return new Promise(res=>{
      console.log("run3", Date.now());
      res()
  })
}];

解答：

// 1.
async function p(arr){
    for(let v of arr){
        await v();
    }
}
//2.
function p(arr){
    let res = Promise.resolve();
    arr.forEach( v =>