React Native で Fetch を使用してネットワーク リクエストを送信する方法

この記事では主に、Fetch を使用してネットワーク リクエストを送信する React Native のサンプル コードを紹介します。興味のある方は参考にしてください。私たちのプロジェクトでは、HTTP (HTTPS) リクエストを使用してネットワークにアクセスすることがよくあります。通常は「GET」、「PUT」、「POST」、「DELETE」に分かれています。指定しない場合、デフォルトは GET リクエストです。

プロジェクトでは、通常、GET と POST の 2 つのリクエスト メソッドを使用します。パラメーターを含むフォームを通じて送信されるリクエストには、通常、POST リクエスト メソッドを使用します。

HTTP リクエストを行うには、React Native が提供する Fetch API を使用する必要があります。任意のアドレスからコンテンツを取得するには、URL をパラメーターとして fetch メソッドに渡すだけです (「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);
   });

上記のリクエストで返されたResponseをJSONオブジェクトに変換し、JSONオブジェクト内のmovieフィールドを取り出します。同時に、ネットワーク障害やアクセス接続エラーなどのエラーが発生した場合、通常の状況では、次の結果が得られます:

{
 "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 (1)

もちろん、上記は最も基本的な GET リクエストであり、Fetch にはオプションの 2 番目のパラメータもあります。 HTTP リクエストの一部のパラメーターをカスタマイズするために使用されます。ヘッダー パラメーターを指定したり、POST メソッドの使用を指定したり、データを送信したりできます。フェッチ API は、ヘッダーのカスタマイズ、メソッドの変更、ボディの追加などもサポートしています。上記の基本的な POST リクエスト、独自のヘッダー (Accept と Content-Type) を追加し、

POST (2)

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 (3) を追加します。上記の 2 つのメソッドを通じて、 POST リクエストを送信する方法もあります。もちろん、この方法も推奨されます

サーバーが上記の 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);
});

この方法を推奨するもう 1 つの利点は、FormData でバイト ストリームを直接渡して画像をアップロードする機能を実装できることです。コードは次のとおりです:

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

サーバーの応答データを処理する

多くの場合、リクエストを開始するには、サーバーから返されたデータを処理する必要があります。

ネットワーク リクエストは、当然、Promise を返します。このモードでは、非同期スタイルのコードを参照してください。 to: Promise

サーバーから返されたデータの処理。特定のコードについては、上記の実装コードを参照してください。 デフォルトでは、iOS はすべてのリクエストをブロックします。これは http プロトコルであるため、まず App Transport Security の例外を追加する必要があります

での Flux の実装方法をまとめました。 knockoutjs

vueを使用してシームレスなスクロールコンポーネントを実装する方法

JavaScript配列操作の難しさ（詳細なチュートリアル）

WeChatミニプログラムにlike関数を実装する方法

以上がReact Native で Fetch を使用してネットワーク リクエストを送信する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。