`fetch`でFluture`encaseP`を使用する場合のUnhandledPromiseRejectionWarning

debugcn 投稿 Dev

jackdbd

Fluturesを使い始めたばかりで、d3で視覚化するためにいくつかのリモートデータをフェッチしようとしています。

DOMセレクター（例#my-chart）とURL（例https://example.com/data.json）を受け入れる関数を作成しました。

データのフェッチ中にエラーが発生した場合、エラーメッセージを表示する単項関数があります。すべてがうまくいけば、視覚化を描画する単項関数があります。簡単にするために、これらの関数がちょうどconsole.errorとであると仮定しましょうconsole.log。

const fn = async (selector, url) => {
// convert fetch (which returns a Promise) into a function that 
returns a Future
const fetchf = Future.encaseP(fetch);

fetchf(url)
  .chain(res => Future.tryP(_ => res.json()))
  .fork(console.error, console.log);
}

fetchこの警告が表示されるため、Futureでラップするときに何かが足りないようです。

UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch().

使用する必要がある場合はasync/await、次のように記述しますが、警告は表示されません。

const fn = async (selector, url) => {
  let res;
  try {
    res = await fetch(url);
  } catch (err) {
    console.error(err);
    return;
  }
  let data;
  try {
    data = res.json();
  } catch (err) {
    console.error(err);
    return;
  }
  console.log(data);
};

Avaq

ここでは2つのことが起こっているようです。

data.json()関数は内部でラップすることが想定されていないtryP2番目によるので、壊れていない例、それは（なしあり同期返しますawait）。これにより、FlutureはTypeErrorを発生させます（Promiseが表示されることを期待しているが、JSON値を取得するため）。ただし、フェッチAPIを知っていると、data.json()通常はPromiseが返されるため、2番目の例が壊れている可能性があり、他のことが起こっています。それが何であれ、予期しないエラーがどこかにスローされているのではないかと思います。投稿したもの以外に、コンソールに他のエラーメッセージが表示されますか？
私はいくつかのテストを行いましたが、それは本当のようです-成功した後にFlutureがTypeErrorを発生またはキャッチするencasePと、元のPromiseがそのエラーをキャッチし、未処理の拒否をトリガーしたようです。これはFlutureのリグレッションバグのようで、まもなく修正する予定です。それまでの間、エラーの原因を突き止めれば、上記の修正に依存せずに続行できます。