Fork me on GitHub

来几道Promise的题，看看你会几道?

Posted on | In | Views:

前言

本文将带你完成以下任务，相信你会更好掌握 Promise。
  1. JS实现一个带并发限制的异步调度器Scheduler，保证同时运行的任务最多有两个
  2. 实现Promise.all
  3. 实现Promise.any
  4. 实现Promise.race
  5. Promise.allSettled
  6. 多个返回promise的函数串行执行
  7. Promise 超时设计，利用Promise.race来实现

第一题

JS实现一个带并发限制的异步调度器Scheduler，保证同时运行的任务最多有两个。
完整题目

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// JS实现一个带并发限制的异步调度器Scheduler，
// 保证同时运行的任务最多有两个。
// 完善代码中Scheduler类，
// 使得以下程序能正确输出
class Scheduler {
	constructor() {
		this.count = 2
		this.queue = []
		this.run = []
	}
	add(task) {
                 // ...
	}
}
const timeout = (time) => new Promise(resolve => {
	setTimeout(resolve, time)
})
const scheduler = new Scheduler()
const addTask = (time, order) => {
	scheduler.add(() => timeout(time)).then(() => console.log(order))
}
addTask(1000, '1')
addTask(500, '2')
addTask(300, '3')
addTask(400, '4')
// output: 2 3 1 4
// 一开始，1、2两个任务进入队列
// 500ms时，2完成，输出2，任务3进队
// 800ms时，3完成，输出3，任务4进队
// 1000ms时，1完成，输出1
// 1200ms时，4完成，输出4

答案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
class Scheduler {
  constructor() {
    this.awatiArr = [];
    this.count = 0;
  }
  async add(promiseCreator) {
    if (this.count >= 2) {
      await new Promise((resolve) => {
        this.awatiArr.push(resolve);
      });
    }
    this.count++;
    const res = await promiseCreator();
    this.count--;
    if (this.awatiArr.length) {
      // 前面promise的resolve
      this.awatiArr.shift()();
    }
    return res;
  }
}
const scheduler = new Scheduler();
const timeout = (time) => {
  return new Promise(r => setTimeout(r, time))
}
const addTask = (time, order) => {
  scheduler.add(() => timeout(time))
    .then(() => console.log(order))
}
// test
// addTask(1000, 1)
// addTask(500, 2)
// addTask(300, 3)
// addTask(400, 4)

解释

  1. 当前执行并发大于等于2时，生成一个暂停的Promise，把resolve添到一个数组中，下面的代码被暂停执行
  2. 当前执行并发小于2, 立即执行异步操作并在该异步操作执行完毕后从数组中弹出最先push的resolve改变Promise的状态
  3. 由于Promise被resolve了，最初被暂停的代码可以继续执行
  4. 关键点为 Promise 没有被 resolve 或 reject 时后面代码会被暂停，Promise 的 resolve 或 reject 可以在Promise构造函数外执行
    解释非常好的文章

第二题

实现Promise.all()
// 结束条件：有一个 Promise rejected 或 所有 Promise resolved。

  1. 接收一个 Promise 实例的数组或具有 Iterator 接口的对象
  2. 如果元素不是 Promise 对象，则使用 Promise.resolve 转成 Promise 对象
  3. 如果全部成功，状态变为 resolved，返回值将组成一个数组传给回调
  4. 只要有一个失败，状态就变为 rejected，返回值将直接传递给回调all() 的返回值也是新的 Promise 对象
  5. 注意⚠️，不管是Promise.all、any、race还是allSettled，参数都是一个🉑️迭代对象及部署了[Symbol.iterator]方法（如array\string\map\set\有length属性的对象）
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    function promiseAll(iterable) {
      let array = Array.from(iterable);
      let resolveNum = 0;
      let promiseNum = array.length;
      let lists = new Array(promiseNum);
      return new Promise((resolve, reject) => {
        for (let i = 0; i < promiseNum; i++) {
          Promise.resolve(array[i]).then(res => {
            lists[i] = res;
            resolveNum++;
            if (resolveNum === promiseNum) {
              return resolve(lists)
            }
          }).catch(reason => {
            return reject(reason);
          });
        }
      });
    }
    // promiseAll([1, Promise.reject(12)]).then(res => {
    //   console.log(res)
    // }).catch(reason => {
    //   console.log(reason)
    // });

第三题

