Fetch GET अनुरोध का उपयोग करके क्वेरी स्ट्रिंग सेट करना

Question

मैं नई 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?

Answer 1

अपडेट मार्च 2017:

URL.searchParams समर्थन आधिकारिक तौर पर क्रोम 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 searchParamsURL की संपत्ति (लिखने के समय) का समर्थन करता है, इसलिए आप तृतीय पक्ष लाइब्रेरी या रोल-योर-सॉल्यूशन का उपयोग करना चाहते हैं ।

अप्रैल 2018 अपडेट करें:

URLSearchParams कंस्ट्रक्टर के उपयोग के साथ आप एक 2 डी सरणी या ऑब्जेक्ट को असाइन कर सकते हैं और केवल यह बता सकते हैं कि 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)

सिडेनोट: NodeJS URLSearchParamsमें भी उपलब्ध है

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

Comments

वहाँ भी है डेवलपर .mozilla.org/en-US/docs/Web/API/URLSearchParams/…, इस लेखन के रूप में यह अभी भी कल्पना के माध्यम से अपना रास्ता बना रहा है, और अभी तक अच्छी तरह से समर्थित नहीं है। और एपीआई जेएस की तुलना में जावा की तरह अधिक है। : /

— ericsoco

इंटरफ़ेस के लिए समर्थन के लिए caniuse.com/#feat=urlsearchparams देखें URLSearchParams; मैं मानूंगा (हालांकि मैं 100% निश्चित नहीं हूं) कि लाल रंग के ब्राउज़र बिल्कुल ऐसे ब्राउज़र हैं जिनके लिए URLऑब्जेक्ट्स में .searchParamsसंपत्ति नहीं होगी । महत्वपूर्ण बात, एज का अभी भी समर्थन नहीं है।

— मार्क अमेरी

प्रलेखन से: "ध्यान दें कि URLSearchParams उदाहरण का उपयोग करना पदावनत है, जल्द ही ब्राउज़र केवल init के लिए एक USVString का उपयोग करेंगे।" स्रोत: developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/…

— pakman

new URLSearchParamsArrayगुणों के साथ सही ढंग से काम करने के लिए प्रतीत नहीं होता है । मुझे उम्मीद थी कि यह संपत्ति को बदलने के array: [1, 2]लिए array[]=1&array[]=2, लेकिन इसे परिवर्तित कर दिया array=1,2। मैन्युअल रूप से इसकी appendविधि का उपयोग करने से परिणाम होता है array=1&array=2, लेकिन मुझे परम ऑब्जेक्ट पर पुनरावृति करना होगा, और केवल सरणी प्रकारों के लिए करना होगा, बहुत एर्गोनोमिक नहीं।

— एरंड्रोस

यह वास्तव में त्रुटि में जोड़ा गया था :) github.com/mdn/sprints/issues/2856

— CodingIntrigue

Answer 2

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

Answer 3

जैसा कि पहले ही उत्तर दिया जा चुका है, यह प्रति-संभव नहीं है 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

यह संभव है, क्योंकि यह आंतरिक रूप से बस यही करता है :

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

Answer 4

एक संक्षिप्त ES6 दृष्टिकोण:

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

URLSearchParams का toString () फ़ंक्शन क्वेरी को एक स्ट्रिंग में बदल देगा जिसे URL पर जोड़ा जा सकता है। इस उदाहरण में, URL के साथ जुड़ने पर toString () को संक्षेप में कहा जाता है।

IE URLSearchParams का समर्थन नहीं करता है, लेकिन पॉलीफ़िल उपलब्ध हैं।

यदि नोड का उपयोग कर रहे हैं, तो आप URLSearchParams को संस्करण 10 के बाद से एक वैश्विक वस्तु के रूप में पा सकते हैं। पुराने संस्करण में आप इसे require('url').URLSearchParamsइसके बजाय पा सकते हैं । वास्तविक भ्रूण एपीआई नोड का हिस्सा नहीं है और इसे नोड-भ्रूण की तरह एक पैकेज के माध्यम से जोड़ा जाना चाहिए ।

Answer 5

आप क्वेरी स्ट्रिंग#stringify से उपयोग कर सकते हैं

import { stringify } from 'query-string';

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

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

Answer 7

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"

Answer 8

मुझे पता है कि यह बिल्कुल स्पष्ट है, लेकिन मुझे लगता है कि यह इसे एक जवाब के रूप में जोड़ने लायक है क्योंकि यह सबसे सरल है:

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

Comments

यह योग्य है कि यह केवल पूर्णांक प्रकारों के साथ मज़बूती से काम करता है। यदि आप तार का उपयोग करते हैं, विशेष रूप से उपयोगकर्ता-आपूर्ति वाले (जैसे खोज मापदंड) तो आपको स्ट्रिंग से बचना होगा, अन्यथा आप अजीब परिणाम प्राप्त कर सकते हैं यदि वर्ण पसंद करते हैं /, +या &स्ट्रिंग में दिखाई देते हैं।

— मालवीनस

अनुरोध ऑब्जेक्ट का उपयोग करने से मदद मिल सकती है, खासकर यदि आप अनुरोध का निर्माण करने के लिए फ़ंक्शन का उपयोग करना चाहते हैं और फिर उसे लाने के लिए () कॉल करें, लेकिन मुझे नहीं लगता कि इसका उपयोग करना "पूर्ण स्पष्ट" है। इसके अलावा, कॉन्फ़िगर विकल्पों के ऑब्जेक्ट शाब्दिक में यूआरएल निर्दिष्ट नहीं किया जाना चाहिए; इसे अनुरोध निर्माता ( डेवलपर . m.millailla.org/en-US/docs/Web/API/Request/Request ) के लिए 1 पैरामीटर के रूप में अलग से पास किया जाना चाहिए ।

— Gen1-1

Answer 9

टेम्पलेट शाब्दिक भी यहाँ एक मान्य विकल्प है, और कुछ लाभ प्रदान करते हैं।

आप कच्चे तार, संख्या, बूलियन मान आदि शामिल कर सकते हैं:

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

Comments

आपको इस विधि से बहुत सावधान रहना होगा क्योंकि यह पहले स्ट्रिंग से URL-एस्केप नहीं करता है। इसलिए यदि आपको एक वैरिएबल मिलता है जिसमें एक चरित्र होता है जैसे +या &फिर यह अपेक्षा के अनुरूप काम नहीं करेगा और आप जो सोचा था, उसके लिए विभिन्न मापदंडों और मूल्यों के साथ समाप्त होगा।

— मालविनस

Answer 10

सिर्फ मूल निवासी के भ्रूण के साथ काम कर रहा था और स्ट्रिंग हेरफेर का उपयोग करके मेरे अपने समाधान का अनुमान लगाया। 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.
}

मैंने कई क्वेरी मापदंडों पर इसका परीक्षण किया और यह एक आकर्षण की तरह काम किया :) उम्मीद है कि यह किसी की मदद करता है।

Comments

यह एक अच्छा उदाहरण है कि आपको तीसरे पक्ष के कामों का उपयोग क्यों करना चाहिए - आपका कोड ठीक काम कर सकता है, लेकिन किसी ने पहले से ही इसे बेहतर किया है

— Refaelio

Answer 11

var paramsdate = 01 + '% s' + 12 + '% s' + 2012 + '% s';

request.get (" https://www.exampleurl.com?fromDate= " + paramsDate;