Fetch GET 요청을 사용하여 쿼리 문자열 설정

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?

간결하고 현대적인 접근법:

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

구조:문자열(예를 들어 URL)이 URLearchParams 인스턴스와 연결되면 해당 toString() 메서드가 자동으로 호출되어 해당 인스턴스가 문자열 표현으로 변환됩니다.이 문자열은 올바르게 인코딩된 쿼리 문자열입니다.의 자동 호출이toString()너무 마법같아서 이렇게 부르는 게 좋을 것 같아요.fetch('https://...' + new URLSearchParams(...).toString())

쿼리 파라미터를 사용한 fetch 요구의 완전한 예를 다음에 나타냅니다.

// Real example you can copy-paste and play with.
// jsonplaceholder.typicode.com provides a dummy rest-api
// for this sort of purpose.
async function doAsyncTask() {
  const url = (
    'https://jsonplaceholder.typicode.com/comments?' +
    new URLSearchParams({ postId: 1 }).toString()
  );

  const result = await fetch(url)
    .then(response => response.json());

  console.log('Fetched from: ' + url);
  console.log(result);
}

doAsyncTask();

---

사용하고 있는/지원하고 있는 경우

• IE: Internet Explorer는 URLearch Params 또는 fetch를 네이티브로 지원하지 않지만 폴리필을 사용할 수 있습니다.

• 노드: 노드 18에서는 fetch API가 네이티브하게 지원되고 있습니다(17.5버전에서는 이 API는--experimental-fetchflag) 이전 버전에서는 노드 fetch와 같은 패키지를 통해 fetch API를 추가할 수 있습니다.URLearchParams는 Node와 함께 제공되며 버전 10 이후 글로벌오브젝트로 사용할 수 있습니다.이전 버전에서는 다음 사이트에서 찾을 수 있습니다.require('url').URLSearchParams.

• 노드 + 타입 스크립트:Node와 TypeScript를 함께 사용하는 경우 몇 가지 기술적 제한으로 인해 TypeScript는 글로벌 URLearchParams에 대한 유형 정의를 제공하지 않습니다.가장 간단한 회피책은 이 파일을url모듈.자세한 내용은 여기를 참조해 주세요.

2017년 3월 갱신:

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이 이 기능을 지원하는지는 확실하지 않습니다.searchParamsURL 속성(쓰기 시)이므로 서드파티 라이브러리 또는 롤유어오운 솔루션을 사용할 수 있습니다.

2018년 4월 갱신:

URLearchParams 컨스트럭터를 사용하면 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는 노드에서도할 수 있습니다.JS

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 nodes (노드로부터의 메서드)url하다

var url = require('url')
var data = { key: 'value' }
url.format({ query: data }) // => '?key=value'

것은, 을 참조하십시오.queryhttps://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)
    ))
) || ''

하시면 됩니다.stringifyquery-string에서 가져옵니다.

import { stringify } from 'query-string';

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

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"

이것이 당연한 것을 말하고 있는 것은 알지만, 그 중에서도 가장 심플하기 때문에, 이것을 대답으로서 추가할 가치가 있다고 생각합니다.

const orderId = 1;
fetch('http://myapi.com/orders?order_id=' + orderId);

어쩌면 이게 더 나을지도 몰라.

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

외부 패키지 없는 솔루션

fetch api를 사용하여 GET 요청을 수행하기 위해 패키지 설치가 필요 없는 이 솔루션에서 작업했습니다.

이것은 구글의 지도 API 호출의 예시입니다.

// 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

템플릿 리터럴도 유효한 옵션이며 몇 가지 이점이 있습니다.

원시 문자열, 숫자, 부울 값 등을 포함할 수 있습니다.

    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 개체로 전달하는 예제입니다(예: 쿼리 = {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;

언급URL : https://stackoverflow.com/questions/35038857/setting-query-string-using-fetch-get-request