《React-Native系列》31、 Fetch發(fā)送POST請(qǐng)求的坑與解決方案
來(lái)源：程序員人生 發(fā)布時(shí)間：2016-10-06 09:00:57 閱讀次數(shù)：5494次
我們?cè)谝骽ttp接口時(shí)候，通常都會(huì)使用get和post的方式，針對(duì)表單提交這類的要求，我們通常采取post方式。
那末在RN中的Fetch API中post提交有哪些坑呢？讓我們擼起來(lái)。
我們先來(lái)講說(shuō)Server真?zhèn)€代碼，通常我們從Request獲得參數(shù)時(shí)的方法為：
String paraValue = request.getParameter(paraName);
我們下面說(shuō)的判斷能不能獲得參數(shù)，就是依照這類方法來(lái)獲得。
在 RN中，通常我們會(huì)怎樣寫(xiě)代碼呢？
方案1（不推薦）：
let url = "http://127.0.0.1:8080/api/testFetch”
let params = "name=admin&password=admin123”;
fetch(url , {
method: 'POST',
headers: {},
body: params,
}).then((response) => {
if (response.ok) {
return response.json();
}
}).then((json) => {
alert(JSON.stringify(json));
}).catch((error) => {
console.error(error);
});
此時(shí)我們發(fā)現(xiàn)在Server端沒(méi)法獲得到name和password的值。
換成GET試試，將params追加到url后，發(fā)現(xiàn)ok。那這是甚么情況呢？下面講授。
好，不行，我們就再換1種方法試試唄。
方案2（不推薦）： let params = {"name":"admin","password":"admin123"};
fetch(url , {
method: 'POST',
headers: {},
body:JSON.stringify(params),
}).then((response) => {
if (response.ok) {
return response.json();
}
}).then((json) => {
alert(JSON.stringify(json));
}).catch((error) => {
console.error(error);
});
我們直接將params封裝成1個(gè)JSON對(duì)象，然后在body里將JSON對(duì)象轉(zhuǎn)成字符串傳過(guò)去，發(fā)現(xiàn)然并卵，Server端還是獲得不到值。
好，我們不兜圈子了，直接說(shuō)明緣由。
其實(shí)，方案1和方案2都是直接在body里傳遞了1個(gè)字符串，在Server端獲得body的方式以下：
StringBuilder buffer = new StringBuilder();
BufferedReader reader = beat.getRequest().getReader();
String line;
while ((line = reader.readLine()) != null) {
buffer.append(line);
}
String body = buffer.toString();
通過(guò)這類方法我們可以獲得到傳入的字符串。
既然能獲得到字符串，那末我們也能夠拿到我們傳入的值了，可以轉(zhuǎn)JSON、或按&切割字符串，只不過(guò)這類解決方案好像有點(diǎn)挫啊！！！
或許你會(huì)問(wèn)在
jquery中，我們就是依照方案1這類方式做的啊，怎樣好使呢？
答：由于參數(shù) "name=admin&password=admin123” 在
jquery中，傳入對(duì)象框架會(huì)自動(dòng)封裝成formData的情勢(shì)，fetch沒(méi)有這個(gè)功能。
終極方案（推薦使用）：
既然fetch不會(huì)自動(dòng)轉(zhuǎn)FormData，那我們自己new1個(gè)FormData，直接傳給body。
在FormData中也能夠傳遞字節(jié)流實(shí)現(xiàn)上傳圖片的功能。參考：http://blog.csdn.net/codetomylaw/article/details/52446786
let formData = new FormData();
formData.append("name","admin");
formData.append("password","admin123");
fetch(url , {
method: 'POST',
headers: {},
body: formData,
}).then((response) => {
if (response.ok) {
return response.json();
}
}).then((json) => {
alert(JSON.stringify(json));
}).catch((error) => {
console.error(error);
});
這樣我們就能夠在Server端獲得到name和password的值了。
生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)
