react-native
HTTP-Anfragen

Syntax

• Abruf (URL, Optionen) [. dann (...) [. catch (...)]]

Bemerkungen

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

HTTP mit der Abruf-API

Es sei darauf hingewiesen, dass Fetch keine Statusrückrufe unterstützt . Siehe: https://github.com/github/fetch/issues/89 .

Alternativ können Sie XMLHttpRequest https://developer.mozilla.org/en-US/docs/Web/Events/progress verwenden .

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));

Weitere Details zum Abruf finden Sie unter MDN

Vernetzung mit 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();

Versprechen mit der Abruf-API und Redux verwenden

Redux ist die am häufigsten verwendete Zustandsverwaltungsbibliothek, die mit React-Native verwendet wird. Das folgende Beispiel zeigt, wie Sie die Abruf-API verwenden und Änderungen mithilfe von redux-thunk an den Statusreduzierer Ihrer Anwendung weiterleiten.

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

Websockel mit Socket.io

Socket.io-Client installieren

npm i socket.io-client --save

Modul importieren

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

Initialisieren Sie in Ihrem Konstruktor

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

Damit Sie Ihre Socket-Verbindung ordnungsgemäß verwenden können, sollten Sie Ihre Funktionen auch im Konstruktor binden. Nehmen wir an, wir müssen eine einfache Anwendung erstellen, die alle 5 Sekunden einen Ping per Socket an einen Server sendet (dies als Ping betrachten), und die Anwendung erhält eine Antwort vom Server. Dazu erstellen wir zunächst diese beiden Funktionen:

_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);
}

Nun müssen wir diese beiden Funktionen in unserem Konstruktor binden:

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

Danach müssen wir auch die _getReply-Funktion mit dem Socket verknüpfen, um die Nachricht vom Socket-Server zu erhalten. Dazu müssen wir unsere _getReply-Funktion mit dem Socket-Objekt verknüpfen. Fügen Sie unserem Konstruktor die folgende Zeile hinzu:

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

Immer wenn Socket-Server mit dem 'Dong' emittiert, kann Ihre Anwendung dies jetzt empfangen.

HTTP mit Axios

Konfigurieren

Für die Webanfrage können Sie auch Bibliotheks- Axios verwenden .

Es ist einfach zu konfigurieren. Zu diesem Zweck können Sie beispielsweise die Datei axios.js erstellen:

import * as axios from 'axios';

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

export { instance as default };

und dann in einer beliebigen Datei verwenden.

Anfragen

Um zu vermeiden, dass das Muster "Schweizer Messer" für jeden Dienst in Ihrem Backend verwendet wird, können Sie eine separate Datei mit Methoden für diesen Ordner im Ordner für die Integrationsfunktionalität erstellen:

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;

Testen

Es gibt eine spezielle Bibliothek zum Testen von Axios: Axios-Mock-Adapter .

Mit dieser Bibliothek können Sie jede Antwort festlegen, die Sie zum Testen benötigen. Sie können auch einige spezielle Fehler für Ihre axois'es-Methoden konfigurieren. Sie können es zu Ihrer im vorherigen Schritt erstellten Datei axios.js hinzufügen:

import MockAdapter from 'axios-mock-adapter';

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

zum Beispiel.

Redux Store

In manchen Fällen müssen Sie den Autorisierungs-Token, die Sie wahrscheinlich in Ihrem Redux-Store speichern, den Header hinzufügen.

In diesem Fall benötigen Sie eine andere Datei, interceptors.js mit dieser Funktion:

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

Als Nächstes können Sie im Konstruktor Ihrer Stammkomponente Folgendes hinzufügen:

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

und dann werden alle Ihre Anforderungen mit Ihrem Autorisierungstoken verfolgt.

Wie Sie sehen, ist axios eine sehr einfache, konfigurierbare und nützliche Bibliothek für Anwendungen, die auf React-Native basieren.