私は新しいFetch APIを使用しようとしています。 https://developer.mozilla.org/en/docs/Web/API/Fetch_API
私はこのようなGETリクエストをしています:
var request = new Request({
url: 'http://myapi.com/orders',
method: 'GET'
});
fetch(request);
しかし、GETリクエストにクエリ文字列を追加する方法はわかりません。理想的には、次のようなURLにGETリクエストを送信できるようにしたいです。
'http://myapi.com/orders?order_id=1'
JQueryでは、$.ajax()
のdata
パラメータとして{order_id: 1}
を渡すことでこれを実現できました。新しいFetch APIを使用してそれを行うための同等の方法はありますか?
更新2017年3月:
RL.searchParams サポートは正式にChrome 51に上陸しました、しかし他のブラウザはまだ polyfill を必要とします。
クエリパラメータを扱う公式の方法は、単に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がURLのsearchParams
プロパティを(執筆時点で)サポートしているかどうかわからないので、 サードパーティライブラリ または roll-your-own)のいずれかを使用することをお勧めします。ソリューション 。
2018年4月更新:
RLSearchParamsコンストラクタ を使用すると、すべてのキーをループして追加する代わりに、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)
fetch(url)
サイドノート:URLSearchParams
はNodeJSでも利用可能です
const { URL, URLSearchParams } = require('url');
すでに回答したように、これは仕様によってfetch
- APIではまだ不可能です。しかし私は注意しなければならない:
node
を使用している場合は、querystring
パッケージがあります。それはオブジェクト/クエリ文字列を文字列化/解析することができます。
var querystring = require('querystring')
var data = { key: 'value' }
querystring.stringify(data) // => 'key=value'
...それからリクエストするURLにそれを追加するだけです。
しかし、上記の問題は疑問符(?
)をつける必要があるということです。したがって、別の方法は、ノードparse
パッケージから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
を参照してください。
これは可能です、内部的にそうであるように this :
search = obj.search || (
obj.query && ('?' + (
typeof(obj.query) === 'object' ?
querystring.stringify(obj.query) :
String(obj.query)
))
) || ''
let params = {
"param1": "value1",
"param2": "value2"
}
let query = Object.keys(params)
.map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
.join('&');
let url = 'https:example.com//xyz.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)
})
/**
* 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"
クエリ文字列 から#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);
});
私はこれが絶対的な自明性を述べていることを知っていますが、それがすべての中で最も単純なので答えとしてこれを追加する価値があると思います:
var orderId = 1;
var request = new Request({
url: 'http://myapi.com/orders?order_id=' + 1,
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'
});