react-native
Requêtes HTTP

Syntaxe

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

Remarques

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 avec l'API de récupération

Il convient de noter que Fetch ne prend pas en charge les rappels de progression . Voir: https://github.com/github/fetch/issues/89 .

L'alternative est d'utiliser 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));

Plus de détails sur la récupération peuvent être trouvés à MDN

Mise en réseau avec 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();

Utiliser des promesses avec l'API d'extraction et Redux

Redux est la bibliothèque de gestion d'états la plus utilisée avec React-Native. L'exemple suivant montre comment utiliser l'API d'extraction et envoyer des modifications à votre réducteur d'état d'applications en utilisant 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.'));
    });
  };
};

Socket Web avec Socket.io

Installer socket.io-client

npm i socket.io-client --save

Module d'importation

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

Initialiser dans votre constructeur

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

Maintenant, pour utiliser correctement votre connexion socket, vous devez également lier vos fonctions dans constructeur. Supposons que nous devions créer une application simple, qui enverra un ping à un serveur via un socket toutes les 5 secondes (considérez ceci comme un ping), puis l'application recevra une réponse du serveur. Pour ce faire, créons d'abord ces deux fonctions:

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

Maintenant, nous devons lier ces deux fonctions dans notre constructeur:

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

Après cela, nous devons également lier la fonction _getReply avec le socket afin de recevoir le message du serveur de socket. Pour ce faire, nous devons attacher notre fonction _getReply avec un objet socket. Ajoutez la ligne suivante à notre constructeur:

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

Maintenant, chaque fois que le serveur de socket émet avec le «dong», votre application pourra le recevoir.

Http avec axios

Configurer

Pour les demandes Web, vous pouvez également utiliser la bibliothèque axios .

C'est facile à configurer. Pour cela, vous pouvez créer le fichier axios.js par exemple:

import * as axios from 'axios';

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

export { instance as default };

et ensuite l'utiliser dans n'importe quel fichier que vous voulez.

Demandes

Pour éviter d'utiliser le pattern 'Swiss knife' pour chaque service de votre backend, vous pouvez créer un fichier séparé avec des méthodes pour cela dans le dossier pour la fonctionnalité d'intégration:

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;

Essai

Il existe une lib pour tester les axios: axios-mock-adapter .

Avec cette lib, vous pouvez définir sur axios toute réponse que vous souhaitez pour le tester. Vous pouvez également configurer des erreurs spéciales pour vos méthodes axois. Vous pouvez l'ajouter à votre fichier axios.js créé à l'étape précédente:

import MockAdapter from 'axios-mock-adapter';

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

par exemple.

Redux Store

Parfois, vous devez ajouter des en-têtes à autoriser, que vous stockez probablement dans votre magasin Redux.

Dans ce cas, vous aurez besoin d'un autre fichier, interceptors.js avec cette fonction:

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

Suivant dans le constructeur de votre composant racine, vous pouvez ajouter ceci:

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

et ensuite toutes vos demandes seront suivies avec votre jeton d'autorisation.

Comme vous pouvez le voir, axios est une bibliothèque très simple, configurable et utile pour les applications basées sur react-native.