react-native
Solicitudes HTTP

Sintaxis

• fetch (url, opciones) [. luego (...) [. catch (...)]]

Observaciones

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 la API fetch

Cabe señalar que Fetch no admite devoluciones de llamada de progreso . Consulte: https://github.com/github/fetch/issues/89 .

La alternativa es utilizar 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));

Más detalles sobre fetch se pueden encontrar en MDN

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

Usando Promesas con la API de búsqueda y Redux

Redux es la biblioteca de administración de estado más común utilizada con React-Native. El siguiente ejemplo muestra cómo usar la API de obtención y el envío de cambios a su reductor de estado de aplicaciones usando 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

Instalar socket.io-cliente

npm i socket.io-client --save

Módulo de importación

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

Inicializa en tu constructor.

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

Ahora, para utilizar correctamente su conexión de socket, también debe enlazar sus funciones en el constructor. Supongamos que tenemos que crear una aplicación simple, que enviará un ping a un servidor a través de un socket cada 5 segundos (considere esto como ping), y luego la aplicación recibirá una respuesta del servidor. Para hacerlo, primero vamos a crear estas dos funciones:

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

Ahora, necesitamos unir estas dos funciones en nuestro constructor:

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

Después de eso, también necesitamos vincular la función _getReply con el socket para recibir el mensaje del servidor socket. Para hacer esto necesitamos adjuntar nuestra función _getReply con el objeto socket. Agregue la siguiente línea a nuestro constructor:

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

Ahora, siempre que el servidor de socket emita con el 'dong' su aplicación podrá recibirlo.

Http con axios

Configurar

Para solicitud web también puede utilizar la biblioteca de axios .

Es fácil de configurar. Para este propósito puedes crear el archivo axios.js por ejemplo:

import * as axios from 'axios';

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

export { instance as default };

y luego usarlo en cualquier archivo que desee.

Peticiones

Para evitar el uso del patrón 'Swiss knife' para cada servicio en su backend, puede crear un archivo separado con métodos para esto dentro de la carpeta para la funcionalidad de integración:

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;

Pruebas

Hay una biblioteca especial para probar axios: axios-mock-adapter .

Con esta biblioteca puedes configurar para axios cualquier respuesta que desees para probarlo. También puedes configurar algunos errores especiales para tus métodos axois'es. Puede agregarlo a su archivo axios.js creado en el paso anterior:

import MockAdapter from 'axios-mock-adapter';

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

por ejemplo.

Tienda Redux

A veces es necesario agregar token de autorización de encabezados, que probablemente almacene en su tienda de redux.

En este caso, necesitará otro archivo, interceptors.js con esta función:

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

A continuación en el constructor de su componente raíz puede agregar esto:

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

y luego todas sus solicitudes serán seguidas con su token de autorización.

Como puedes ver, axios es una biblioteca muy simple, configurable y útil para aplicaciones basadas en react-native.