मैं Fetch का उपयोग करके x-www-form-urlencoded अनुरोध कैसे पोस्ट कर सकता हूं?

Question 1

मेरे पास कुछ पैरामीटर हैं, जिन्हें मैं अपने सर्वर पर पोस्ट-एनकोडेड करना चाहता हूं:

{
    'userName': 'test@gmail.com',
    'password': 'Password!',
    'grant_type': 'password'
}

मैं इस तरह अपना अनुरोध (वर्तमान में मापदंडों के बिना) भेज रहा हूं

var obj = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
  },
};
fetch('https://example.com/login', obj)
  .then(function(res) {
    // Do stuff with result
  });

मैं अनुरोध में फ़ॉर्म-एन्कोड किए गए पैरामीटर कैसे शामिल कर सकता हूं?

Question 2

फॉर्म-एनकोडेड POST अनुरोध अपलोड करने के लिए, मैं फॉर्मडाटा ऑब्जेक्ट का उपयोग करने की सलाह देता हूं ।

उदाहरण कोड:

var params = {
    userName: 'test@gmail.com',
    password: 'Password!',
    grant_type: 'password'
};

var formData = new FormData();

for (var k in params) {
    formData.append(k, params[k]);
}

var request = {
    method: 'POST',
    headers: headers,
    body: formData
};

fetch(url, request);

Question 3

आपको अपने आप को x-www-form-urlencoded पेलोड को एक साथ रखना होगा, जैसे:

var details = {
    'userName': 'test@gmail.com',
    'password': 'Password!',
    'grant_type': 'password'
};

var formBody = [];
for (var property in details) {
  var encodedKey = encodeURIComponent(property);
  var encodedValue = encodeURIComponent(details[property]);
  formBody.push(encodedKey + "=" + encodedValue);
}
formBody = formBody.join("&");

fetch('https://example.com/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
  },
  body: formBody
})

ध्यान दें कि यदि आप fetchप्रतिक्रियाशील मूल के बजाय एक (पर्याप्त रूप से आधुनिक) ब्राउज़र में उपयोग कर रहे थे , तो आप इसके बजाय एक URLSearchParamsऑब्जेक्ट बना सकते हैं और इसका उपयोग शरीर के रूप में कर सकते हैं, क्योंकि Fetch Standard यह बताता है कि यदि bodyकोई URLSearchParamsवस्तु है तो इसे क्रमबद्ध किया जाना चाहिए application/x-www-form-urlencoded। हालाँकि, आप इसे रिएक्ट नेटिव में नहीं कर सकते क्योंकि रिएक्टिव नेटिव लागू नहीं होता हैURLSearchParams ।

Question 4

और भी सरल:

body: new URLSearchParams({
      'userName': 'test@gmail.com',
      'password': 'Password!',
      'grant_type': 'password'
    }),

डॉक्स: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch

Question 5

उपयोग URLSearchParams

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

var data = new URLSearchParams();
data.append('userName', 'test@gmail.com');
data.append('password', 'Password');
data.append('grant_type', 'password');

Question 6

बस यही किया था और UrlSearchParams ने चाल चली थी यहाँ मेरा कोड है अगर यह किसी की मदद करता है

import 'url-search-params-polyfill';
const userLogsInOptions = (username, password) => {



// const formData = new FormData();
  const formData = new URLSearchParams();
  formData.append('grant_type', 'password');
  formData.append('client_id', 'entrance-app');
  formData.append('username', username);
  formData.append('password', password);
  return (
    {
      method: 'POST',
      headers: {
        // "Content-Type": "application/json; charset=utf-8",
        "Content-Type": "application/x-www-form-urlencoded",
    },
      body: formData.toString(),
    json: true,
  }
  );
};


const getUserUnlockToken = async (username, password) => {
  const userLoginUri = `${scheme}://${host}/auth/realms/${realm}/protocol/openid-connect/token`;
  const response = await fetch(
    userLoginUri,
    userLogsInOptions(username, password),
  );
  const responseJson = await response.json();
  console.log('acces_token ', responseJson.access_token);
  if (responseJson.error) {
    console.error('error ', responseJson.error);
  }
  console.log('json ', responseJson);
  return responseJson.access_token;
};

Question 7

*/ import this statement */
import qs from 'querystring'

fetch("*your url*", {
            method: 'POST',
            headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'},
            body: qs.stringify({ 
                username: "akshita",
                password: "123456",
            })
    }).then((response) => response.json())
      .then((responseData) => {
         alert(JSON.stringify(responseData))
    })

Npm i querystring --save का उपयोग करने के बाद यह ठीक काम करता है।

Question 8

var details = {
    'userName': 'test@gmail.com',
    'password': 'Password!',
    'grant_type': 'password'
};

var formBody = [];
for (var property in details) {
  var encodedKey = encodeURIComponent(property);
  var encodedValue = encodeURIComponent(details[property]);
  formBody.push(encodedKey + "=" + encodedValue);
}
formBody = formBody.join("&");

fetch('http://identity.azurewebsites.net' + '/token', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  body: formBody
})

यह मेरे लिए बहुत उपयोगी है और बिना किसी त्रुटि के काम करता है

refrence: https://gist.github.com/milon87/f391e54e64e32e1626235d4dc4d16dc8

Question 9

महज प्रयोग करें

import  qs from "qs";
 let data = {
        'profileId': this.props.screenProps[0],
        'accountId': this.props.screenProps[1],
        'accessToken': this.props.screenProps[2],
        'itemId': this.itemId
    };
    return axios.post(METHOD_WALL_GET, qs.stringify(data))

