Promise 实战 #52

ChelesteWang · 2022-04-05T02:28:23Z

编程题一

红灯3秒亮一次，绿灯1秒亮一次，黄灯2秒亮一次；如何使用Promise让三个灯不断交替重复亮灯？（海康威视笔试题）

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

分析：
先看题目，题目要求红灯亮过后，绿灯才能亮，绿灯亮过后，黄灯才能亮，黄灯亮过后，红灯才能亮……所以怎么通过Promise实现？

换句话说，就是红灯亮起时，承诺2s秒后亮绿灯，绿灯亮起时承诺1s后亮黄灯，黄灯亮起时，承诺3s后亮红灯……这显然是一个Promise链式调用，看到这里你心里或许就有思路了，我们需要将我们的每一个亮灯动作写在then()方法中，同时返回一个新的Promise，并将其状态由pending设置为fulfilled，允许下一盏灯亮起。

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

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

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


let myLight = (timer, cb) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      cb();
      resolve();
    }, timer);
  });
};


let myStep = () => {
  Promise.resolve().then(() => {
    return myLight(3000, red);
  }).then(() => {
    return myLight(2000, green);
  }).then(()=>{
    return myLight(1000, yellow);
  }).then(()=>{
    myStep();
  })
};
myStep();

// output:
// => red
// => green
// => yellow
// => red
// => green
// => yellow
// => red

编程题二

请实现一个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;
});

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

};

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

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

分析：
这道题主要考察用Promise控制异步流程，首先ajax1，ajax2，ajax3都是函数，只是这些函数执行后会返回一个Promise，按照题目要求只要顺序执行这三个函数就好了，然后把结果放到data中;

答案：

const mergePromise = ajaxArray => {
  // 在这里实现你的代码
  // 保存数组中的函数执行后的结果
  var data = [];

  // Promise.resolve方法调用时不带参数，直接返回一个resolved状态的 Promise 对象。
  var sequence = Promise.resolve();

  ajaxArray.forEach(item => {
    // 第一次的 then 方法用来执行数组中的每个函数，
    // 第二次的 then 方法接受数组中的函数执行后返回的结果，
    // 并把结果添加到 data 中，然后把 data 返回。
    sequence = sequence.then(item).then(res => {
      data.push(res);
      return data;
    });
  });

// 遍历结束后，返回一个 Promise，也就是 sequence， 他的 [[PromiseValue]] 值就是 data，
// 而 data（保存数组中的函数执行后的结果） 也会作为参数，传入下次调用的 then 方法中。
  return sequence;
};

编程题三

现有8个图片资源的url，已经存储在数组urls中，且已有一个函数function loading，输入一个url链接，返回一个Promise，该Promise在图片下载完成的时候resolve，下载失败则reject。要求：任何时刻同时下载的链接数量不可以超过3个。
请写一段代码实现这个需求，要求尽可能快速地将所有图片下载完成。

var urls = ['https://www.kkkk1000.com/images/getImgData/getImgDatadata.jpg', 'https://www.kkkk1000.com/images/getImgData/gray.gif', 'https://www.kkkk1000.com/images/getImgData/Particle.gif', 'https://www.kkkk1000.com/images/getImgData/arithmetic.png', 'https://www.kkkk1000.com/images/getImgData/arithmetic2.gif', 'https://www.kkkk1000.com/images/getImgData/getImgDataError.jpg', 'https://www.kkkk1000.com/images/getImgData/arithmetic.gif', 'https://www.kkkk1000.com/images/wxQrCode2.png'];

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

解析
题目的意思是需要先并发请求3张图片，当一张图片加载完成后，又会继续发起一张图片的请求，让并发数保持在3个，直到需要加载的图片都全部发起请求。

用Promise来实现就是，先并发请求3个图片资源，这样可以得到3个Promise，组成一个数组promises，然后不断调用Promise.race来返回最快改变状态的Promise，然后从数组promises中删掉这个Promise对象，再加入一个新的Promise，直到全部的url被取完，最后再使用Promise.all来处理一遍数组promises中没有改变状态的Promise

function limitLoad(urls, handler, limit) {
  // 对数组做一个拷贝
    const sequence = […urls];

  let promises = [];

  //并发请求到最大数
  promises = sequence.splice(0, limit).map((url, index) => {
    // 这里返回的 index 是任务在 promises 的脚标，用于在 Promise.race 之后找到完成的任务脚标
    return handler(url).then(() => {
      return index;
    });
  });

  // 利用数组的 reduce 方法来以队列的形式执行
  return sequence.reduce((last, url, currentIndex) => {
    return last.then(() => {
      // 返回最快改变状态的 Promise
      return Promise.race(promises)
    }).catch(err => {
      // 这里的 catch 不仅用来捕获前面 then 方法抛出的错误
      // 更重要的是防止中断整个链式调用
      console.error(err)
    }).then((res) => {
      // 用新的 Promise 替换掉最快改变状态的 Promise
      promises[res] = handler(sequence[currentIndex]).then(() => {
        return res
      });
    })
  }, Promise.resolve()).then(() => {
    return Promise.all(promises)
  })

}

