向 Promise 添加监听器后，我应该使用原来的 Promise 还是新的 Promise？

Question

我有一些接受现有承诺的 javasript 代码 （比如说，fetch() 返回的承诺）并增加价值 （比如说，then/catch listeners 进行调试，或者更多）：

let myFetch = function(url) {
  return fetch(url).then(function(value) {
    console.log("fetch succeeded: value=",value);
    return value;
  }.catch(function(reason) {
    console.log("fetch failed: reason=",reason);
    throw reason;
  });
};

我发现自己修改了上面的代码，以便仅在某些条件为真时才添加侦听器：

let myFetch = function(url) {
  let promise = fetch(url);
  if (some condition) {
    promise = promise.then(function(value) {
      console.log("fetch succeeded: value=",value);
      return value;
    }.catch(function(reason) {
      console.log("fetch failed: reason=",reason);
      throw reason;
    });
  }
  return promise;
};

现在我想知道，myFetch 返回“then”返回的新承诺是否真的有意义 （实际上 catch 是另一个“then”的简写）如上， 还是返回原始承诺（带有添加的侦听器）更有意义？ 换句话说，我正在考虑省略第二个“promise =”， 使代码看起来像这样：

let myFetch = function(url) {
  let promise = fetch(url);
  if (some condition) {
    promise.then(function(value) {
      console.log("fetch succeeded: value=",value);
      return value;
    }.catch(function(reason) {
      console.log("fetch failed: reason=",reason);
      throw reason;
    });
  }
  return promise;
};

这与以前的版本有什么不同吗？ 哪个版本更可取，如果是，为什么？

Answer 1

好吧，如果您的成功处理程序 returns 是值，而您的拒绝处理程序 throws 是错误 - 那么它基本上是承诺的身份转换。

你不仅不需要这样做promise = promise.then，你甚至不需要返回值：

let myFetch = function(url) {
  let promise = fetch(url);
  if (some condition) {
    promise.then(function(value) {
      console.log("fetch succeeded: value=",value);
    }.catch(function(reason) {
      console.log("fetch failed: reason=",reason);
    });
  }
  return promise;
};

也就是说，如果你使用 ES6 并 let，你可以使用箭头函数，这会让这变得更好一点：

let myFetch = function(url) {
  let promise = fetch(url);
  if (some condition) {
    promise.then(value => console.log("fetch succeeded: value=",value))
          .catch(reason => console.log("fetch failed: reason=",reason));
  }
  return promise;
};

像 bluebird 这样的一些 promise 库为此提供了一个 tap 实用程序。唯一的问题是，如果 fetch 添加了对取消承诺的支持，那么如果你没有链接它，你就会用 if (some condition) 处理程序打破链。

Answer 2

如果您唯一的用例是在then/catch 中记录某些内容 - 只要一切顺利，这无关紧要。如果您遇到异常，事情会变得更加混乱。考虑以下两个例子：

返回原始承诺

function myFetch() {
    let promise = new Promise(function (resolve, reject) {
        resolve(100);
    });
    promise.then(function () { throw new Error('x'); });
    return promise;
}

myFetch().then(function () {
    console.log('success!');
}).catch(function (e) {
    console.error('error!', e)
});

结果是success，而在内部then 中抛出的错误可能会被一些promise 库吞没（尽管最流行的如Bluebird 处理此问题，您会收到额外的错误Unhandled rejection Error: x）。 使用native Promises in some environments 时，错误也可能被吞没。

返回修改后的承诺

function myFetch() {
    let promise = new Promise(function (resolve, reject) {
        resolve(100);
    });
    promise = promise.then(function () { throw new Error('x'); });
    return promise;
}

myFetch().then(function () {
    console.log('success!');
}).catch(function (e) {
    console.error('error!', e)
});

现在结果是error! Error: x。

Answer 3

你是 promise 分支。在第二种情况下，您实际上是将 Promise 链分支为两个 Promise 链，因为一旦调用者调用 myFetch：

myFetch("localhost").then(request => { /* use request */ } );

然后promise 将有两次调用.then（一次在myFetch 中进行控制台日志记录，然后再次在此处）。

这很好。您可以根据需要多次在同一个 promise 上调用 .then，并且只要 promise 解析，函数就会以相同的顺序一起执行。

但是，重要的是，每个函数都代表原始承诺的一个分支，独立于其他所有分支。这就是为什么你在console.log 之后不需要返回或重新抛出任何东西：没有人在那个分支上监听，具体来说，myFetch 的调用者不受影响。

这非常适合记录恕我直言，但在执行更多操作时需要注意细微的时间和错误处理差异：

var log = msg => div.innerHTML += msg + "<br>";

var myFetch = url => {
  var p = Promise.resolve({});
  p.then(() => log("a")).then(() => log("b"));
  return p;
}

myFetch().then(() => log("1")).then(() => log("2")).catch(log); // a,1,b,2

<div id="div"></div>

这会发出a,1,b,2。如你所见，这里有两条链条在进行，平行推进。当您考虑 promise 何时解决时，这是有道理的，但可能会令人惊讶。

另一个微妙之处是错误处理也是每个分支的（一个分支永远不会失败另一个分支）。其实上面的代码有一个bug。你发现了吗？在.then(() => log("b")) 之后应该有一个catch，否则您在该分支中所做的任何事情的错误最终都会在某些环境中未处理或被吞没。