Question 10

JQuery का उपयोग करने की आवश्यकता नहीं है, querystringया मैन्युअल रूप से पेलोड को इकट्ठा करना है। URLSearchParamsजाने के लिए एक रास्ता है और यहाँ पूर्ण अनुरोध उदाहरण के साथ सबसे संक्षिप्त उत्तरों में से एक है:

fetch('https://example.com/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  body: new URLSearchParams({
    'param': 'Some value',
    'another_param': 'Another value'
  })
})
  .then(res => {
    // Do stuff with the result
  });

हां, आप इसके बजाय एक्सियोस या जो भी आप चाहते हैं, का उपयोग कर सकते हैं fetch।

PS URLSearchParamsIE में समर्थित नहीं है।

Question 11

बस शरीर को निम्नलिखित के रूप में सेट करें

var reqBody = "username="+username+"&password="+password+"&grant_type=password";

फिर

fetch('url', {
      method: 'POST',
      headers: {
          //'Authorization': 'Bearer token',
          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
      },
      body: reqBody
  }).then((response) => response.json())
      .then((responseData) => {
          console.log(JSON.stringify(responseData));
      }).catch(err=>{console.log(err)})

Question 12

मूल उदाहरण में आपके पास एक transformRequestफ़ंक्शन है जो ऑब्जेक्ट को एन्कोडेड डेटा में कनवर्ट करता है।

संशोधित उदाहरण में आपने वह जगह ले ली है JSON.stringifyजिसके साथ एक वस्तु को JSON में परिवर्तित करता है।

आपके पास दोनों मामलों में आप दोनों मामलों में फ़ॉर्म एन्कोडेड डेटा भेजने का दावा'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' कर रहे हैं ।

इसके बजाय अपने फ़ॉर्म एन्कोडिंग फ़ंक्शन का उपयोग करें JSON.stringify।

पुनः अपडेट करें:

अपने पहले fetchउदाहरण में, आप bodyJSON मान सेट करते हैं ।

अब आपने एक फॉर्म एनकोडेड संस्करण बनाया है, लेकिन bodyउस मूल्य को सेट करने के बजाय , आपने एक नई ऑब्जेक्ट बनाई है और उस ऑब्जेक्ट की संपत्ति के रूप में फॉर्म एनकोडेड डेटा सेट किया है।

वह अतिरिक्त वस्तु न बनाएं। बस के लिए अपने मूल्य निर्दिष्ट body।

Question 13

यदि आप JQuery का उपयोग कर रहे हैं, यह भी काम करता है ..

fetch(url, {
      method: 'POST', 
      body: $.param(data),
      headers:{
        'Content-Type': 'application/x-www-form-urlencoded'
      }
})

Question 14

युक्ति के अनुसार , उपयोग करने encodeURIComponentसे आपको एक अनुरूप क्वेरी नहीं मिलेगी। य़ह कहता है:

नियंत्रण नाम और मूल्य बच गए हैं। अंतरिक्ष वर्णों को प्रतिस्थापित किया जाता है+ , और फिर आरक्षित वर्णों को [RFC1738], खंड 2.2 में वर्णित किया जाता है, गैर-अल्फ़ान्यूमेरिक वर्णों द्वारा प्रतिस्थापित किया जाता है %HH, एक प्रतिशत चिह्न और वर्ण के ASCII कोड का प्रतिनिधित्व करने वाले दो हेक्साडेसिमल अंकों से बच जाते हैं । लाइन ब्रेक को "सीआर एलएफ" जोड़े (यानी, %0D%0A) के रूप में दर्शाया गया है ।

नियंत्रण नाम / मूल्य दस्तावेज़ में दिखाई देने वाले क्रम में सूचीबद्ध हैं। नाम को मान से अलग किया जाता है =और नाम / मूल्य जोड़े एक दूसरे से अलग होते हैं &।

समस्या यह है, encodeURIComponentरिक्त स्थान होना %20, नहीं +।

फॉर्म-बॉडी को encodeURIComponentअन्य उत्तरों में दिखाए गए तरीकों की विविधता का उपयोग करके कोडित किया जाना चाहिए ।

const formUrlEncode = str => {
  return str.replace(/[^\d\w]/g, char => {
    return char === " " 
      ? "+" 
      : encodeURIComponent(char);
  })
}

const data = {foo: "barßƒ©˙∑  baz", boom: "pow"};

const dataPairs = Object.keys(data).map( key => {
  const val = data[key];
  return (formUrlEncode(key) + "=" + formUrlEncode(val));
}).join("&");

// dataPairs is "foo=bar%C3%9F%C6%92%C2%A9%CB%99%E2%88%91++baz&boom=pow"

Question 15

आप प्रतिक्रिया-मूल-आसान-ऐप का उपयोग कर सकते हैं जो http अनुरोध भेजने और अवरोधन अनुरोध तैयार करने में आसान है।

import { XHttp } from 'react-native-easy-app';

* Synchronous request
const params = {name:'rufeng',age:20}
const response = await XHttp().url(url).param(params).formEncoded().execute('GET');
const {success, json, message, status} = response;


* Asynchronous requests
XHttp().url(url).param(params).formEncoded().get((success, json, message, status)=>{
    if (success){
       this.setState({content: JSON.stringify(json)});
    } else {
       showToast(msg);
    }
});