FETCH - 22

ブラウザがサポートfetch() 何年もの間(Internet Explorerを除いて)、しかし、私はまだ多くの開発者が古典的なXHRベースの「AJAX」を使うのを見ます.
なぜですか.一部-それはだからだと思うfetch() 行方不明timeout とエラーを処理する簡単な方法.しかし、開発者は、そのシンプルさのためにそれを使用したいです.
言い換えれば:それはfetch- 22状況(悪いしゃれを意図!)です
fetch () initオブジェクトを拡張する小さなモジュールfetch 22 ()を書きました.

コールバック( true - num false ): fetchが開始されたときにコールする関数( true )

エラーが発生した場合に実行するカスタム関数

手動でエラーを引き起こすステータスコードの配列

パーサ(レスポンス):レスポンスを解析するカスタム関数、デフォルトは使用されます.あるいは、text ()は、応答内容の型によって異なります.

parserargs :レスポンスの後にカスタムパーサーに送る余分な引数の配列

Timeout :タイムアウトエラーの前にミリ秒単位で行う.デフォルトは9999 msです

モジュール自体はgrabbed here , そして、例のあるペンをここで見ることができます(しかし、codepenに行ってフルスクリーンで見てください).
以下にデモの例を示します.

カスタムコールバック
カスタムコールバックは、取得が開始されると、2回呼び出されます.

function startStop(bool) {
  if (bool) {
    console.log('START'}
  else {
    console.log('STOP');
  }
}

カスタムErrorHandler
エラーオブジェクトを受信します.

function handleError(error) {
  console.error(error.name, error.message);
}

カスタムパーサー
デフォルトのパーサはcontent-type . カスタムパーサーの例<symbol> そばid SVGでは

async function getSymbolFromSVG(response, id) {
  const text = await response.text();
  const parser = new DOMParser();
  const doc = parser.parseFromString(text, "text/xml");
  const svg = doc.getElementById(id);
  return svg.outerHTML.toString();
}

それは私のためにされているように、それはあなたのために有用であることを願っています.
読書のおかげで、ハッピーコーディング!