javascript प्रतिक्रिया मूल से एक्स-www-form-urlencoded अनुरोध पोस्ट करें




http-post react-native (6)

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

{
    'userName': '[email protected]',
    '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
  }); 

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


आपको स्वयं को एक्स-www-form-urlencoded पेलोड को एक साथ रखना होगा, इस तरह:

var details = {
    'userName': '[email protected]',
    '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 रूप में serialized हो। हालांकि, आप इसे प्रतिक्रियात्मक मूल में नहीं कर सकते क्योंकि प्रतिक्रिया मूल URLSearchParams लागू नहीं करता है


आप ऑब्जेक्ट में फ़ंक्शन जोड़ सकते हैं, ताकि आप JSON को अधिक आसान क्रमबद्ध कर सकें।

Object.prototype.serialize = function () {
  if (!this) return;

  var s = []

  for (var key in this) {
    if (this.hasOwnProperty(key)) {
      s.push(encodeURIComponent(key) + '=' + encodeURIComponent(this[key]))
    }
  }

  return s.join('&')
}

इसका उपयोग करने के लिए, आपको बस लिखना होगा

obj.serialize()

उदाहरण के लिए।

var data = {
  a: 1,
  b: 2,
  c: true
}

fetch('/api_url', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  body: data.serialize() // see the usage here
})

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

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

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

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

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

संशोधित उदाहरण में आपने JSON.stringify साथ इसे बदल दिया है जो किसी ऑब्जेक्ट को जेएसओएन में परिवर्तित करता है।

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

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

पुनः अद्यतन करें:

आपके पहले fetch उदाहरण में, आप body को JSON मान मानते हैं।

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

उस अतिरिक्त वस्तु को न बनाएं। बस अपने मूल्य को body को असाइन करें।


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

उदाहरण कोड:

var params = {
    userName: '[email protected]',
    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);




fetch-api