teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

テキスト修正

2019/08/24 08:18

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -1,6 +1,6 @@
1
1
  こんにちは
2
2
 
3
- ※この回答ではGETメソッドについてのみ言及します。
3
+ (ご質問に掲載のコードでは、`axios.get(` と、GETメソッドでリクエストしているので、この回答では GETメソッドについてのみ言及します。)
4
4
 
5
5
  GETメソッドであれば、以下のように、URLにクエリパラメータを付加すればよいかと思います。
6
6
 

1

テキスト修正

2019/08/24 08:18

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -1,6 +1,41 @@
1
1
  こんにちは
2
+
3
+ ※この回答では、GETメソッドについてのみ言及します。
4
+
2
5
  GETメソッドであれば、以下のように、URLにクエリパラメータを付加すればよいかと思います。
3
6
 
4
7
  ```javascript
5
8
  fetch(`${url}?form_id=1`).then(・・・
6
- ```
9
+ ```
10
+
11
+ ### 追記
12
+ `form_id=1` を渡すだけならば、上記でも事足りますが、より汎用的な対応をお求めなのでしたら、パラメータの値に日本語が入ってくるなどもあり得ます。その場合、 [URLSearchParams](https://developer.mozilla.org/ja/docs/Web/API/URLSearchParams) を使って処理します。
13
+
14
+ **例: **
15
+ ```javascript
16
+ const params = { form_id: 1, name: 'あいうえお' };
17
+ const qs = new URLSearchParams(params);
18
+ fetch(`https://example.com?${qs}`).then(・・・
19
+ ```
20
+ ```
21
+ https://example.com?form_id=1&name=%E3%81%82%E3%81%84%E3%81%86%E3%81%88%E3%81%8A
22
+ ```
23
+
24
+ または、サードパーティーのモジュールを借りてくるならば、たとえば
25
+
26
+ - npmjs: [query-string](https://www.npmjs.com/package/query-string)
27
+
28
+ を使って、以下のように書けます。
29
+
30
+ ```javascript
31
+ import queryString from 'query-string'
32
+ ```
33
+ ```javascript
34
+ const qs = queryString.stringify({id: 1, names: ['ほげ', 'ふが']}, {arrayFormat: 'bracket'})
35
+ fetch(`https://example.com?${qs}`).then(・・・
36
+ ```
37
+ ```
38
+ https://example.com/?id=1&names[]=%E3%81%BB%E3%81%92&names[]=%E3%81%B5%E3%81%8C
39
+ ```
40
+
41
+ さらに、クエリパラメータの前のベースとなるURL自体もエンコードしなければならない(日本語のドメインを含むものなど。)のであれば、think49さんの回答にあるとおり [URL](https://developer.mozilla.org/ja/docs/Web/API/URL) の使用をおすすめします。