Обновление март 2017 г .:
Поддержка 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:
С помощью конструктора URLSearchParams вы можете назначить 2D-массив или объект и просто назначить его url.search
вместо того, чтобы перебирать все ключи и добавлять их.
var url = new URL('https://sl.se')
var params = {lat:35.696233, long:139.570431}
var params = [['lat', '35.696233'], ['long', '139.570431']]
url.search = new URLSearchParams(params).toString();
fetch(url)
Sidenote: URLSearchParams
также доступно в NodeJS
const { URL, URLSearchParams } = require('url');
URLSearchParams
интерфейса; Я бы предположил (хотя я не уверен на 100%), что браузеры, выделенные красным, это именно те браузеры, для которыхURL
объекты не будут иметь.searchParams
свойства. Важно отметить, что Edge по-прежнему не имеет поддержки.new URLSearchParams
похоже, не работает правильно соArray
свойствами. Я ожидал, что он преобразует свойствоarray: [1, 2]
вarray[]=1&array[]=2
, но преобразовал вarray=1,2
. Ручное использование этогоappend
метода действительно приводитarray=1&array=2
, но мне пришлось бы перебирать объект params и делать это только для типов массивов, что не очень эргономично.Краткий подход ES6:
fetch('https://example.com?' + new URLSearchParams({ foo: 'value', bar: 2, }))
Функция URLSearchParams toString () преобразует аргументы запроса в строку, которую можно добавить к URL-адресу. В этом примере toString () вызывается неявно при объединении с URL-адресом. Вероятно, вы захотите вызвать toString () явно, чтобы улучшить читаемость.
IE не поддерживает URLSearchParams (или выборки), но есть polyfills доступны .
Если вы используете узел, вы можете добавить API выборки через такой пакет, как node-fetch . URLSearchParams поставляется с node и может быть найден как глобальный объект, начиная с версии 10. В более старой версии вы можете найти его по адресу
require('url').URLSearchParams
.источник
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
метод изurl
пакета узлов и сделать это следующим образом:var url = require('url') var data = { key: 'value' } url.format({ query: data }) // => '?key=value'
См
query
на https://nodejs.org/api/url.html#url_url_format_urlobjЭто возможно, так как внутри он делает следующее :
search = obj.search || ( obj.query && ('?' + ( typeof(obj.query) === 'object' ? querystring.stringify(obj.query) : String(obj.query) )) ) || ''
источник
Вы можете использовать
#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' });
источник
+
или,&
тогда она не будет работать должным образом, и вы получите параметры и значения, отличные от того, что вы думали.Решение без внешних пакетов
для выполнения запроса GET с использованием API выборки я работал над этим решением, которое не требует установки пакетов.
это пример вызова API карты Google
// encode to scape spaces const esc = encodeURIComponent; const url = 'https://maps.googleapis.com/maps/api/geocode/json?'; const params = { key: "asdkfñlaskdGE", address: "evergreen avenue", city: "New York" }; // this line takes the params object and builds the query string const query = Object.keys(params).map(k => `${esc(k)}=${esc(params[k])}`).join('&') const res = await fetch(url+query); const googleResponse = await res.json()
не стесняйтесь копировать этот код и вставлять его в консоль, чтобы увидеть, как он работает !!
сгенерированный URL-адрес выглядит примерно так:
https://maps.googleapis.com/maps/api/geocode/json?key=asdkf%C3%B1laskdGE&address=evergreen%20avenue&city=New%20York
это то, что я искал, прежде чем решил это написать, наслаждайтесь: D
источник
Просто работал с fetchModule Nativescript и выяснил свое собственное решение, используя манипуляции со строками. Добавляйте строку запроса к URL-адресу по крупицам. Вот пример, в котором запрос передается как объект json (query = {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;
источник