react-native
Richieste HTTP

Sintassi

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

Osservazioni

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 con l'API di recupero

Va notato che Fetch non supporta i callback del progresso . Vedi: https://github.com/github/fetch/issues/89 .

L'alternativa è usare 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));

Maggiori dettagli sul recupero possono essere trovati su MDN

Networking con 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();

Utilizzo di Promises con API di recupero e Redux

Redux è la libreria di gestione dello stato più comune utilizzata con React-Native. Nell'esempio seguente viene illustrato come utilizzare l'API di recupero e le modifiche di invio al riduttore di stato delle applicazioni utilizzando 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 con Socket.io

Installa socket.io-client

npm i socket.io-client --save

Modulo di importazione

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

Inizializza nel tuo costruttore

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

Ora per utilizzare correttamente la tua connessione socket, dovresti associare le tue funzioni anche al costruttore. Supponiamo di dover creare una semplice applicazione, che invierà un ping a un server tramite socket ogni 5 secondi (consideralo come ping), quindi l'applicazione riceverà una risposta dal server. Per fare ciò, creiamo innanzitutto queste due funzioni:

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

Ora, abbiamo bisogno di unire queste due funzioni nel nostro costruttore:

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

Dopodiché, dobbiamo anche collegare la funzione _getReply al socket per ricevere il messaggio dal server socket. Per fare questo dobbiamo allegare la nostra funzione _getReply con l'oggetto socket. Aggiungi la seguente riga al nostro costruttore:

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

Ora, ogni volta che socket server emette con 'dong' l'applicazione sarà in grado di riceverlo.

Http con assiomi

Configurazione

Per la richiesta web è anche possibile utilizzare gli assiomi della libreria.

È facile da configurare. A tale scopo è possibile creare file axios.js per esempio:

import * as axios from 'axios';

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

export { instance as default };

e quindi usarlo in qualsiasi file tu voglia.

richieste

Per evitare l'uso del pattern "Swiss knife" per ogni servizio sul back-end, è possibile creare un file separato con metodi per questo all'interno della cartella per la funzionalità di integrazione:

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;

analisi

C'è una lib speciale per testare gli assiomi: axios-mock-adapter .

Con questa libreria puoi impostare su assiemi qualsiasi risposta tu voglia per testarla. Inoltre puoi configurare alcuni errori speciali per i tuoi metodi axois. Puoi aggiungerlo al tuo file axios.js creato nel passaggio precedente:

import MockAdapter from 'axios-mock-adapter';

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

per esempio.

Negozio Redux

A volte devi aggiungere alle intestazioni il token di autorizzazione, che probabilmente memorizzi nel tuo negozio di redux.

In questo caso avrai bisogno di un altro file, interceptors.js con questa funzione:

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

Successivamente nel costruttore del tuo componente root puoi aggiungere questo:

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

e quindi tutte le tue richieste saranno seguite con il tuo token di autorizzazione.

Come puoi vedere, axios è una libreria molto semplice, configurabile e utile per applicazioni basate su nativi reattivi.