Inserisci una domanda x-www-form-urlencoded da Reagire Native

Question

ho alcuni parametri che voglio postare forma codificata al mio server:

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

sto inviando la mia richiesta (attualmente senza parametri) In questo modo

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

Come posso includere i parametri codificati in forma nella richiesta?

Answer 1

Per il caricamento di richieste POST codificate dal modulo, è consigliabile utilizzare l'oggetto FormData.

codice

Esempio:

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

Answer 2

Nell'esempio originale si dispone di una funzione transformRequest che converte un oggetto in Dati modulo codificati.

Nell'esempio revisionato l'avete sostituito con JSON.stringify che converte un oggetto in JSON.

In entrambi i casi si hanno 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' in modo che siano sostenendo di essere l'invio di dati forma codificata in entrambi i casi.

Utilizzare la funzione di codifica modulo anziché JSON.stringify.

---

Re aggiornamento:

Nella tua prima fetch ad esempio, è possibile impostare il body essere il valore JSON.

Ora è stata creata una versione codificata del modulo, ma invece di impostare il valore body, è stato creato un nuovo oggetto e impostato i dati del modulo codificati come proprietà di tale oggetto.

Non creare quell'oggetto aggiuntivo. Assegna il tuo valore a body.

Answer 3

Bisogna mettere insieme la x-www-form-urlencoded payload te, in questo modo:

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

noti che se si stava utilizzando fetch in un browser (sufficientemente moderno), invece di React Native, potresti invece creare un oggetto URLSearchParams e utilizzarlo come corpo, dal momento che il Fetch Standard states che se il body è un URLSearchParams oggetto quindi dovrebbe essere serializzato come application/x-www-form-urlencoded. Tuttavia, non è possibile farlo in React Native perché React Native does not implement URLSearchParams.

Answer 4

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

Answer 5

È possibile aggiungere una funzione di opporsi, in modo da poter serializzare un JSON più facile.

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('&') 
} 

Per utilizzare questo, devi solo scrivere semplicemente

obj.serialize() 

per esempio.

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