react-native
HTTP 요청

통사론

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

비고

웹 소켓

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

fetch API 및 Redux와 함께 Promise 사용

Redux는 React-Native와 함께 사용되는 가장 일반적인 상태 관리 라이브러리입니다. 다음 예제에서는 fetch API를 사용하고 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.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');
  }

이제 소켓 연결을 제대로 사용하려면 생성자에서 함수를 바인딩해야합니다. 우리는 5 초마다 소켓을 통해 서버에 ping을 보내고 (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 함수를 socket 객체와 연결해야합니다. 생성자에 다음 줄을 추가합니다.

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

이제 소켓 서버가 'dong'으로 방출 될 때마다 응용 프로그램이이를 수신 할 수 있습니다.

액티비티가있는 HTTP

구성

웹 요청의 경우 library axios 를 사용할 수도 있습니다.

쉽게 구성 할 수 있습니다. 이를 위해 파일 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 .

이 라이브러리를 사용하면 테스트를 위해 원하는 응답을 액시스로 설정할 수 있습니다. 또한 axois'es 방법에 대한 몇 가지 특별한 오류를 구성 할 수 있습니다. 이전 단계에서 생성 된 axios.js 파일에 추가 할 수 있습니다.

import MockAdapter from 'axios-mock-adapter';

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

예를 들면.

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

그러면 귀하의 모든 요청에 ​​귀하의 승인 토큰이 적용됩니다.

당신이 볼 수 있듯이 Axios는 반응 네이티브를 기반으로하는 응용 프로그램에 대해 매우 간단하고 구성 가능하며 유용한 라이브러리입니다.