Comment publier une demande x-www-form-urlencoded de reactive native

Je travaille sur une application ios utilisant native-réagir. Je viens d'un projet angulaire qui utilise l'identité Microsoft pour l'authentification token. En angulaire, j'utilise cet appel de service pour authentifier:

$http({ method: 'POST', url: appConstant.webApiUrl + '/Token', data: userData, headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }, transformRequest: function (obj) { var str = []; for (var p in obj) str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p])); return str.join("&"); } }).success(function (data, status, headers, cfg) {

fonctionne très bien. Je dois faire la même chose avec fetch. J'ai vu les exemples sur Internet qui publient avec un json body mais ce n'est pas ce qu'il faut. Exemple qui ne fonctionne pas avec ce dont j'ai besoin

Je sais que j'ai besoin de formater le corps ou (les données) avec le composant encodeURIC, mais je ne sais pas comment le mettre en œuvre

Voici ce que j'ai:

  var obj = { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8', //'Origin': '', //'Host': 'api.producthunt.com' }, body: JSON.stringify({ 'userName': '[email protected]', 'password': 'Password!', 'grant_type': 'password' }) } fetch('http://identity.azurewebsites.net' + '/token', obj) .then(function(res) { console.log(res) return res.json(); }) .then(function(resJson) { console.log(resJson) return resJson; }) } },

J'ai essayé beaucoup de choses, voire codé le résultat du transformRequest dans le corps pour dépanner. (J'ai supprimé la fonction JSON.stringify d'abord).

L'erreur que je reçois est que grant_type n'est pas valide.

mettre à jour:

  var str = []; var test = function(value){ for (var p in value) str.push(encodeURIComponent(p) + "=" + encodeURIComponent(value[p])); return str.join("&"); } test(value); var obj = { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }, body:{data:str} } fetch('http://identity.azurewebsites.net' + '/token', obj) .then(function(res) { console.log(res) return res.json(); }) .then(function(resJson) { console.log(resJson) return resJson; })

Nouvelle erreur:

Type BodyInit non pris en charge

Pour télécharger des requêtes POST codées par formulaire, je recommande d'utiliser l'objet FormData .

Exemple de code:

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

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

Dans l'exemple d'origine, vous avez une fonction transformRequest qui convertit un objet en données encodées.

Dans l'exemple révisé, vous l'avez remplacé par JSON.stringify qui convertit un objet en JSON.

Dans les deux cas, vous avez 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' sorte que vous prétendez envoyer des données encodées par formulaire dans les deux cas.

Utilisez votre fonction de codage de formulaire au lieu de JSON.stringify .

Réinitialisation:

Dans votre premier exemple d' fetch , vous définissez le body comme étant la valeur JSON.

Maintenant, vous avez créé une version codée par formulaire, mais au lieu de définir le body pour être cette valeur, vous avez créé un nouvel objet et définissez les données codées en forme comme propriété de cet objet.

Ne créez pas cet objet supplémentaire. Il suffit d'assigner votre valeur au body .

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