定义承诺链的后备捕获？

Question

我正在开发一个使用 what-wg fetch 的应用程序。我们以这种方式定义了默认的 fetch 中间件和选项：

export function fetchMiddleware(response) {
  return new Promise(resolve => {
    resolve(checkStatus(response));
  }).then(parseJSON);
}

export const fetchDefaults = {
  credentials: 'same-origin',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  }
};

我们以这种方式使用我们的默认中间件/获取选项：

fetch('/api/specific/route', fetchDefaults)
  .then(fetchMiddleware)
  .then(function(data) {
    // ... Dispatch case-specific fetch outcome
    dispatch(specificRouteResponseReceived(data));
  });

我们希望为整个应用程序中的所有 fetch 用法添加一个通用的后备捕获，换句话说，如下所示：

export function fetchGenericCatch(function(error) {
  showGenericErrorFlashMessage();
})

fetch('/en/api/user/me/preferences', fetchDefaults)
  .then(fetchMiddleware)
  .then(function(data) {
    dispatch(userPreferencesReceived(data));
  })
  .catch(fetchGenericCatch);

大量代码重复。我们想要一个可以为我们做所有这些的实用函数/类，例如像这样工作的东西：

genericFetch('/api/specific/route') // bakes in fetchDefaults and fetchMiddleware and fetchGenericCatch
  .then(function(data) {
    dispatch(userPreferencesReceived(data));
  }); // gets generic failure handler for free

genericFetch('/api/specific/route') // bakes in fetchDefaults and fetchMiddleware and fetchGenericCatch
  .then(function(data) {
    dispatch(userPreferencesReceived(data));
  })
  .catch(function(error) {
    // ...
  }); // short-circuits generic error handler with case-specific error handler

主要需要注意的是，通用 catch 必须链接在 特定案例的 thens / catches 之后。

关于如何使用 whatwg-fetch / ES6 Promises 实现这一点的任何提示？

相关：

有类似的帖子，但它们似乎没有解决运行默认捕获的需求毕竟非默认thens 和catches：

• How to create a Promise with default catch and then handlers
• Default behavior if no other functions chained to a promise

10 月 14 日编辑：

可能重复：Promises and generic .catch() statements

Answer 1

我认为解决方案很简单：

export function genericFetch(url, promise, optionOverrides) {
  const fetchOptions = {...fetchDefaults, ...optionOverrides};
  return fetch(url, fetchOptions)
    .then(fetchMiddleware)
    .then(promise)
    .catch(function(error) {
      showGenericFlashMessage();
    });
}

不需要特殊错误处理程序的用例可以简单地以这种方式使用它：

genericFetch('/api/url', function(data) {
  dispatch(apiResponseReceived(data));
});

需要特殊捕获或更复杂链的用例可以传入完整的 Promise：

genericFetch('/api/url', function(response) {
  return new Promise(resolve, reject => {
    dispatch(apiResponseReceived(data));
  }).catch(nonGenericCaseSpecificCatch); // short-circuits default catch
});

Answer 2

只要错误处理程序是 DRY，使用 WET 代码并不是最糟糕的选择。

fetch(...)
...
.catch(importedFetchHandler);

它不会导致任何问题，并且符合 Bluebird 和 V8 Promise 的行为，其中存在未处理的拒绝事件以确保没有任何 Promise 未被捕获。

---

实现这一点的最简单方法是为fetchpromise 引入类似promise 的包装器：

function CatchyPromiseLike(originalPromise) {
  this._promise = originalPromise;

  this._catchyPromise = Promise.resolve()
  .then(() => this._promise)
  .catch((err) => {
    console.error('caught', err);
  });

  // every method but 'constructor' from Promise.prototype 
  const methods = ['then', 'catch'];

  for (const method of methods) {
    this[method] = function (...args) {
      this._promise = this._promise[method](...args);

      return this;
    }
  }
}

可以像这样使用

function catchyFetch(...args) {
  return new CatchyPromiseLike(fetch(...args));
}

像这样的 promise 有天然的局限性。

如果转换为真正的承诺，副作用将被丢弃：

Promise.resolve(catchyFetch(...)).then(() => /* won't be caught */);

而且它不能很好地与异步链配合使用（这是所有承诺的禁忌）：

var promise = catchyFetch(...);

setTimeout(() => {
  promise.then(() => /* won't be caught */);
});

---

一个不错的选择是 Bluebird，无需在那里发明轮子，功能就是它的最爱。 Local rejection events 看起来正是我们所需要的：

// An important part here,
// only the promises used by catchyFetch should be affected
const CatchyPromise = Bluebird.getNewLibraryCopy();

CatchyPromise.onPossiblyUnhandledRejection((err) => {
  console.error('caught', err);
});

function catchyFetch(...args) {
  return CatchyPromise.resolve(fetch(...args));
}

唷，这很容易。