react-native
HTTP-begäranden

Syntax

• hämta (url, alternativ) [. sedan (...) [. fånga (...)]]

Anmärkningar

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 med hämta API

Det bör noteras att Fetch inte stöder återuppringning av framsteg . Se: https://github.com/github/fetch/issues/89 .

Alternativet är att använda 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));

Mer information om hämtning finns på MDN

Nätverk med 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();

Använda löften med hämta API och Redux

Redux är det vanligaste tillståndshanteringsbiblioteket som används med React-Native. Följande exempel visar hur du använder hämta API och skicka ändringar i dina applikations tillståndsminskare med 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 med Socket.io

Installera socket.io-client

npm i socket.io-client --save

Importera modul

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

Initiera i din konstruktör

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

För att använda din socketanslutning ordentligt bör du binda dina funktioner också i konstruktören. Låt oss anta att vi måste bygga en enkel applikation, som skickar en ping till en server via socket efter var femte sekund (anser detta som ping), och sedan får applikationen ett svar från servern. För att göra det, låt oss först skapa dessa två funktioner:

_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 måste vi binda dessa två funktioner i vår konstruktör:

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

Efter det måste vi också länka _getReply-funktionen till socket för att få meddelandet från socket-servern. För att göra detta måste vi fästa vår _getReply-funktion med socket-objekt. Lägg till följande rad till vår konstruktör:

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

Nu, när socket-servern avger med 'dong', kan din ansökan ta emot den.

Http med axios

Konfigurera

För webb begäran kan du även använda bibliotekets Axios .

Det är enkelt att konfigurera. För detta ändamål kan du skapa fil axios.js till exempel:

import * as axios from 'axios';

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

export { instance as default };

och använd den sedan i vilken fil du vill.

Begäran

För att undvika att använda schweizisk kniv för varje tjänst på din backend kan du skapa en separat fil med metoder för detta inom mappen för integrationsfunktionalitet:

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;

Testning

Det finns en speciell lib för testning av axios: axios-mock-adapter .

Med denna lib kan du ställa in axios varje svar du vill testa det. Du kan också konfigurera några speciella fel för dina axois'-metoder. Du kan lägga till den i din axios.js-fil som skapats i föregående steg:

import MockAdapter from 'axios-mock-adapter';

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

till exempel.

Redux Store

Ibland måste du lägga till i rubriker tillåta token, som du antagligen lagrar i din redux-butik.

I detta fall behöver du en annan fil, interceptors.js med den här funktionen:

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

Nästa i konstruktören av din rotkomponent kan du lägga till detta:

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

och sedan följs alla dina förfrågningar med ditt auktorisationstecken.

Som du kan se axios är mycket enkelt, konfigurerbart och användbart bibliotek för applikationer baserade på react-native.