react-native
HTTPリクエスト

構文

• fetch（url、options）[。then（...）[。catch（...）]]

備考

WebSockets

var ws = new WebSocket('ws://host.com/path');

ws.onopen = () => {
  // connection opened

  ws.send('something'); // send a message
};

ws.onmessage = (e) => {
  // a message was received
  console.log(e.data);
};

ws.onerror = (e) => {
  // an error occurred
  console.log(e.message);
};

ws.onclose = (e) => {
  // connection closed
  console.log(e.code, e.reason);
};

フェッチAPIを使用したHTTP

フェッチはプログレスコールバックをサポートしていないことに注意してください。 https://github.com/github/fetch/issues/89を参照してください 。

代替方法は、XMLHttpRequest https://developer.mozilla.org/en-US/docs/Web/Events/progressを使用することです。

fetch('https://mywebsite.com/mydata.json').then(json => console.log(json));

fetch('/login', {
  method: 'POST',
  body: form,
  mode: 'cors',
  cache: 'default',
}).then(session => onLogin(session), failure => console.error(failure));

フェッチに関する詳細は、 MDN

XMLHttpRequestによるネットワーキング

var request = new XMLHttpRequest();
request.onreadystatechange = (e) => {
  if (request.readyState !== 4) {
    return;
  }

  if (request.status === 200) {
    console.log('success', request.responseText);
  } else {
    console.warn('error');
  }
};

request.open('GET', 'https://mywebsite.com/endpoint/');
request.send();

fetch APIとReduxでの約束の使用

Reduxは、React-Nativeで使用される最も一般的な状態管理ライブラリです。次の例は、fetch APIを使用し、redux-thunkを使用してアプリケーションの状態リデューサに変更をディスパッチする方法を示しています。

export const fetchRecipes = (action) => {
  return (dispatch, getState) => {
    fetch('/recipes', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          recipeName,
          instructions,
          ingredients
        })
    })
    .then((res) => {
      // If response was successful parse the json and dispatch an update
      if (res.ok) {
        res.json().then((recipe) => {
          dispatch({
            type: 'UPDATE_RECIPE',
            recipe
          });
        });
      } else {
        // response wasn't successful so dispatch an error
        res.json().then((err) => {
          dispatch({
            type: 'ERROR_RECIPE',
            message: err.reason,
            status: err.status
          });
        });
      }
    })
    .catch((err) => {
      // Runs if there is a general JavaScript error.
      dispatch(error('There was a problem with the request.'));
    });
  };
};

WebソケットとSocket.io

socket.io-clientをインストールする

npm i socket.io-client --save

インポートモジュール

import SocketIOClient from 'socket.io-client/dist/socket.io.js'

あなたのコンストラクタで初期化する

constructor(props){
    super(props);
    this.socket = SocketIOClient('http://server:3000');
  }

ソケット接続を正しく使用するには、関数をコンストラクタにバインドする必要があります。単純なアプリケーションを構築しなければならないと仮定しましょう。5秒ごとにpingをソケット経由でサーバーに送ります（これをpingと見なします）。そして、アプリケーションはサーバーから応答を受け取ります。これを行うには、まず次の2つの関数を作成します。

_sendPing(){
    //emit a dong message to socket server
    socket.emit('ding');
}

_getReply(data){
    //get reply from socket server, log it to console
    console.log('Reply from server:' + data);
}

さて、これら2つの関数をコンストラクタでバインドする必要があります：

constructor(props){
    super(props);
    this.socket = SocketIOClient('http://server:3000');

    //bind the functions
    this._sendPing = this._sendPing.bind(this);
    this._getReply = this._getReply.bind(this);
}

その後、ソケットサーバーからメッセージを受け取るために、_getReply関数をソケットにリンクする必要もあります。これを行うには、_getReply関数をsocketオブジェクトに付加する必要があります。コンストラクタに次の行を追加します。

this.socket.on('dong', this._getReply);

今、ソケットサーバーが 'dong'で発行するたびに、アプリケーションはそれを受け取ることができます。

アソシエイツのHttp

設定

Webリクエストの場合はライブラリアキシャルを使用することもできます。

設定は簡単です。この目的のために、ファイルaxios.jsを作成することができます：

import * as axios from 'axios';

var instance = axios.create();
instance.defaults.baseURL = serverURL;
instance.defaults.timeout = 20000;]
//...
//and other options

export { instance as default };

あなたが望む任意のファイルでそれを使用してください。

リクエスト

あなたのバックエンド上のすべてのサービスにパターン 'スイスナイフ'を使用しないようにするには、統合機能のためのフォルダ内のメソッドを使用して別々のファイルを作成することができます：

import axios from '../axios';
import { 
    errorHandling
} from '../common';

const UserService = {
        getCallToAction() {
        return axios.get('api/user/dosomething').then(response => response.data)
            .catch(errorHandling);
    },
}
export default UserService;

テスト

axiosをテストするための特別なlib： axios-mock-adapterがあります。

このlibを使用すると、テストする応答を任意の軸に設定できます。また、あなたのaxois'esメソッドのいくつかの特別なエラーを設定することができます。前の手順で作成したaxios.jsファイルに追加することができます：

import MockAdapter from 'axios-mock-adapter';

var mock = new MockAdapter(instance);
mock.onAny().reply(500);

例えば。

Reduxストア

場合によっては、ヘッダーに追加する必要があります。トークンを承認する必要があります。これは、おそらくあなたのreduxストアに格納されています。

この場合、この機能を持つinterceptors.jsファイルがもう1つ必要です。

export function getAuthToken(storeContainer) {
    return config => {
        let store = storeContainer.getState();
        config.headers['Authorization'] = store.user.accessToken;
        return config;
    };
}

次に、ルートコンポーネントのコンストラクタで、これを追加することができます：

axios.interceptors.request.use(getAuthToken(this.state.store));

あなたのすべての要求にあなたの認証トークンが続きます。

あなたが見ることができるように、Axiosは非常にシンプルで、反応性ネイティブに基づいたアプリケーションのための構成可能で有用なライブラリです。