limitLoad(urls, loadImg, 3);

/*因为 limitLoad 函数也返回一个 Promise，所以当 所有图片加载完成后，可以继续链式调用limitLoad(urls, loadImg, 3).then(() => {    console.log('所有图片加载完成');}).catch(err => {    console.error(err);})*/

编程题四

封装一个异步加载图片的方法
解析：
这个不难！

function loadImageAsync(url) {
    return new Promise(function(resolve,reject) {
        var image = new Image();
        image.onload = function() {
            resolve(image) 
        };
        image.onerror = function() {
            reject(new Error('Could not load image at' + url));
        };
        image.src = url;
     });
}

ChelesteWang · 2022-04-05T03:17:39Z

有关Promise的几个问题

基础概念

一：什么是Promise

国内比较流行的看法：

[阮一峰: Promise 对象](http://es6.ruanyifeng.com/#docs/promise)

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。

Promise 真正的规范，一篇长文。

[Promises/A+](https://promisesaplus.com/)

截取几段：

Terminology

“promise” is an object or function with a then method whose behavior conforms to this specification.

“thenable” is an object or function that defines a then method.

“value” is any legal JavaScript value (including undefined, a thenable, or a promise).

“exception” is a value that is thrown using the throw statement.

“reason” is a value that indicates why a promise was rejected.

从问题来看

1. 是否可以使用`return` 代替 `resolve`

不可以，无法实现链式调用，且不符合规范。

示例：

const testReturn = (a:boolean):Promise<any> =>{
    return new Promise((resolve,reject)=>{
        if(a){
            return 'this is return';
            resolve('true');
            console.log('this will not be exec');
            throw new Error('error');
        }else{
            reject('false');
        }
    })
}

执行结果：

 ~/chen/FE/winSep/codes/javascript/es6promise/src  ts-node return.ts
Promise { <pending> }

无法改变状态
无法链式调用

2. 使用throw还是reject？

答案：使用reject而不是throw

示例：不会被catch的throw Error

const testReturn = (a:boolean):Promise<any> =>{
    return new Promise((resolve,reject)=>{
        if(a){
            resolve('true');
            console.log('this will be exec');
            throw new Error('error');
        }else{
            reject('false');
        }
    })
}

console.log(testReturn(true));

执行结果

 ~/chen/FE/winSep/codes/javascript/es6promise/src  ts-node return.ts
this will be exec
Promise { 'true' }

解释：

Promise的构造函数，以及被 then 调用执行的函数基本上都可以认为是在 try…catch 代码块中执行的，所以在这些代码中即使使用 throw ，程序本身也不会因为异常而终止。Promise的状态也不会发生改变。

示例：不使用reject而使用throw

如果在Promise中使用 throw 语句的话，会被 try...catch 住，最终promise对象也变为Rejected状态。

var promise = new Promise(function(resolve, reject){
    throw new Error("message");
});
promise.catch(function(error){
    console.error(error);// => "message"
});

运行

Error: message

代码像这样其实运行时倒也不会有什么问题，但是如果想把 promise 设置为Rejected状态的话，使用 reject 方法则更显得合理。

所以上面的代码可以改写为下面这样。

var promise = new Promise(function(resolve, reject){
    reject(new Error("message"));
});
promise.catch(function(error){
    console.error(error);// => "message"
})

总结：如果在Promise中使用 throw 语句的话，会被 try...catch 住，最终promise对象也变为Rejected状态。

2. Promise的执行时间

1. resolve后面的代码会不会被执行?

当没有`Error`的时候, `resolve`会将`Promise.then`放在微任务队列中，当所有的宏任务执行结束的时候，执行微任务队列。

const testReturn = (a:boolean):Promise<any> =>{
    return new Promise((resolve,reject)=>{
        if(a){
            resolve('exec true');
            console.log('this will be exec');
            // throw new Error('error');
        }else{
            reject('false');
        }
    })
}
testReturn(true).then(str=>{
    console.log(str);
})

执行结果

this will be exec
exec true

当有`Error`的时候，`Error`后面的代码不会被执行，但是`Promise`的结果依旧是`fulfilled`

const testReturn = (a:boolean):Promise<any> =>{
    return new Promise((resolve,reject)=>{
        if(a){
            resolve('exec true');
            console.log('this will be exec');
            throw new Error('error');
            console.log('this will not be exec')
        }else{
            reject('false');
        }
    })
}


testReturn(true).then(str=>{
    console.log(str);
    // console.log(testReturn)
}).catch(err=>{
    console.log('err: ',err);
})

执行结果

this will be exec
exec true

当Promise遇到setTimeout

看例子：

const testReturn = (a:boolean):Promise<any> =>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            if(a){
                resolve('exec true');
                console.log('this will be second exec');
            }else{
                reject('false');
            }
        })
        console.log('this will first be execd');
    })
}


