Встановлення рядка запиту за допомогою 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 року:

Підтримка 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).toString();

fetch(url)

Sidenote: 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метод із 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)
    ))
) || ''

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

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

Функція toString () URLSearchParams перетворить аргументи запиту в рядок, який можна додати до URL-адреси. У цьому прикладі toString () викликається неявно, коли він об'єднується з URL-адресою.

IE не підтримує URLSearchParams, але є поліфіли .

Якщо ви використовуєте вузол, ви можете знайти URLSearchParams як глобальний об’єкт з версії 10. У більш старій версії ви можете знайти його require('url').URLSearchParamsнатомість. Фактичний API вибору не є частиною вузла, і його потрібно додати через пакет, як -от вилучення вузлів .

Ви можете використовувати #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'
});

Якраз працював з fetchesModule 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;