Подтвердить что ты не робот

Настройка строки запроса с использованием запроса 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} в качестве параметра data $.ajax(). Есть ли эквивалентный способ сделать это с помощью нового API Fetch?

4b9b3361

ОТВЕТЫ

Ответ 1

Обновление за март 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-адреса (на момент написания), поэтому вы можете использовать стороннюю библиотеку или roll- Ваше собственное решение.

Обновление от апреля 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).toString();

fetch(url)

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

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

Ответ 2

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

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

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

Это возможно, так как оно внутренне просто this:

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

Ответ 3

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

Ответ 4

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

import { stringify } from 'query-string';

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

Ответ 5

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"

Ответ 6

Возможно, это лучше:

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

Ответ 7

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

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

Ответ 8

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

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

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

Ответ 9

Краткий подход к ES6:

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

URLSearchParam Функция toString() преобразует аргументы запроса в строку, которую можно добавить к URL-адресу. В этом примере toString() вызывается неявно, когда он соединяется с URL-адресом.

IE не поддерживает эту функцию, но есть полифилы.