testReturn(true).then(str=>{
    console.log(str);
    // console.log(testReturn)
}).catch(err=>{
    console.log('err: ',err);
})

结果

this will first be execd
this will be second exec
exec true

解释：

时间	宏任务队列	微任务队列
1	`console.log('this will first be execd')`
2	`setTimeout`
3		`resolve('exec true');`//延迟：因为宏任务没有执行完
4	`console.log('this will be second exec');`

最终执行顺序：

1->2->4(宏任务结束)->3(微任务结束)

async/await 与Promise

一句话总结：await等的就是一个Promise。如果等的不是Promise，那加了await和不加没区别

将常规的回调转变为Promise的方法

function util(args,callback){
    if(err){
        return callback(err);
    }else{
        return callback();
    }
}

//调用
util(args,(err)=>{
    if(err){

    }else{

    }
})
//Promisify

function utilPromise(args){
    return new Promise((resolve,reject)=>{
        if(err){
            reject(err)
        }else{
            resolve();
        }
    })
}

//调用
 utilPromise.then().catch()

将Promise转换为async/await的方法

async init(){
    try{
        await utilPromise();//resolve状态
    }catch(e){
        throw new Error(e); //reject状态
    }    
}

425824365 · 2024-07-09T00:18:09Z

编程题一

红灯3秒亮一次，绿灯1秒亮一次，黄灯2秒亮一次；如何使用Promise让三个灯不断交替重复亮灯？（海康威视笔试题）

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

分析：先看题目，题目要求红灯亮过后，绿灯才能亮，绿灯亮过后，黄灯才能亮，黄灯亮过后，红灯才能亮……所以怎么通过Promise实现？

换句话说，就是红灯亮起时，承诺2s秒后亮绿灯，绿灯亮起时承诺1s后亮黄灯，黄灯亮起时，承诺3s后亮红灯……这显然是一个Promise链式调用，看到这里你心里或许就有思路了，我们需要将我们的每一个亮灯动作写在then()方法中，同时返回一个新的Promise，并将其状态由pending设置为fulfilled，允许下一盏灯亮起。

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

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

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


let myLight = (timer, cb) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      cb();
      resolve();
    }, timer);
  });
};


let myStep = () => {
  Promise.resolve().then(() => {
    return myLight(3000, red);
  }).then(() => {
    return myLight(2000, green);
  }).then(()=>{
    return myLight(1000, yellow);
  }).then(()=>{
    myStep();
  })
};
myStep();

// output:
// => red
// => green
// => yellow
// => red
// => green
// => yellow
// => red

编程题二

请实现一个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;
});

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

};

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

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

分析：这道题主要考察用Promise控制异步流程，首先ajax1，ajax2，ajax3都是函数，只是这些函数执行后会返回一个Promise，按照题目要求只要顺序执行这三个函数就好了，然后把结果放到data中;

答案：

const mergePromise = ajaxArray => {
  // 在这里实现你的代码
  // 保存数组中的函数执行后的结果
  var data = [];

  // Promise.resolve方法调用时不带参数，直接返回一个resolved状态的 Promise 对象。
  var sequence = Promise.resolve();

  ajaxArray.forEach(item => {
    // 第一次的 then 方法用来执行数组中的每个函数，
    // 第二次的 then 方法接受数组中的函数执行后返回的结果，
    // 并把结果添加到 data 中，然后把 data 返回。
    sequence = sequence.then(item).then(res => {
      data.push(res);
      return data;
    });
  });

// 遍历结束后，返回一个 Promise，也就是 sequence， 他的 [[PromiseValue]] 值就是 data，
// 而 data（保存数组中的函数执行后的结果） 也会作为参数，传入下次调用的 then 方法中。
  return sequence;
};

编程题三

现有8个图片资源的url，已经存储在数组urls中，且已有一个函数function loading，输入一个url链接，返回一个Promise，该Promise在图片下载完成的时候resolve，下载失败则reject。要求：任何时刻同时下载的链接数量不可以超过3个。请写一段代码实现这个需求，要求尽可能快速地将所有图片下载完成。

