React Nativeは、Fetchを使ってネットワーク要求を送信するコードの例を示します。
私たちはプロジェクトでよくHTTP要求を使ってネットワークにアクセスしますが、HTTP(HTTPS)要求は通常「GET」、「PUT」、「POST」、「DELETE」に分けられます。デフォルトでGET要求を指定しないと。
プロジェクトでよく使われているのは、GETとPOSTの2つの要求方式です。パラメータ付きのフォームに対してこのような要求を提出します。私たちは通常POSTの要求方式を使います。
HTTP要求を発行するためには、React Nativeに提供されるFetch APIを使用して実現する必要がある。任意のアドレスからコンテンツを取得するには、簡単にパラメータとしてfetchメソッドに渡すだけでいいです。
GET
GET方法でデータを要求してJSONに変換したいなら、下記のコードで実現できます。
もちろん、上記は最も基本的なGET要求であり、Fetchにはオプションの第二のパラメータがあり、HTTP要求のいくつかのパラメータをカスタマイズするために使用することができる。Headersパラメータを指定したり、POST方法を指定したり、データを提出したりできます。Fetch APIはまた、カスタムHeadersをサポートしています。Methodを交換したり、Bodyを追加したりします。
POST(二)
上記の2つの方法によって、POST要求を送信する方法があります。もちろん、この方法も推奨されています。
上のPOSTのデータフォーマットがサーバで認識されない場合、従来のフォームを試してみてもいいです。例は以下の通りです。
上記の例では、要求の開始方法を示しています。多くの場合、サーバーから返信されたデータを処理する必要があります。
天然ネットワーク要求は非同期的な操作であり、FetchメソッドはPromiseに戻ります。このようなモードは非同期的なコードを簡単にすることができます。Promiseについては、Promiseを参照してください。
サーバーから返ってきたデータを処理して、私達はすでに上の第二種類と第三種類のPOST要求の中でデータの処理を実現しました。具体的なコードは上の実装コードを参照してください。
デフォルトでは、iOSはhttps以外のすべての要求を停止します。要請したインターフェースがhttpプロトコルなら、まずApp Transport Securityの例外を追加する必要があります。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
プロジェクトでよく使われているのは、GETとPOSTの2つの要求方式です。パラメータ付きのフォームに対してこのような要求を提出します。私たちは通常POSTの要求方式を使います。
HTTP要求を発行するためには、React Nativeに提供されるFetch APIを使用して実現する必要がある。任意のアドレスからコンテンツを取得するには、簡単にパラメータとしてfetchメソッドに渡すだけでいいです。
GET
GET方法でデータを要求してJSONに変換したいなら、下記のコードで実現できます。
fetch('https://facebook.github.io/react-native/movies.json')
.then((response) => response.json())
.then((responseJson) => {
return responseJson.movies;
})
.catch((error) => {
console.error(error);
});
上記の要求により、戻ったResonseをJSON Objectに変換し、JSON Objectのmoviesフィールドを取り出します。また、もしErrorが発生したら、ネットワークの不通や接続エラーなどが発生したら、catchに接続されます。正常な状況では、次のような結果が得られます。
{
"title": "The Basics - Networking",
"description": "Your app fetched this from a remote endpoint!",
"movies": [
{ "title": "Star Wars", "releaseYear": "1977"},
{ "title": "Back to the Future", "releaseYear": "1985"},
{ "title": "The Matrix", "releaseYear": "1999"},
{ "title": "Inception", "releaseYear": "2010"},
{ "title": "Interstellar", "releaseYear": "2014"}
]
}
POST(一)もちろん、上記は最も基本的なGET要求であり、Fetchにはオプションの第二のパラメータがあり、HTTP要求のいくつかのパラメータをカスタマイズするために使用することができる。Headersパラメータを指定したり、POST方法を指定したり、データを提出したりできます。Fetch APIはまた、カスタムHeadersをサポートしています。Methodを交換したり、Bodyを追加したりします。
let url = "http://www.yousite.com/xxxx.ashx”
let params = {"name":"admin","password":"admin"};
fetch(url, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify(params)
})
上に基本的なPOST要求を構築して、自分のHeaders:AcceeptとConteet Typeを追加しました。Bodyを追加しました。POST(二)
let url = "http://www.yousite.com/xxxx.ashx”;
let params = "username=admin&password=admin”;
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: params,
}).then((response) => {
if (response.ok) {
return response.json();
}
}).then((json) => {
console.log(json)
}).catch((error) => {
console.error(error);
});
POST(三)おすすめ上記の2つの方法によって、POST要求を送信する方法があります。もちろん、この方法も推奨されています。
上のPOSTのデータフォーマットがサーバで認識されない場合、従来のフォームを試してみてもいいです。例は以下の通りです。
let REQUEST_URL = 'http://www.yousite.com/xxxx.ashx';
// ` FormData, `
let parameters = new FormData();
parameters.append("mt", "30013");
parameters.append("pg", "1");
parameters.append('ps', '20');
fetch(REQUEST_URL, {
method: 'POST',
body: parameters
}).then(
(result) => {
if (result.ok) {
console.log(result)
result.json().then(
(obj) => {
console.log(obj)
}
)
}
}
).catch((error) => {
console.log(error)
Alert.alert('Error')
})
この方法を紹介するメリットはもう一つあります。FormDataで直接バイトフローを伝達して写真をアップロードする機能を実現することができます。コードは以下の通りです。
uploadImage(){
let formData = new FormData();
let file = {uri: uri, type: 'multipart/form-data', name: 'a.jpg'};
formData.append("images",file);
fetch(url,{
method:'POST',
headers:{
'Content-Type':'multipart/form-data',
},
body:formData,
})
.then((response) => response.text() )
.then((responseData)=>{
console.log('responseData',responseData);
})
.catch((error)=>{console.error('error',error)});
}
処理サーバの応答データ上記の例では、要求の開始方法を示しています。多くの場合、サーバーから返信されたデータを処理する必要があります。
天然ネットワーク要求は非同期的な操作であり、FetchメソッドはPromiseに戻ります。このようなモードは非同期的なコードを簡単にすることができます。Promiseについては、Promiseを参照してください。
サーバーから返ってきたデータを処理して、私達はすでに上の第二種類と第三種類のPOST要求の中でデータの処理を実現しました。具体的なコードは上の実装コードを参照してください。
デフォルトでは、iOSはhttps以外のすべての要求を停止します。要請したインターフェースがhttpプロトコルなら、まずApp Transport Securityの例外を追加する必要があります。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。