Настройка строки запроса с использованием запроса Fetch GET

Я пытаюсь использовать новый API Fetch: 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. В идеале я хочу, чтобы сделать запрос GET на URL-адрес, например:

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

В jQuery я мог бы сделать это, передав {order_id: 1} как параметр данных $.ajax() . Есть ли эквивалентный способ сделать это с помощью нового API-интерфейса Fetch?

Обновление марта 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} // or: var params = [['lat', '35.696233'], ['long', '139.570431']] url.search = new URLSearchParams(params) fetch(url) 

Sidenote: URLSearchParams также доступен в NodeJS

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

Как уже было сказано, это пока не возможно с помощью fetch -API. Но я должен отметить:

Если вы находитесь на node , есть пакет querystring . Он может создавать / разбирать объекты / querystrings:

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

… затем просто добавьте его к URL-адресу, чтобы запросить его.


Однако проблема с вышеизложенным заключается в том, что вам всегда нужно добавить знак вопроса ( ? ). Таким образом, другой способ – использовать метод parse из пакета url node и сделать это следующим образом:

 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) )) ) || '' 
 let params = { "param1": "value1", "param2": "value2" } let esc = encodeURIComponent let query = Object.keys(params) .map(k => esc(k) + '=' + esc(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) }) 

Я знаю, что это указывает на абсолютное очевидное, но я считаю, что стоит добавить это как ответ, поскольку это самый простой из всех:

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

Может быть, это лучше:

 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); }); 

Вы можете использовать #stringify из строки запроса

 import { stringify } from 'query-string'; fetch(`https://example.org?${stringify(params)}`) 

Литералы шаблонов также являются допустимым вариантом и предоставляют несколько преимуществ.

Вы можете включать необработанные строки, числа, логические значения и т. Д .:

  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' }); 

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" 
  • Преобразование эпохи UTC в локальную дату
  • Как я могу разобрать строку с разделителем запятой на число?
  • Как работает подкачка в API-интерфейсе facebook javascript?
  • Как вы используете WGET для зеркального отображения уровня сайта 1, восстановления JS, ресурсов CSS, включая изображения CSS?
  • Какова мотивация приведения символов в ES6?
  • Как включить внешний файл js в Angular 4 и функцию вызова от углового до js
  • Контекст функции JavaScript Неправильный
  • Как использовать событие jQuery для выгрузки файлов, загруженных с рабочего стола?
  • Где поставить данные модели и поведение?
  • Получение значения элемента DOM с использованием чистого JavaScript
  • Javascript get Свойство объекта Имя
  • Давайте будем гением компьютера.