react-native
Żądania HTTP

Składnia

• pobierz (adres URL, opcje) [. następnie (...) [. catch (...)]]

Uwagi

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 z interfejsem API pobierania

Należy zauważyć, że Fetch nie obsługuje wywołań zwrotnych postępu . Zobacz: https://github.com/github/fetch/issues/89 .

Alternatywą jest użycie 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));

Więcej informacji na temat pobierania można znaleźć w MDN

Praca w sieci za pomocą 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();

Używanie obietnic z API pobierania i Redux

Redux jest najpopularniejszą biblioteką zarządzania stanem używaną z React-Native. Poniższy przykład pokazuje, jak używać interfejsu API pobierania i wysyłania zmian do reduktora stanu aplikacji za pomocą 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.'));
    });
  };
};

Gniazdo sieciowe z Socket.io

Zainstaluj klienta socket.io

npm i socket.io-client --save

Moduł importu

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

Zainicjuj w swoim konstruktorze

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

Teraz, aby poprawnie korzystać z połączenia przez gniazdo, powinieneś również powiązać swoje funkcje w konstruktorze. Załóżmy, że musimy zbudować prostą aplikację, która będzie wysyłać ping do serwera za pośrednictwem gniazda co 5 sekund (traktuj to jako ping), a następnie aplikacja otrzyma odpowiedź z serwera. Aby to zrobić, najpierw utwórzmy te dwie funkcje:

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

Teraz musimy powiązać te dwie funkcje w naszym konstruktorze:

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

Następnie musimy również połączyć funkcję _getReply z gniazdem, aby otrzymać komunikat z serwera gniazd. Aby to zrobić, musimy dołączyć naszą funkcję _getReply do obiektu gniazda. Dodaj następujący wiersz do naszego konstruktora:

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

Teraz, ilekroć serwer gniazd emituje z „dongiem”, twoja aplikacja będzie mogła go odebrać.

Http z axios

Konfiguruj

Do żądania internetowego można również użyć osi bibliotek.

Jest łatwy w konfiguracji. W tym celu możesz utworzyć plik axios.js na przykład:

import * as axios from 'axios';

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

export { instance as default };

a następnie użyj go w dowolnym pliku.

Upraszanie

Aby uniknąć używania wzorca „szwajcarski nóż” dla każdej usługi na zapleczu, możesz utworzyć osobny plik z metodami dla tego w folderze dla funkcji integracji:

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;

Testowanie

Istnieje specjalna biblioteka do testowania axios: axios-mock-adapter .

Za pomocą tej biblioteki możesz ustawić dowolną odpowiedź, jaką chcesz przetestować. Możesz także skonfigurować specjalne błędy dla swoich metod Axois. Możesz dodać go do pliku axios.js utworzonego w poprzednim kroku:

import MockAdapter from 'axios-mock-adapter';

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

na przykład.

Sklep Redux

Czasami musisz dodać do nagłówków token autoryzacji, który prawdopodobnie przechowujesz w sklepie redux.

W takim przypadku potrzebujesz innego pliku, interceptors.js z tą funkcją:

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

Następnie w konstruktorze elementu głównego możesz dodać to:

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

a następnie wszystkie Twoje żądania zostaną zrealizowane za pomocą tokena autoryzacyjnego.

Jak widać, axios jest bardzo prostą, konfigurowalną i przydatną biblioteką dla aplikacji opartych na React-Native.