react-native
HTTP-verzoeken

Syntaxis

• fetch (url, options) [. dan (...) [. catch (...)]]

Opmerkingen

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 met de ophaal-API

Opgemerkt moet worden dat Fetch geen callbacks voor voortgang ondersteunt . Zie: https://github.com/github/fetch/issues/89 .

Het alternatief is om XMLHttpRequest https://developer.mozilla.org/en-US/docs/Web/Events/progress te gebruiken.

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

Meer informatie over ophalen is te vinden op MDN

Netwerken met 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();

Promises gebruiken met de ophaal-API en Redux

Redux is de meest voorkomende bibliotheek voor statusbeheer die wordt gebruikt met React-Native. In het volgende voorbeeld wordt gedemonstreerd hoe u de ophaal-API kunt gebruiken en wijzigingen kunt aanbrengen in het reductiestatusprogramma van uw toepassing met behulp van 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.'));
    });
  };
};

Websocket met Socket.io

Socket.io-client installeren

npm i socket.io-client --save

Module importeren

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

Initialiseer in je constructor

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

Om uw socketverbinding correct te gebruiken, moet u uw functies ook in de constructor binden. Laten we aannemen dat we een eenvoudige applicatie moeten bouwen, die na elke 5 seconden een ping naar een server via socket stuurt (dit als ping beschouwen), en dan krijgt de applicatie een antwoord van de server. Laten we eerst deze twee functies maken:

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

Nu moeten we deze twee functies in onze constructor 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);
}

Daarna moeten we ook de functie _getReply koppelen aan de socket om het bericht van de socket-server te ontvangen. Om dit te doen moeten we onze _getReply-functie koppelen met socketobject. Voeg de volgende regel toe aan onze constructor:

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

Wanneer de socket-server met de 'dong' uitzendt, kan uw toepassing deze nu ontvangen.

HTTP met axios

Configure

Voor webverzoeken kunt u ook bibliotheek- axios gebruiken .

Het is eenvoudig te configureren. Voor dit doel kunt u bijvoorbeeld axios.js maken:

import * as axios from 'axios';

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

export { instance as default };

en gebruik het vervolgens in elk gewenst bestand.

verzoeken

Om te voorkomen dat u patroon 'Zwitsers mes' gebruikt voor elke service op uw backend, kunt u een afzonderlijk bestand maken met methoden hiervoor in de map voor integratiefunctionaliteit:

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

Er is een speciale bibliotheek voor het testen van axios: axios-mock-adapter .

Met deze bibliotheek kunt u elke respons instellen die u wilt voor het testen. U kunt ook enkele speciale fouten configureren voor de methoden van uw axois. U kunt het toevoegen aan uw axios.js-bestand dat in de vorige stap is gemaakt:

import MockAdapter from 'axios-mock-adapter';

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

bijvoorbeeld.

Redux-winkel

Soms moet je toevoegen aan headers die token autoriseren, die je waarschijnlijk opslaat in je redux store.

In dit geval heb je een ander bestand nodig, interceptors.js met deze functie:

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

Vervolgens kun je dit in de constructor van je rootcomponent toevoegen:

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

en dan worden al uw verzoeken gevolgd door uw autorisatietoken.

Zoals u kunt zien is axios een zeer eenvoudige, configureerbare en nuttige bibliotheek voor toepassingen op basis van react-native.