第 64 题：模拟实现一个 Promise.finally

Question

Promise.prototype.finally = function (callback) {
  let P = this.constructor;
  return this.then(
    value  => P.resolve(callback()).then(() => value),
    reason => P.resolve(callback()).then(() => { throw reason })
  );
};

Answer 1

看了这个问题才知道，原来 promise 的 finally 只是不管成功还是失败都会执行而已，而不会永远最后执行

Answer 2

https://github.com/taylorhakes/promise-polyfill/blob/master/src/finally.js

finally是一个关键字,在IE低版本会引发解析错误,若兼容IE不能直接object.key语法.

Promise.prototype['finally'] = function (callback) {
  var constructor = this.constructor;
  return this.then(
    function(value) {
      // @ts-ignore
      return constructor.resolve(callback()).then(function() {
        return value;
      });
    },
    function(reason) {
      // @ts-ignore
      return constructor.resolve(callback()).then(function() {
        // @ts-ignore
        return constructor.reject(reason);
      });
    }
  );
}

Answer 3

Promise.prototype.finally = function (callback) {
  let P = this.constructor;
  return this.then(
    value  => {
          callback();
          return value;
     },
    reason => {
        callback();
        throw reason
    }
  );
};

为什么需要Promise.resolve(callback()).then(() => value)
而不能直接执行callback, return value

因为callback如果是个异步操作，返回promise呢.希望等callback执行完再接着执行

Answer 4

Promise.prototype.finally = function(callback){
  const constructor = this.constructor
  return this.then(value => {
    return constructor.resolve(callback()).then(() => value)
  }),
  reason => {
    return constructor.resolve(callback()).then(() => throw reason)
  }
}

Answer 5

Promise.prototype.finally = function(callback) {
        return this.then(
          () => {
            callback();
          },
          () => {
            callback();
          }
        );
      };

Answer 6

Promise.prototype.finally = function (callback) {
  let P = this.constructor;
  return this.then(
    value  => {
          callback();
          return value;
     },
    reason => {
        callback();
        throw reason
    }
  );
};

为什么需要Promise.resolve(callback()).then(() => value)
而不能直接执行callback, return value

Answer 7

	window.Promise.prototype = {
			finally: function(callback) {
				let P = this.constructor;
				  return this.then(
				    value  => P.resolve(callback()).then(() => value),
				    reason => P.resolve(callback()).then(() => { throw reason })
				  );
			}
		}

抄了个...

Answer 8

window.Promise && !('finally' in Promise) && !function() {        
  Promise.prototype.finally = function(cb) {
    cb = typeof cb === 'function' ? cb : function() {};
      
    var Fn = this.constructor;  // 获取当前实例构造函数的引用

    // 接受状态：返回数据
    var onFulfilled = function(data) {
      return Fn.resolve(cb()).then(function() {
        return data
      })
    };

    // 拒绝状态：抛出错误
    var onRejected = function(err) {
      return Fn.resolve(cb()).then(function() {
        throw err
      })
    };

    return this.then(onFulfilled, onRejected);
  }
}();

/*********************** 测试 ***********************/
const p = new Promise((resolve, reject) => {
  console.info('starting...');

  setTimeout(() => {
    Math.random() > 0.5 ? resolve('success') : reject('fail');
  }, 1000);
});

// 正常顺序测试
p.then((data) => {
    console.log(`%c resolve: ${data}`, 'color: green')
  })
  .catch((err) => {
    console.log(`%c catch: ${err}`, 'color: red')
  })
  .finally(() => {
    console.info('finally: completed')
  });

// finally 前置测试  
p.finally(() => {
    console.info('finally: completed')
  })	
  .then((data) => {
    console.log(`%c resolve: ${data}`, 'color: green')
  })
  .catch((err) => {
    console.log(`%c catch: ${err}`, 'color: red')
  });

Answer 9

https://github.com/matthew-andrews/Promise.prototype.finally/blob/master/finally.js