React Nativeは、Fetchを使ってネットワーク要求を送信するコードの例を示します。


私たちはプロジェクトでよくHTTP要求を使ってネットワークにアクセスしますが、HTTP(HTTPS)要求は通常「GET」、「PUT」、「POST」、「DELETE」に分けられます。デフォルトでGET要求を指定しないと。
プロジェクトでよく使われているのは、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の例外を追加する必要があります。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。