fetchAPIでgetをする時にパラメータをつける方法

概要

Web標準の技術を利用してfetchAPIのgetパラメータにクエリストリングをくっつけたかったのだが、調べてもあまりまとまったものが出てこなかったのでメモ。

実装

fetchAPIの他にURLとURLSearchParamsの2つのAPIを利用する。
以下に示す基本的な形を使って、2箇所だけ修正すれば、自在にクエリのついたリクエストを送ることができる。

let data = []; // 修正箇所1
let url_string = 'https://fetchしたいURL';
let url_obj = new URL(url_string);
let params = new URLSearchParams(); // もしくは url_obj.searchParams
data.map(tag_key => params.append('key','val')); // 修正箇所2
url_obj.search = params.toString();
fetch(url_obj.toString())

やっていることの簡単な説明は、URLオブジェクトを作成して、URLオブジェクトのsearchプロパティに、URLSearchParamsオブジェクトから生成したパラメータを代入して書き換えてあげる。paramsの初期化の部分では2パターンの書き方を書いているが、変数url_stringにもともとついているgetパラメータを再利用したい場合はurl_obj.searchParamsを使えばいいと思う。

さて、実際に使ってみよう。
検索画面で、タグを複数選択して、検索する時を想定する。
選択したタグのキーは1と2とするときは、修正箇所1が以下のようになると思う。

let data = ['1', '2'];

そして、このキー値をパラメータに設定するために修正箇所2を以下のようにして、dataの中のデータを順繰りに変数paramsに追加してくれるようにする。

data.map(tag_key => params.append('tags[]', tag_key));

appendの第一引数はgetパラメータのkeyで、第二引数はvalueとなる。また、第一引数のkeyを重複してappendしても、値は上書きされないという仕様のおかげで、tags[]のキーを持つデータを複数appendするとうまい具合に配列をgetパラメータとして渡すことができる。

全容は以下である。

let data = ['1', '2'];
let url_string = 'https://fetchしたいURL';
let url_obj = new URL(url_string);
let params = new URLSearchParams(); // もしくは url_obj.searchParams
data.map(tag_key => params.append('tags[]', tag_key));
url_obj.search = params.toString();
fetch(url_obj.toString())

おわりに

searchプロパティにパラメータをセットする時にtoStringで展開してあげないといけない部分が、URLSearchParamsオブジェクトをそのままつっこめると、

url_obj.search = params;

みたいにできて嬉しい気がする。そんなに変わらないけど。