ফেচ জিইটি অনুরোধ ব্যবহার করে কোয়েরি স্ট্রিং সেট করা হচ্ছে

Question

আমি নতুন ফেচ এপিআই ব্যবহার করার চেষ্টা করছি :

আমি এইভাবে একটি 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 এ অবতীর্ণ হয়েছে, তবে অন্যান্য ব্রাউজারগুলিতে এখনও একটি পলিফিল প্রয়োজন ।

---

সরকারী ক্যোয়ারী পরামিতি সঙ্গে কাজ করার উপায় শুধু তাদের 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(/* … */)

তবে, আমি নিশ্চিত নই যে ক্রোম searchParamsকোনও ইউআরএল (সম্পত্তি লেখার সময়) এর সম্পত্তি সমর্থন করে যাতে আপনি হয় তৃতীয় পক্ষের লাইব্রেরি ব্যবহার করতে পারেন বা নিজের সমাধানটি রোল করতে পারেন ।

এপ্রিল 2018 আপডেট করুন:

ইউআরএল সার্চপ্যারাম কনস্ট্রাক্টর ব্যবহারের সাহায্যে আপনি একটি 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)

সিডনোট: নোডজেএসেও URLSearchParamsউপলব্ধ

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

Comments

এছাড়াও বিকাশকারী.মোজিলা.আর.ইন / ইউএস / ডকস / ওয়েবে / এপিআইএল / ইউআরএলস অনুসন্ধানেরাম / / রয়েছে, এই লেখার পরেও এটি অনুমানের মধ্য দিয়ে চলেছে, এবং এখনও সমর্থনযোগ্য নয়। এবং এপিআই জেএসের চেয়ে জাভার মতো। : /

— এরিকোসো

ইন্টারফেসের জন্য সমর্থনের জন্য caniuse.com/#feat=urlsearchparams দেখুন URLSearchParams; আমি ধরে নেব (যদিও আমি 100% নির্দিষ্ট না) লাল ব্রাউজারগুলিতে ঠিক সেই ব্রাউজারগুলি রয়েছে যার জন্য URLবস্তুর .searchParamsসম্পত্তি থাকবে না not গুরুত্বপূর্ণভাবে, এজটির এখনও সমর্থন নেই।

— মার্ক

ডকুমেন্টেশন থেকে: "নোট করুন যে ইউআরএল সার্চপ্যারামগুলি ব্যবহার করে অবচয় করা হয়েছে; শীঘ্রই ব্রাউজারগুলি আরম্ভের জন্য কেবল একটি ইউএসভিস্ট্রিং ব্যবহার করবে।" সূত্র: ডেভেলপার.মোজিলা.আর.ইন-

— ইউএস

new URLSearchParamsArrayবৈশিষ্ট্যগুলির সাথে সঠিকভাবে কাজ করছে বলে মনে হয় না । আমি সম্পত্তি রূপান্তর করতে আশা array: [1, 2]করতে array[]=1&array[]=2, কিন্তু এটা রূপান্তরিত array=1,2। ম্যানুয়ালি appendএটির পদ্ধতিটি ব্যবহারের ফলস্বরূপ array=1&array=2, তবে আমাকে প্যারাম অবজেক্টের মাধ্যমে পুনরাবৃত্তি করতে হবে, এবং এটি কেবল অ্যারের ধরণের জন্যই করা উচিত, খুব অ্যারগোনমিক নয়।

— ইরানড্রোস

এটি প্রকৃতপক্ষে ত্রুটিতে যুক্ত করা হয়েছিল :) github.com/mdn/sprints/issues/2856

— কোডিংইন্ট্রিগ

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প্যাকেজটি রয়েছে। এটি অবজেক্ট / ক্যোরিস্ট্রিংগুলিকে পার্সিং / পার্স করতে পারে:

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

ইউআরএল সার্চপ্রামের টুস্ট্রিং () ফাংশন ক্যোয়ারী আরোগুলিকে স্ট্রিংয়ে রূপান্তর করবে যা ইউআরএল-এ যুক্ত করা যেতে পারে। এই উদাহরণে, টুস্ট্রিং () স্পষ্টভাবে বলা হয় যখন এটি ইউআরএলের সাথে সংমিশ্রিত হয়।

আইই এই বৈশিষ্ট্যটি সমর্থন করে না, তবে পলিফিলগুলি উপলব্ধ।

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 - ক্যোরিস্ট্রিং প্যারামিটার হিসাবে কোনও বস্তুকে এনকোড করুন

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

এটি কেবলমাত্র পূর্ণসংখ্যার প্রকারের সাথে নির্ভরযোগ্যভাবে কাজ করে এটি যোগ্যতার যোগ্য। আপনি স্ট্রিং, (সন্ধানের বিচার্য বিষয় মত) বিশেষত ব্যবহারকারী-সরবরাহকৃত বেশী ব্যবহার করেন তাহলে তারপর আপনি স্ট্রিং অব্যাহতি আছে, যদি অক্ষর পছন্দ অন্যথায় আপনি বিজোড় ফলাফল পেতে পারেন /, +অথবা &পংক্তি প্রদর্শিত হবে।

— মালভাইনাস

অনুরোধটি অবজেক্টটি ব্যবহার করা সহায়তা করতে পারে, বিশেষত আপনি যদি অনুরোধটি তৈরি করতে কোনও ফাংশন ব্যবহার করতে চান এবং তারপরে আনতে () কলটি দিতে পারেন তবে আমি এটি "পরম সুস্পষ্ট" বলে মনে করি না। এছাড়াও, ইউআরএল কনফিগার বিকল্পগুলির আক্ষরিক অর্থে নির্দিষ্ট করা উচিত নয়; এটা অনুরোধ কন্সট্রাক্টর (1 ম প্যারামিটার হিসাবে আলাদাভাবে পাস করতে হবে developer.mozilla.org/en-US/docs/Web/API/Request/Request )।

— 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

আপনাকে এই পদ্ধতিটি সম্পর্কে খুব সাবধানতা অবলম্বন করতে হবে কারণ এটি প্রথমে ইউআরএল-এড়ায় না। সুতরাং আপনি যদি এমন কোনও ভেরিয়েবল পান যা একটি চরিত্রের মতো থাকে +বা &তারপরে এটি প্রত্যাশার মতো কাজ করবে না এবং আপনি যা ভাবেন তার বিভিন্ন পরামিতি এবং মানগুলি শেষ করবেন।

— মালভাইনাস

Answer 10

স্রেফ নেটিভস্ক্রিপ্টের ফেচমোডুলের সাথে কাজ করছিলাম এবং স্ট্রিং ম্যানিপুলেশন ব্যবহার করে আমার নিজস্ব সমাধান বের করল। ইউআরএলটিতে ক্যোরি স্ট্রিংটি কিছুটা হলেও যুক্ত করুন। এখানে একটি উদাহরণ যেখানে ক্যোয়ারী একটি জসন বস্তু হিসাবে পাস করা হয়েছে (ক্যোরি = = অর্ডার_আইডি: 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

এটি আপনার তৃতীয় পক্ষের libs কেন ব্যবহার করা উচিত তার একটি ভাল উদাহরণ - আপনার কোডটি

— ঠিকঠাকভাবে

Answer 11

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

অনুরোধ .get (" https://www.exampleurl.com?fromDate= " + + প্যারামসেট;