☰

Fetch GETリクエストを使用してクエリ文字列を設定する 質問する

tag-icon • tag-icon javascript jquery http fetch-api
Fetch GETリクエストを使用してクエリ文字列を設定する 質問する

新しいものを使ってみようと思っていますフェッチAPI:

次のようなリクエストをしていますGET:

var request = new Request({
  url: 'http://myapi.com/orders',
  method: 'GET'
});
fetch(request);

しかし、リクエストにクエリ文字列を追加する方法がわかりません。理想的には、次のようなリクエストGETを送信できるようにしたいです。GETURL

'http://myapi.com/orders?order_id=1'

では、を のパラメータとしてjQuery渡すことでこれを行うことができます。新しい でこれを行う同等の方法はありますか?{order_id: 1}data$.ajax()Fetch API

ベストアンサー1

簡潔で現代的なアプローチ:

fetch('https://example.com?' + new URLSearchParams({
    foo: 'value',
    bar: 2,
}).toString())

使い方： URLSearchParams toString() メソッドURLSearchParams インスタンスを文字列表現に変換します。これは、適切にエンコードされたクエリ文字列になります。

.toString()次のように呼び出しを省略することもできます: fetch('https://...' + new URLSearchParams(...))。JavaScript は、.toString()オブジェクトが文字列と連結されると自動的に呼び出します。ただし、将来のコード リーダーがコードを理解するには、言語に対するより深い理解が必要です。

クエリ パラメータを含むフェッチ リクエストの完全な例:

// Real example you can copy-paste and play with.
// jsonplaceholder.typicode.com provides a dummy rest-api
// for this sort of purpose.
async function doAsyncTask() {
  const url = (
    'https://jsonplaceholder.typicode.com/comments?' +
    new URLSearchParams({ postId: 1 }).toString()
  );

  const result = await fetch(url)
    .then(response => response.json());

  console.log('Fetched from: ' + url);
  console.log(result);
}

doAsyncTask();

使用/サポートしている場合...

  • IE: Internet ExplorerはURLSearchParamsやfetchをネイティブサポートしていませんが、ポリフィル 利用可能。

  • Node: Node 18では、fetch APIがネイティブでサポートされています（バージョン17.5ではフラグでサポートされていました--experimental-fetch）。古いバージョンでは、次のようなパッケージを通じてfetch APIを追加できます。ノードフェッチ. URLSearchParams は Node に付属しており、バージョン 10 以降ではグローバル オブジェクトとして見つかります。古いバージョンでは、 にありますrequire('url').URLSearchParams。

  • TypeScript:に提供される値はURLSearchParams自動的に文字列に変換されるため、TypeScript の の定義ではURLSearchParamsすべての値を文字列として提供する必要があります。TypeScript を使用していない人は、変換動作が直感的だと感じれば、この関数に他の値タイプを提供することに抵抗がないかもしれません。たとえば、数値は期待どおりに動作しますが、配列が暗黙的に変換される方法は、将来の読者に混乱を引き起こす可能性があります。

  • TypeScript v4 またはそれ以前のバージョンと Node: TypeScript の以前のバージョンでは、Node 環境のグローバル URLSearchParams の型定義が提供されていませんでした。最も簡単な回避策は、urlモジュールからインポートすることです。これは、後に v4 のどこかの時点で解決されました (この問題が修正された正確なバージョンはわかりません)。この問題詳細については。

おすすめ記事