react-native
Запросы HTTP

Синтаксис

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

замечания

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 с API-интерфейсом

Следует отметить, что Fetch не поддерживает обратные вызовы . См. Https://github.com/github/fetch/issues/89 .

Альтернативой является использование 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));

Более подробную информацию о выборке можно найти в MDN

Сетевое взаимодействие с 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();

Использование обещаний с API-интерфейсом fetch и Redux

Redux - самая распространенная библиотека управления государственными органами, используемая с React-Native. В следующем примере показано, как использовать API-интерфейс fetch и отправлять изменения в реестр состояния приложений с помощью reducex-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.io

Установить socket.io-client

npm i socket.io-client --save

Импортный модуль

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

Инициализировать в своем конструкторе

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

Теперь, чтобы правильно использовать ваше подключение к сокету, вы должны также связать свои функции с конструктором. Предположим, что нам нужно создать простое приложение, которое будет отправлять ping на сервер через сокет каждые 5 секунд (подумайте об этом как ping), а затем приложение получит ответ от сервера. Для этого давайте сначала создадим эти две функции:

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

Теперь нам нужно связать эти две функции в нашем конструкторе:

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

После этого нам также нужно связать функцию _getReply с сокетом, чтобы получить сообщение с сервера сокета. Для этого нам нужно прикрепить нашу функцию _getReply с помощью объекта сокета. Добавьте следующую конструкцию в наш конструктор:

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

Теперь, всякий раз, когда сервер сокета испускает «дон», ваше приложение сможет его получить.

Http с аксиомами

конфигурировать

Для веб-запроса вы также можете использовать библиотечные аксиомы .

Его легко настроить. Для этого вы можете создать файл axios.js, например:

import * as axios from 'axios';

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

export { instance as default };

а затем использовать его в любом файле, который вы хотите.

Запросы

Чтобы избежать использования шаблона «Швейцарский нож» для каждой службы на вашем сервере, вы можете создать отдельный файл с методами для этого в папке для интеграции функций:

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;

тестирование

Существует специальная библиотека для тестирования аксиом: axios-mock-adapter .

С помощью этого lib вы можете установить для axios любой ответ, который вы хотите для его тестирования. Также вы можете настроить некоторые специальные ошибки для ваших методов axois'es. Вы можете добавить его в файл axios.js, созданный на предыдущем шаге:

import MockAdapter from 'axios-mock-adapter';

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

например.

Магазин Redux

Иногда вам нужно добавить маркер авторизации, который вы, вероятно, сохраните в магазине redux.

В этом случае вам понадобится другой файл, interceptors.js с этой функцией:

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

Далее в конструкторе вашего корневого компонента вы можете добавить следующее:

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

а затем все ваши запросы будут сопровождаться вашим токеном авторизации.

Как вы можете видеть, аксиомы - это очень простая, настраиваемая и полезная библиотека для приложений, основанных на реакции-native.