Bagaimana cara memposting permintaan x-www-form-urlencoded menggunakan Ambil?

Saya memiliki beberapa parameter yang saya ingin POST dikodekan ke server saya:

{
    'userName': '[email protected]',
    'password': 'Password!',
    'grant_type': 'password'
}

Saya mengirimkan permintaan saya (saat ini tanpa parameter) seperti ini

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

Bagaimana cara menyertakan parameter yang dikodekan formulir dalam permintaan?

Untuk mengunggah permintaan POST Berenkode Formulir, saya merekomendasikan menggunakan objek FormData .

Kode contoh:

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

Anda harus mengumpulkan sendiri muatan x-www-form-urlencoded, seperti ini:

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

Perhatikan bahwa jika Anda menggunakan fetchbrowser (cukup modern), alih-alih React Native, Anda dapat membuat URLSearchParamsobjek dan menggunakannya sebagai badan, karena Standar Pengambilan menyatakan bahwa jika bodyadalah URLSearchParamsobjek maka itu harus diserialkan sebagai application/x-www-form-urlencoded. Namun, Anda tidak dapat melakukan ini di React Native karena React Native tidak diimplementasikanURLSearchParams .

Lebih sederhana lagi:

body: new URLSearchParams({
      'userName': '[email protected]',
      'password': 'Password!',
      'grant_type': 'password'
    }),

Dokumen: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch

Menggunakan URLSearchParams

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

var data = new URLSearchParams();
data.append('userName', '[email protected]');
data.append('password', 'Password');
data.append('grant_type', 'password');

Baru saja melakukan ini dan UrlSearchParams melakukan trik. Ini kode saya jika membantu seseorang

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

Setelah menggunakan npm i querystring - simpan itu berfungsi dengan baik.

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('http://identity.azurewebsites.net' + '/token', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  body: formBody
})

ini sangat membantu saya dan berfungsi tanpa kesalahan

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

Gunakan saja

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

Tidak perlu menggunakan jQuery, querystringatau merakit payload secara manual. URLSearchParamsadalah cara untuk pergi dan inilah salah satu jawaban paling ringkas dengan contoh permintaan lengkap:

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

Ya, Anda dapat menggunakan Axios atau apa pun yang Anda inginkan fetch.

PS URLSearchParamstidak didukung di IE.

Atur saja bodinya sebagai berikut

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

kemudian

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

Dalam contoh asli Anda memiliki transformRequestfungsi yang mengonversi objek menjadi data yang dikodekan formulir.

Dalam contoh yang direvisi Anda telah mengganti JSON.stringifyyang mengonversi objek menjadi JSON.

Dalam kedua kasus yang Anda miliki 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'sehingga Anda mengklaim mengirim data yang dikodekan Formulir dalam kedua kasus.

Gunakan fungsi Pengkodean Formulir Anda, bukan JSON.stringify.

Pembaruan ulang:

Dalam fetchcontoh pertama Anda, Anda menyetel bodymenjadi nilai JSON.

Sekarang Anda telah membuat versi yang dikodekan formulir, tetapi alih-alih menyetel bodyke nilai itu, Anda telah membuat objek baru dan menyetel data yang dikodekan formulir sebagai properti objek itu.

Jangan buat objek ekstra itu. Tetapkan saja nilai Anda ke body.

Jika Anda menggunakan JQuery, ini juga berfungsi ..

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

Menurut spesifikasi , menggunakan encodeURIComponenttidak akan memberi Anda string kueri yang sesuai. Ini menyatakan:

1. Nama dan nilai kontrol di-escape. Karakter spasi diganti oleh+ , dan karakter yang dicadangkan dikeluarkan seperti yang dijelaskan di [RFC1738], bagian 2.2: Karakter non-alfanumerik diganti dengan %HH, tanda persen dan dua digit heksadesimal yang mewakili kode ASCII dari karakter tersebut. Jeda baris direpresentasikan sebagai pasangan "CR LF" (yaitu, %0D%0A).
2. Nama / nilai kontrol dicantumkan dalam urutan kemunculannya di dokumen. Nama dipisahkan dari nilai oleh =dan pasangan nama / nilai dipisahkan satu sama lain oleh &.

Masalahnya adalah, encodeURIComponentmengkodekan spasi menjadi %20, bukan +.

Formulir-isi harus diberi kode menggunakan variasi encodeURIComponentmetode yang ditunjukkan pada jawaban lain.

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"

Anda dapat menggunakan react-native-easy-app yang lebih mudah untuk mengirim permintaan http dan merumuskan permintaan intersepsi.

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