实现Promise.any()

  1. 结束条件：有一个 Promise resolved 或 所有 Promise rejected 就返回一个AggregateError类型的实例。
  2. 如果可迭代对象中没有一个 promise 成功（即所有的 promises 都拒绝），就返回一个失败的 promise 和AggregateError类型的实例，它是 Error 的一个子类，用于把单一的错误集合在一起。
    这里你有学习到了一个新的错误类型 AggregateError 快去看看吧 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    function promiseAny(iterable) {
      let array = Array.from(iterable);
      let promiseNum = array.length;
      let rejectNum = 0;
      return new Promise((resolve, reject) => {
        for (let i = 0; i < promiseNum; i++) {
          Promise.resolve(array[i]).then(res => {
            return resolve(res);
          }).catch(error => {
            rejectNum++;
            if (rejectNum === promiseNum) {
              return reject(new AggregateError("", "All promises were rejected"))
            }
          });
        }
      });
    }
    // var p1 = new Promise(function (resolve, reject) {
    //   setTimeout(reject, 500, "one");
    // });
    // var p2 = new Promise(function (resolve, reject) {
    //   setTimeout(reject, 600, "two");
    // });
    // promiseAny([p1, p2]).then(res => {
    //   console.log(res)
    // }).catch(error => {
    //   console.log(error)
    // });

第四题

实现Promise.race()
结束条件：一旦迭代器中的某个promise解决或拒绝，返回的 promise就会解决或拒绝。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function promiseRace(iterable) {
  let array = Array.from(iterable);
  let promiseNum = array.length;
  return new Promise((resolve, reject) => {
    for (let i = 0; i < promiseNum; i++) {
      Promise.resolve(array[i]).then(res => {
        return resolve(res);
      }).catch(error => {
        return reject(error);
      });
    }
  });
}
// var p1 = new Promise(function (resolve, reject) {
//   setTimeout(resolve, 500, "one");
// });
// var p2 = new Promise(function (resolve, reject) {
//   setTimeout(reject, 600, "two");
// });
// promiseRace([p1, p2]).then(res => {
//   console.log(res)
// }).catch(error => {
//   console.log(error)
// });

第五题

Promise.allSettled()

  1. 结束条件：所有给定的promise都已经fulfilled或rejected后的promise。
  2. 对于 promise 为 resolved 时对象为 {status: ‘fulfilled’, value: promise的值}
  3. 对于 promise 为 rejected 时对象为 {status: ‘rejected’, reason: rejected的原因}

目前是用在我们SSR项目中，一次性会在服务端发起多个请求，总不能一个请求挂掉都把成功的请求都丢弃吧，你可是试试这个方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
function promiseAllSettled(iterable) {
  let array = Array.from(iterable);
  let promiseNum = array.length;
  let num = 0;
  let list = new Array(promiseNum);
  return new Promise((resolve, reject) => {
    for (let i = 0; i < promiseNum; i++) {
      let obj = {
        status: ''
      };
      Promise.resolve(array[i]).then(res => {
        obj.status = 'fulfilled';
        obj.value = res;
      }).catch(error => {
        obj.status = 'rejected';
        obj.reason = error;
      }).finally(() => {
        num++;
        list[i] = obj;
        if (promiseNum === num) {
          return resolve(list);
        }
      });
    }
  });
}
// const promise1 = Promise.reject(3);
// const promise2 = new Promise((resolve, reject) => setTimeout(resolve, 100, 'foo'));
// promiseAllSettled([promise1, promise2]).then(res => {
//   console.log(res)
// }).catch(error => {
//   console.log(error)
// });

第六题

多个返回promise的函数串行执行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 实现一
function promiseSerial(array) {
  if (array.length === 0) throw '参数数组至少有一项'
  array.reduce((preP, nextP) => {
    return preP.then(() => nextP());
  }, Promise.resolve());
}
// 实现二
async function promiseSerial1(array) {
  if (array.length === 0) throw '参数数组至少有一项'
  for (let promise of array) {
    await promise();
  }
}
const createPromise = (time, id) => () =>
  new Promise(solve =>
    setTimeout(() => {
      console.log(Date.now() / 1000);
      console.log("promise", id);
      solve();
    }, time)
  );
// test
// promiseSerial1([
//   createPromise(1000, 1),
//   createPromise(1000, 2),
//   createPromise(1000, 3)
// ])

第七题

Promise 超时设计，利用Promise.race来实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function resolveAfter(ms, value = undefined) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('timeout');
      resolve(value || Promise.reject(new Error('Operation timed out')));
    }, ms);
  });
}
function PromiseTimeout(ms, promise) {
  return Promise.race([
    promise,
    resolveAfter(ms)
  ]);
}
// test
// var p1 = new Promise((resolve, reject) => {
//   setTimeout(() => {
//     console.log('p1');
//     resolve('p1-resolved')
//   }, 1000);
// })
// PromiseTimeout(100, p1).then(res => {
//   console.log(res)
// }).catch(error => {
//   console.log(error)
// });

最后

行文匆忙（主要是要哄👶睡觉了），本文主要是个人对 Promise 的一些理解，如有错误还望斧正。
-------------本文结束感谢您的阅读，如果本文对你有帮助就记得给个star-------------
Donate comment here
分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微博 豆瓣 一键分享 更多