var urls = ['https://www.kkkk1000.com/images/getImgData/getImgDatadata.jpg', 'https://www.kkkk1000.com/images/getImgData/gray.gif', 'https://www.kkkk1000.com/images/getImgData/Particle.gif', 'https://www.kkkk1000.com/images/getImgData/arithmetic.png', 'https://www.kkkk1000.com/images/getImgData/arithmetic2.gif', 'https://www.kkkk1000.com/images/getImgData/getImgDataError.jpg', 'https://www.kkkk1000.com/images/getImgData/arithmetic.gif', 'https://www.kkkk1000.com/images/wxQrCode2.png'];

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

解析题目的意思是需要先并发请求3张图片，当一张图片加载完成后，又会继续发起一张图片的请求，让并发数保持在3个，直到需要加载的图片都全部发起请求。

用Promise来实现就是，先并发请求3个图片资源，这样可以得到3个Promise，组成一个数组promises，然后不断调用Promise.race来返回最快改变状态的Promise，然后从数组promises中删掉这个Promise对象，再加入一个新的Promise，直到全部的url被取完，最后再使用Promise.all来处理一遍数组promises中没有改变状态的Promise

function limitLoad(urls, handler, limit) {
  // 对数组做一个拷贝
    const sequence = […urls];

  let promises = [];

  //并发请求到最大数
  promises = sequence.splice(0, limit).map((url, index) => {
    // 这里返回的 index 是任务在 promises 的脚标，用于在 Promise.race 之后找到完成的任务脚标
    return handler(url).then(() => {
      return index;
    });
  });

  // 利用数组的 reduce 方法来以队列的形式执行
  return sequence.reduce((last, url, currentIndex) => {
    return last.then(() => {
      // 返回最快改变状态的 Promise
      return Promise.race(promises)
    }).catch(err => {
      // 这里的 catch 不仅用来捕获前面 then 方法抛出的错误
      // 更重要的是防止中断整个链式调用
      console.error(err)
    }).then((res) => {
      // 用新的 Promise 替换掉最快改变状态的 Promise
      promises[res] = handler(sequence[currentIndex]).then(() => {
        return res
      });
    })
  }, Promise.resolve()).then(() => {
    return Promise.all(promises)
  })

}

limitLoad(urls, loadImg, 3);

/*因为 limitLoad 函数也返回一个 Promise，所以当 所有图片加载完成后，可以继续链式调用limitLoad(urls, loadImg, 3).then(() => {    console.log('所有图片加载完成');}).catch(err => {    console.error(err);})*/

编程题四

封装一个异步加载图片的方法解析：这个不难！

function loadImageAsync(url) {
    return new Promise(function(resolve,reject) {
        var image = new Image();
        image.onload = function() {
            resolve(image) 
        };
        image.onerror = function() {
            reject(new Error('Could not load image at' + url));
        };
        image.src = url;
     });
}

请教一下编程题3中，.then(() => {
return Promise.all(promises)
})这行代码的作用是？

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Promise 实战 #52

Promise 实战 #52

ChelesteWang commented Apr 5, 2022 •

edited

Loading

ChelesteWang commented Apr 5, 2022 •

edited

Loading

Terminology

425824365 commented Jul 9, 2024

编程题一

编程题二

编程题三

编程题四

Promise 实战 #52

Promise 实战 #52

Comments

ChelesteWang commented Apr 5, 2022 • edited Loading

编程题一

编程题二

编程题三

编程题四

ChelesteWang commented Apr 5, 2022 • edited Loading

有关Promise的几个问题

基础概念

一：什么是Promise

Terminology

从问题来看

1. 是否可以使用return 代替 resolve

2. 使用throw还是reject？

示例：不会被catch的throw Error

示例：不使用reject而使用throw

2. Promise的执行时间

1. resolve后面的代码会不会被执行?

当没有Error的时候, resolve会将Promise.then放在微任务队列中，当所有的宏任务执行结束的时候，执行微任务队列。

当有Error的时候，Error后面的代码不会被执行，但是Promise的结果依旧是fulfilled

当Promise遇到setTimeout

async/await 与Promise

425824365 commented Jul 9, 2024

编程题一

编程题二

编程题三

编程题四

ChelesteWang commented Apr 5, 2022 •

edited

Loading

ChelesteWang commented Apr 5, 2022 •

edited

Loading

1. 是否可以使用`return` 代替 `resolve`

当没有`Error`的时候, `resolve`会将`Promise.then`放在微任务队列中，当所有的宏任务执行结束的时候，执行微任务队列。

当有`Error`的时候，`Error`后面的代码不会被执行，但是`Promise`的结果依旧是`fulfilled`