web-dev-qa-db-ja.com

React NativeのFetchでクエリ文字列を使用してGET

私はこのようなリクエストをしています：

fetch("https://api.parse.com/1/users", {
  method: "GET",
  headers: headers,   
  body: body
})

クエリ文字列パラメーターを渡すにはどうすればよいですか？ URLに追加するだけですか？ docs に例が見つかりませんでした。

reactjsreact-nativefetch
26
Guy

最初の考えは正しかった：URLに追加するだけです。

テンプレート文字列（バックティック）を使用して、クエリへの変数の入力を簡素化できることに注意してください。

const data = {foo:1, bar:2};

fetch(`https://api.parse.com/1/users?foo=${encodeURIComponent(data.foo)}&bar=${encodeURIComponent(data.bar)}`, {
  method: "GET",
  headers: headers,   
})
39
Ben Clayton

簡潔な答え

次のように、URLに値を代入するだけです。

const encodedValue = encodeURIComponent(someVariable);
fetch(`https://example.com/foo?bar=${encodedValue}`);

長い答え

はい、クエリ文字列を自分でURLに追加するだけです。 -do n'tは次のようなURLを作成するだけです。

`https://example.com/foo?bar=${someVariable}`

someVariableに&、=、またはその他の特殊文字が含まれていないことが確実でない限り。

React Nativeの外部でfetchを使用している場合、 URLSearchParams を使用してクエリ文字列パラメーターをエンコードするオプションがあります。ただし、React Native URLSearchParamsはサポートしません 。代わりに、 encodeURIComponent を使用してください。

例えば：

const encodedValue = encodeURIComponent(someVariable);
fetch(`https://example.com/foo?bar=${encodedValue}`);

キーと値のオブジェクトをクエリ文字列にシリアル化する場合、ユーティリティ関数を作成してそれを実行できます。

function objToQueryString(obj) {
  const keyValuePairs = [];
  for (const key in obj) {
    keyValuePairs.Push(encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]));
  }
  return keyValuePairs.join('&');
}

...そして次のように使用します：

const queryString = objToQueryString({
    key1: 'somevalue',
    key2: someVariable,
});
fetch(`https://example.com/foo?${queryString}`);
17
Mark Amery

Mark Amery's の回答に対して小さなリフを行いました。これは最近多くのチームがその要件を持っているように見えるため、Airbnbのeslint定義に合格します。

function objToQueryString(obj) {
  const keyValuePairs = [];
  for (let i = 0; i < Object.keys(obj).length; i += 1) {
    keyValuePairs.Push(`${encodeURIComponent(Object.keys(obj)[i])}=${encodeURIComponent(Object.values(obj)[i])}`);
  }
  return keyValuePairs.join('&');
}
2
ZardozSpeaks

これを処理する私の単純な関数：

/**
 * Get query string
 *
 * @param   {*}   query   query object (any object that Object.entries() can handle)
 * @returns {string}      query string
 */
function querystring(query = {}) {
  // get array of key value pairs ([[k1, v1], [k2, v2]])
  const qs = Object.entries(query)
    // filter pairs with undefined value
    .filter(pair => pair[1] !== undefined)
    // encode keys and values, remove the value if it is null, but leave the key
    .map(pair => pair.filter(i => i !== null).map(encodeURIComponent).join('='))
    .join('&');

  return qs && '?' + qs;
}

querystring({one: '#@$code', two: undefined, three: null, four: 100, 'fi##@ve': 'text'});
// "?one=%23%40%24code&three&four=100&fi%23%23%40ve=text"
querystring({});
// ""
querystring('one')
// "?0=o&1=n&2=e"
querystring(['one', 2, null, undefined]);
// "?0=one&1=2&2" (edited)
1
Ievgen S