페치 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}는 AS data의 매개 변수 $.ajax(). 새로운 것과 동등한 방법이 Fetch API있습니까?

2017 년 3 월 업데이트 :

URL.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 searchParams에서 URL 작성 기능을 지원하는지 확실하지 않으므로 (제작 시점에) 타사 라이브러리 또는 롤업 솔루션을 사용할 수 있습니다.

2018 년 4 월 업데이트 :

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)

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

URLSearchParams의 toString () 함수는 쿼리 인수를 URL에 추가 할 수있는 문자열로 변환합니다. 이 예제에서 toString ()은 URL과 연결될 때 암시 적으로 호출됩니다.

IE는 URLSearchParams를 지원하지 않지만 사용 가능한 폴리 필이 있습니다.

노드를 사용하는 경우 버전 10 이후 URLSearchParams를 전역 객체로 찾을 수 있습니다. 이전 버전에서는 require('url').URLSearchParams대신 URL을 찾을 수 있습니다 . 실제 페치 API는 노드의 일부가 아니며 node-fetch 와 같은 패키지를 통해 추가해야합니다 .

쿼리 문자열#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 — 객체를 querystring 매개 변수로 인코딩

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

Nativescript의 fetchModule로 작업하고 문자열 조작을 사용하여 내 솔루션을 알아 냈습니다. 쿼리 문자열을 비트 단위로 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;