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

新しいFetch APIを使用しようとしています：

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

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

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

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

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

2017年3月の更新：

URL.searchParamsのサポートがChrome 51に正式に導入されましたが、他のブラウザでは依然としてポリフィルが必要です。

公式のクエリパラメータと仕事への道は、URLにそれらを追加するだけです。仕様から、これは例です：

var url = new URL("https://geo.example.org/api"),
    params = {lat:35.696233, long:139.570431}
Object.keys(params).forEach(key => url.searchParams.append(key, params[key]))
fetch(url).then(/* … */)

ただし、ChromeがsearchParams（執筆時点で）URL のプロパティをサポートしているかどうかは不明なので、サードパーティのライブラリまたは独自のソリューションを使用することをお勧めします。

2018年4月の更新：

URLSearchParamsコンストラクターを使用すると、2D配列またはオブジェクトを割り当て、url.searchすべてのキーをループして追加する代わりに、それに割り当てるだけで済みます。

var url = new URL('https://sl.se')

var params = {lat:35.696233, long:139.570431} // or:
var params = [['lat', '35.696233'], ['long', '139.570431']]

url.search = new URLSearchParams(params).toString();

fetch(url)

URLSearchParamsサイドノート：NodeJSでも利用可能

const { URL, URLSearchParams } = require('url');

let params = {
  "param1": "value1",
  "param2": "value2"
};

let query = Object.keys(params)
             .map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
             .join('&');

let url = 'https://example.com/search?' + query;

fetch(url)
  .then(data => data.text())
  .then((text) => {
    console.log('request succeeded with JSON response', text)
  }).catch(function (error) {
    console.log('request failed', error)
  });

すでに答えたように、これはfetchまだ仕様では-APIでは不可能です。しかし、私は注意しなければなりません：

にいる場合はnode、querystringパッケージがあります。オブジェクト/クエリ文字列を文字列化/解析できます：

var querystring = require('querystring')
var data = { key: 'value' }
querystring.stringify(data) // => 'key=value'

...次に、リクエストするURLに追加するだけです。

ただし、上記の問題は、常に疑問符（?）を付加する必要があることです。したがって、別の方法はparse、nodes urlパッケージのメソッドを使用して、次のようにすることです。

var url = require('url')
var data = { key: 'value' }
url.format({ query: data }) // => '?key=value'

https://nodejs.org/api/url.html#url_url_format_urlobjを参照queryしてください

内部的にはこれだけなので、これは可能です。

search = obj.search || (
    obj.query && ('?' + (
        typeof(obj.query) === 'object' ?
        querystring.stringify(obj.query) :
        String(obj.query)
    ))
) || ''

簡潔なES6アプローチ：

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

URLSearchParamの toString（）関数は、クエリ引数をURLに追加できる文字列に変換します。この例では、toString（）は、URLと連結されるときに暗黙的に呼び出されます。

IEはこの機能をサポートしていませんが、利用可能なポリフィルがあります。

クエリ文字列#stringifyから使用できます

import { stringify } from 'query-string';

fetch(`https://example.org?${stringify(params)}`)

多分これはより良いです：

const withQuery = require('with-query');

fetch(withQuery('https://api.github.com/search/repositories', {
  q: 'query',
  sort: 'stars',
  order: 'asc',
}))
.then(res => res.json())
.then((json) => {
  console.info(json);
})
.catch((err) => {
  console.error(err);
});

encodeQueryString —オブジェクトをクエリ文字列パラメータとしてエンコードします

/**
 * Encode an object as url query string parameters
 * - includes the leading "?" prefix
 * - example input — {key: "value", alpha: "beta"}
 * - example output — output "?key=value&alpha=beta"
 * - returns empty string when given an empty object
 */
function encodeQueryString(params) {
    const keys = Object.keys(params)
    return keys.length
        ? "?" + keys
            .map(key => encodeURIComponent(key)
                + "=" + encodeURIComponent(params[key]))
            .join("&")
        : ""
}

encodeQueryString({key: "value", alpha: "beta"})
 //> "?key=value&alpha=beta"

私はこれが絶対に明白なことを述べていることを知っていますが、これは答えの中で最も簡単なので、これを答えとして追加する価値があると感じています。

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

テンプレートリテラルもここでは有効なオプションであり、いくつかの利点があります。

生の文字列、数値、ブール値などを含めることができます。

    let request = new Request(`https://example.com/?name=${'Patrick'}&number=${1}`);

変数を含めることができます。

    let request = new Request(`https://example.com/?name=${nameParam}`);

ロジックと関数を含めることができます。

    let request = new Request(`https://example.com/?name=${nameParam !== undefined ? nameParam : getDefaultName() }`);

より大きなクエリ文字列のデータを構造化する限り、文字列に連結された配列を使用するのが好きです。他の方法よりも理解しやすいと思います。

let queryString = [
  `param1=${getParam(1)}`,
  `param2=${getParam(2)}`,
  `param3=${getParam(3)}`,
].join('&');

let request = new Request(`https://example.com/?${queryString}`, {
  method: 'GET'
});

NativescriptのfetchModuleを操作していて、文字列操作を使用して自分のソリューションを見つけました。クエリ文字列を少しずつURLに追加します。以下は、クエリがjsonオブジェクトとして渡される例です（クエリ= {order_id：1}）：

function performGetHttpRequest(fetchLink='http://myapi.com/orders', query=null) {
    if(query) {
        fetchLink += '?';
        let count = 0;
        const queryLength = Object.keys(query).length;
        for(let key in query) {
            fetchLink += key+'='+query[key];
            fetchLink += (count < queryLength) ? '&' : '';
            count++;
        }
    }
    // link becomes: 'http://myapi.com/orders?order_id=1'
    // Then, use fetch as in MDN and simply pass this fetchLink as the url.
}

私はこれを複数のクエリパラメータでテストしましたが、魅力的に機能しました:)これが誰かの助けになることを願っています。

var paramsdate = 01 + '％s' + 12 + '％s' + 2012 + '％s';

request.get（ " https://www.exampleurl.com?fromDate= " + paramsDate;