将 Promise 处理函数绑定到对象答案

【问题标题】：Binding a promise handler function to an object将 Promise 处理函数绑定到对象
【发布时间】：2019-04-24 00:28:31
【问题描述】：

我有一些类似的代码：

var bar = foo().then(function success(value) {
  // compute something from a value...
}, function failure(reason) {
  // handle an error...
});

如何在bar 的上下文中将failure 函数绑定到this 对象。我知道我必须使用myFunc.bind(this)，但我应该用什么来代替myFunc？

【问题讨论】：

你在说什么样的承诺？ ES6 的 JavaScript 承诺仍在讨论中
是的，我说的是 JavaScript 承诺。
很难相信，es6 javascript 承诺仍然没有实现。您需要提供更多上下文。 mozilla.6506.n7.nabble.com/…
@fmsf Promises 在这里并不是真正重要的部分 :)

标签： javascript promise

【解决方案1】：

您可以像这样使用bind：

var bar = foo().then(function success(value) {
  // compute something from a value...
}, function failure(reason) {
  // handle an error...
}.bind(this));

【讨论】：

【解决方案2】：

您目前有一个匿名（尽管已标记）函数用于您的失败回调：

function failure(reason) {
   // handle an error...
}

正如 robertklep 所说，您可以立即在该匿名函数上调用 .bind。但是，改用命名函数可能更具可读性，并将其作为变量传递给.then()：

function success(value) {
    // compute something from a value...
}
function failure(reason) {
    // handle an error...
}
var bar = foo().then(success, failure.bind(this));

【讨论】：

我想你的意思是failure = failure.bind(this)？
@robertklep 啊，可能是；我对.bind() 不是很熟悉。如果它返回一个新对象，而不是原地执行，我想foo().then(success, failure.bind(this)); 会非常可读。
是的，它返回一个新对象 :) 至于更具可读性，这是一个有争议的问题 ;)
@robertklep 这确实是主观的；但是需要这个问题的事实表明，许多人并不认为函数文字很容易概念化 - 他们只是使用匿名回调，因为这是他们习惯做的事情，并且没有意识到他们正在创建并传递一个函数对象。
@robertklep 非常正确。另一方面，您可能希望将 same 失败回调与多个 Promise 一起使用（但可能将其绑定到 this 的不同值）...这两种方法都有自己的位置，而且重要的是是要意识到它们都可以正常工作。 :)

【解决方案3】：

如果您只对封闭范围的对象this 感兴趣，并且您使用的是ECMA6 或更高版本，则可以使用arrow functions。它看起来像：

var that = this;
var bar = foo().then(value => {
  // compute something from a value...
  console.log(this === that); // true
  this.propA = value.propA
});

您可以在MSD Using promises 中找到更多示例

【讨论】：

【解决方案4】：

我发现非常有用的是将每个then() 的 [function] 处理程序绑定到一个空对象，这样每个函数都可以访问它。然后用户可以通过this关键字设置和获取每个Promise中的属性。单元测试框架的工作方式类似。

    chainPromiseList([getName,getAge],finalDone,rejectHandle);

    function chainPromiseList(promiseList,finalDone,errHandle){
      var userContext = new UserContext();
      if(typeof finalDone==='function') promiseList.push(finalDone);
      if(typeof errHandle==='function') promiseList.push(errHandle);
      return promiseList.reduce((total,curVal,curInd,arr)=>{
        var last = curInd+1===arr.length;
        var method = last&&typeof errHandle==='function' ? 'catch':'then';
        var concatenated = total[method](curVal.bind(userContext));
        return concatenated;
      },Promise.resolve());
        function UserContext(){};
    }
    
    function getName(){
      return new Promise((resolve,reject)=>{
        setTimeout(()=>{
          console.log('got name!');
          this.name = 'Paul';
          resolve();
        },500);
      });
    }

    function getAge(){
      return new Promise((resolve,reject)=>{
        setTimeout(()=>{
          console.log('got age!');
          this.age = 26;
          resolve();
        },500);
      });
    }

    function finalDone(){
      console.log(`Hello, I'm ${this.name} and I'm ${this.age}yo.`);
    }

    function rejectHandle(msg){
      console.log('Error: ',msg);
    }

【讨论】：