「React-Nativeシリーズ」31、FetchがPOST要求を送信するピットとソリューション
2865 ワード
httpインタフェースをリクエストするときは、getとpostの方法を使用します.フォームに対してこのようなリクエストをコミットするには、postの方法を使用します.
では、RNのFetch APIでpostが提出するピットは何ですか?やめましょう.
まず、サーバ側のコードについて説明します.通常、Requestからパラメータを取得する方法は次のとおりです.
RNでは、通常どのようにコードを書きますか?
シナリオ1(推奨しない):
GETに変えてみて、paramsをurlに追加したらOK.これはどんな状況ですか?以下説明します.
はい、だめです.もう一つの方法を変えてみましょう.
シナリオ2(推奨しない):
はい、私たちは回り道をしないで、直接原因を説明します.
実際、シナリオ1とシナリオ2はbodyに直接文字列を渡し、サーバ側でbodyを取得する方法は以下の通りです.
文字列を取得できる以上、私たちが入力した値を取得することもできます.JSONを回したり、&カット文字列を押したりすることができますが、この解決策は少し挫折しているようですね!!!
jqueryで、私たちは案通りにやったのかと聞かれるかもしれませんが、どうすればいいですか.
答え:パラメータ「name=admin&password=admin 123」はjqueryでは、入力オブジェクトフレームワークがformDataの形式に自動的にカプセル化されるため、fetchにはこの機能はありません.
究極のシナリオ(推奨):
fetchがFormDataを自動的に回転しない以上、私たちは自分でFormDataをnewしてbodyに直接伝えます.
FormDataでは、バイトストリームを転送して画像をアップロードする機能も実現できます.参考:http://blog.csdn.net/codetomylaw/article/details/52446786
では、RNのFetch APIでpostが提出するピットは何ですか?やめましょう.
まず、サーバ側のコードについて説明します.通常、Requestからパラメータを取得する方法は次のとおりです.
String paraValue = request.getParameter(paraName);
パラメータを取得できるかどうかは、この方法で取得します.RNでは、通常どのようにコードを書きますか?
シナリオ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);
});
このとき,サーバ側ではnameとpasswordの値を取得できないことが分かった.GETに変えてみて、paramsをurlに追加したらOK.これはどんな状況ですか?以下説明します.
はい、だめです.もう一つの方法を変えてみましょう.
シナリオ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を直接JSONオブジェクトにカプセル化し、bodyでJSONオブジェクトを文字列に変換して渡したところ、然並卵したが、Server端では値が得られなかったことが分かった.はい、私たちは回り道をしないで、直接原因を説明します.
実際、シナリオ1とシナリオ2はbodyに直接文字列を渡し、サーバ側でbodyを取得する方法は以下の通りです.
StringBuilder buffer = new StringBuilder();
BufferedReader reader = beat.getRequest().getReader();
String line;
while ((line = reader.readLine()) != null) {
buffer.append(line);
}
String body = buffer.toString();
この方法により、入力された文字列を取得することができる.文字列を取得できる以上、私たちが入力した値を取得することもできます.JSONを回したり、&カット文字列を押したりすることができますが、この解決策は少し挫折しているようですね!!!
jqueryで、私たちは案通りにやったのかと聞かれるかもしれませんが、どうすればいいですか.
答え:パラメータ「name=admin&password=admin 123」はjqueryでは、入力オブジェクトフレームワークがformDataの形式に自動的にカプセル化されるため、fetchにはこの機能はありません.
究極のシナリオ(推奨):
fetchがFormDataを自動的に回転しない以上、私たちは自分でFormDataをnewしてbodyに直接伝えます.
FormDataでは、バイトストリームを転送して画像をアップロードする機能も実現できます.参考: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);
});
では、サーバ側でnameとpasswordの値を取得できます.