ฉันจะโพสต์คำขอ x-www-form-urlencoded โดยใช้ Fetch ได้อย่างไร

ฉันมีพารามิเตอร์บางอย่างที่ฉันต้องการโพสต์รูปแบบที่เข้ารหัสไปยังเซิร์ฟเวอร์ของฉัน:

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

ฉันจะรวมพารามิเตอร์ที่เข้ารหัสแบบฟอร์มในคำขอได้อย่างไร

สำหรับการอัปโหลดคำขอ POST ที่เข้ารหัสแบบฟอร์มขอแนะนำให้ใช้ออบเจ็กต์FormData

รหัสตัวอย่าง:

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

คุณต้องรวบรวมเพย์โหลด 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ในเบราว์เซอร์ (ที่ทันสมัยเพียงพอ) แทนที่จะเป็น React Native คุณสามารถสร้างURLSearchParamsออบเจ็กต์และใช้เป็นเนื้อความแทนได้เนื่องจากมาตรฐานการดึงข้อมูลระบุว่าหากbodyเป็นURLSearchParamsวัตถุควรทำให้เป็นซีเรียลapplication/x-www-form-urlencodedไลซ์ แต่คุณไม่สามารถทำเช่นนี้ในการตอบสนองพื้นเมืองเพราะตอบสนองพื้นเมืองไม่ใช้URLSearchParams

ง่ายกว่า:

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

เอกสาร: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch

ใช้ 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');

เพิ่งทำสิ่งนี้และ 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;
};

*/ 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 - บันทึกมันใช้งานได้ดี

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

มันมีประโยชน์มากสำหรับฉันและทำงานได้โดยไม่มีข้อผิดพลาดใด ๆ

อ้างอิง: https://gist.github.com/milon87/f391e54e64e32e1626235d4dc4d16dc8

เพียงแค่ใช้

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

ไม่จำเป็นต้องใช้ jQuery querystringหรือประกอบ payload ด้วยตนเอง 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
  });

ใช่คุณสามารถใช้ Axios fetchหรือสิ่งที่คุณต้องการแทน

URLSearchParamsไม่รองรับPS ใน IE

เพียงตั้งค่าร่างกายดังต่อไปนี้

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

ในตัวอย่างเดิมคุณมีtransformRequestฟังก์ชันที่แปลงวัตถุเป็นข้อมูลที่เข้ารหัสแบบฟอร์ม

ในตัวอย่างที่แก้ไขคุณได้แทนที่สิ่งJSON.stringifyที่แปลงออบเจ็กต์เป็น JSON

ในทั้งสองกรณีคุณมี'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'ดังนั้นคุณจึงอ้างว่ากำลังส่งข้อมูลที่เข้ารหัสแบบฟอร์มในทั้งสองกรณี

JSON.stringifyใช้แบบฟอร์มการเข้ารหัสของคุณทำงานแทน

ปรับปรุงใหม่:

ในfetchตัวอย่างแรกคุณตั้งค่าbodyเป็นค่า JSON

ตอนนี้คุณได้สร้างเวอร์ชันเข้ารหัสแบบฟอร์มแล้ว แต่แทนที่จะตั้งค่าbodyให้เป็นค่านั้นคุณได้สร้างอ็อบเจ็กต์ใหม่และตั้งค่าข้อมูลที่เข้ารหัสแบบฟอร์มเป็นคุณสมบัติของอ็อบเจ็กต์นั้น

อย่าสร้างวัตถุพิเศษนั้น bodyเพียงแค่กำหนดค่าของคุณไป

หากคุณใช้ JQuery สิ่งนี้ก็ใช้ได้เช่นกัน ..

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

ตามข้อมูลจำเพาะการใช้encodeURIComponentจะไม่ทำให้คุณมีสตริงการสืบค้นที่สอดคล้องกัน มันระบุ:

1. ชื่อและค่าการควบคุมจะใช้ Escape อักขระ+เว้นวรรคจะถูกแทนที่ด้วยและอักขระที่สงวนไว้จะถูกใช้ Escape ตามที่อธิบายไว้ใน [RFC1738] ส่วนที่ 2.2: อักขระที่ไม่ใช่ตัวเลขและตัวอักษรจะถูกแทนที่ด้วย%HHเครื่องหมายเปอร์เซ็นต์และเลขฐานสิบหกสองหลักที่แสดงรหัส ASCII ของอักขระ เส้นแบ่งจะแสดงเป็นคู่ "CR LF" (กล่าวคือ%0D%0A)
2. ชื่อ / ค่าควบคุมจะแสดงตามลำดับที่ปรากฏในเอกสาร ชื่อนี้จะถูกแยกออกจากค่าโดย=และชื่อ / &ค่าคู่จะแยกออกจากกันโดย

ปัญหาคือ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"

คุณสามารถใช้react-native-easy-appที่ง่ายกว่าในการส่งคำขอ 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);
    }
});