JavaScript 手写实现 promise 的某一个方法

基于现有的 Promise Api 实现 Promise 的某一个功能，我们一起来看下具体怎么实现吧~

Promise.resolve

  1. Promise.resolve = function (val) {
  2.   return new Promise(resolve => resolve(val));
  3. };
  5. // test
  6. const p1 = new Promise(resolve => {
  7.   setTimeout(() => void resolve('success'), 0);
  8. });
  9. const p2 = new Promise((_, reject) => {
  10.   setTimeout(() => void reject('error'), 0);
  11. });
  12. Promise.resolve(p1).then(console.log); // success
  13. Promise.resolve(p2).catch(console.log); // error
  14. Promise.resolve(2).then(console.log); // 2
  15. Promise.resolve('string').then(console.log); // string
  16. Promise.resolve(null).then(console.log); // null
  17. Promise.resolve(undefined).then(console.log); // undefined
  18. Promise.resolve(true).then(console.log); // true
  19. Promise.resolve(false).then(console.log); // false
JavaScript

Promise.reject

  1. Promise.reject = function (val) {
  2.   return new Promise((_, reject) => reject(val));
  3. };
  5. // test
  6. const p1 = Promise.resolve('success');
  7. Promise.reject(p1).catch(console.log); // Promise { 'success' }
  8. Promise.reject(2).catch(console.log); // 2
  9. Promise.reject('string').catch(console.log); // string
  10. Promise.reject(null).catch(console.log); // null
  11. Promise.reject(undefined).catch(console.log); // undefined
  12. Promise.reject(true).catch(console.log); // true
  13. Promise.reject(false).catch(console.log); // false
JavaScript

Promise.prototype.catch

  1. /**
  2.  * 基于现有的Promise Api,实现promise.prototype.cache
  3.  *
  4.  * cache 其实是一个特殊的then,只是第一个参数为null
  5.  * @param {*} func 回调函数
  6.  * @returns
  7.  */
  8. Promise.prototype.catch = function (func) {
  9.   return new Promise(resolve => {
  10.     this.then(null, err => {
  11.       // 这里要注意一下，回调函数执行结果要传给下一个promise
  12.       resolve(func(err));
  13.     });
  14.   });
  15. };
  17. // test
  18. Promise.reject('error test')
  19.   .catch(err => {
  20.     console.log(err);
  21.     return 'catch';
  22.   })
  23.   .then(console.log);
  24. // error test
  25. // catch
JavaScript

Promise.prototype.finally

  1. /**
  2.  * 基于现有的Promise Api,实现promise.prototype.finally
  3.  *
  4.  * 注意事项：
  5.  * (1)回调函数不接收参数
  6.  * (2)回调函数的执行结果不传递给下一个Promise
  7.  * @param {*} func 回调函数
  8.  * @returns
  9.  */
  10. Promise.prototype.finally = function (func) {
  11.   return new Promise((resolve, reject) => {
  12.     this.then(res => {
  13.       func();
  14.       resolve(res);
  15.     }).catch(err => {
  16.       func();
  17.       reject(err);
  18.     });
  19.   });
  20. };
  22. // test
  23. Promise.resolve('success')
  24.   .then(() => 'then')
  25.   .finally(() => {
  26.     console.log('finally');
  27.     return 'finally';
  28.   })
  29.   .then(console.log);
  30. // finally
  31. // then
  33. // 通过上面的打印结果我们可以看到，finally函数返回的字符串 'finally' 并没有打印出来，
  34. // 打印出来的字符串 'then' 是由finally的前一个then函数返回的
  35. // 这也符合我们的预期《回调函数的执行结果不传递给下一个Promise》
  37. Promise.reject('reject')
  38.   .catch(() => 'catch')
  39.   .finally(() => {
  40.     console.log('finally');
  41.     return 'finally';
  42.   })
  43.   .then(console.log);
  44. // finally
  45. // catch
  47. // 通过上面的打印结果我们可以看到，finally函数返回的字符串 'finally' 并没有打印出来，
  48. // 打印出来的字符串 'catch' 是由finally的前一个catch函数返回的
  49. // 这也符合我们的预期《回调函数的执行结果不传递给下一个Promise》
JavaScript

Promise.all

  1. /**
  2.  * 基于现有的Promise Api,实现promise.all
  3.  * @param {*} args
  4.  * @returns
  5.  */
  6. Promise.all = function (args) {
  7.   const getType = obj =>
  8.     Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
  10.   // 判断传进来的参数是否可枚举
  11.   if (args[Symbol.iterator]) {
  12.     const arr = Array.from(args);
  13.     if (arr.length === 0) return Promise.resolve([]);
  14.     // 用来记录每一个promise成功后返回的数据
  15.     const ans = new Array(arr.length);
  16.     // 当前已经执行成功的Promise的数目
  17.     let count = 0;
  19.     // 返回一个新的Promise对象
  20.     return new Promise((resolve, reject) => {
  21.       arr.forEach((promise, index) => {
  22.         if (getType(promise) !== 'promise') {
  23.           // 如果数组的某一项不是一个Promise,将其包装成Promise
  24.           promise = Promise.resolve(promise);
  25.         }
  26.         promise
  27.           .then(res => {
  28.             ans[index] = res;
  29.             count++;
  30.             if (count === arr.length) {
  31.               // 如果所有的Promise都执行成功了，返回数据
  32.               resolve(ans);
  33.             }
  34.           })
  35.           .catch(reject); // 任何一个Promise失败了，直接返回失败的结果
  36.       });
  37.     });
  38.   }
  39. };
  41. // test
  42. Promise.all([Promise.resolve(1), Promise.resolve(2)]).then(console.log); // [1,2]
  43. Promise.all([3, Promise.resolve(4)]).then(console.log); // [3,4]
  44. Promise.all([5, 6]).then(console.log); // [5,6]
JavaScript

Promise.any

  1. Promise.any = function (args) {
  2.   if (args[Symbol.iterator]) {
  3.     const getType = obj =>
  4.       Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
  5.     let count = 0;
  6.     const errors = Array(args.length);
  7.     return new Promise((resolve, reject) => {
  8.       args.forEach((promise, index) => {
  9.         if (getType(promise) !== 'promise') {
  10.           promise = Promise.resolve(promise);
  11.         }
  12.         promise.then(resolve).catch(err => {
  13.           errors[index] = err;
  14.           count++;
  15.           if (count === args.length) {
  16.             reject(new AggregateError(errors, 'All promises were rejected'));
  17.           }
  18.         });
  19.       });
  20.     });
  21.   }
  22. };
  24. // test
  25. const p1 = Promise.reject('err1');
  26. const p2 = Promise.reject('err2');
  27. const p3 = Promise.resolve('success');
  29. Promise.any([1, 2, 3]).then(console.log).catch(console.log); // 1
  30. Promise.any([p1, p2, p3]).then(console.log).catch(console.log); // success
  31. Promise.any([p1, p2]).then(console.log).catch(console.log);
  32. // AggregateError: All promises were rejected
  33. //    at xxx.js {
  34. //  [errors]: [ 'err1', 'err2' ]
  35. // }
JavaScript

Promise.race

  1. const getType = obj =>
  2.   Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
  3. const isPromise = obj => getType(obj) === 'promise';
  5. Promise.race = function (args) {
  6.   if (args[Symbol.iterator]) {
  7.     const arr = Array.from(args);
  8.     return new Promise((resolve, reject) => {
  9.       arr.forEach(promise => {
  10.         if (!isPromise(promise)) {
  11.           promise = Promise.resolve(promise);
  12.         }
  13.         // 因为Promise的状态只能改变一次，所以我们多次调用resolve和reject
  14.         // 只有第一次调用的时候才生效
  15.         promise.then(resolve).catch(reject);
  16.       });
  17.     });
  18.   }
  19. };
  21. // test
  22. const p1 = Promise.resolve(1);
  23. const p2 = Promise.reject(2);
  24. Promise.race([p1, p2]).then(console.log).catch(console.log); // 1
  25. Promise.race([p2, p1]).then(console.log).catch(console.log); // 1
  26. Promise.race([3, p1]).then(console.log).catch(console.log); // 3
  27. Promise.race([4, 5]).then(console.log).catch(console.log); // 4
JavaScript

Promise.allSettled

  1. Promise.allSettled = function (args) {
  2.   if (args[Symbol.iterator]) {
  3.     const res = Array(args.length);
  4.     let count = 0;
  6.     const getType = obj =>
  7.       Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
  9.     return new Promise(resolve => {
  10.       args.forEach((promise, index) => {
  11.         if (getType(promise) !== 'promise') {
  12.           promise = Promise.resolve(promise);
  13.         }
  14.         promise
  15.           .then(value => {
  16.             res[index] = { status: 'fulfilled', value };
  17.           })
  18.           .catch(reason => {
  19.             res[index] = { status: 'rejected', reason };
  20.           })
  21.           .finally(() => {
  22.             count++;
  23.             if (count === args.length) {
  24.               resolve(res);
  25.             }
  26.           });
  27.       });
  28.     });
  29.   }
  30. };
  32. // test
  33. const p1 = Promise.reject('err1');
  34. const p2 = Promise.reject('err2');
  35. const p3 = Promise.resolve('success');
  36. Promise.allSettled([p1, p2, p3]).then(res => console.log(res));
  37. // [
  38. //   { status: 'rejected', reason: 'err1' },
  39. //   { status: 'rejected', reason: 'err2' },
  40. //   { status: 'fulfilled', value: 'success' }
  41. // ]
  43. Promise.allSettled([1, 2, 3]).then(res => console.log(res));
  44. // [
  45. //   { status: 'fulfilled', value: 1 },
  46. //   { status: 'fulfilled', value: 2 },
  47. //   { status: 'fulfilled', value: 3 }
  48. // ]
JavaScript
编程笔记 & 随笔杂谈