react-native
HTTP अनुरोध

वाक्य - विन्यास

• प्राप्त करें (url, विकल्प) [। तब (...)

टिप्पणियों

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 एपीआई

यह ध्यान दिया जाना चाहिए कि 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();

भ्रूण एपीआई और Redux के साथ वादे का उपयोग करना

Redux सबसे आम राज्य प्रबंधन पुस्तकालय है जिसका उपयोग React-Native के साथ किया जाता है। निम्न उदाहरण दर्शाता है कि कैसे भ्रूण एपीआई का उपयोग करें और Redux-thunk का उपयोग करते हुए अपने एप्लिकेशन स्टेट reducer में परिवर्तन भेजें।

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

सॉकेट के साथ वेब सॉकेट

सॉकेट स्थापित करें। ग्राहक

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 सेकंड के बाद सॉकेट के माध्यम से एक सर्वर को पिंग भेजेगा (इसे पिंग मान लें), और फिर एप्लिकेशन को सर्वर से उत्तर मिल जाएगा। ऐसा करने के लिए, आइए पहले इन दो कार्यों को बनाएँ:

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

अब, जब भी सॉकेट सर्वर 'डोंग' के साथ निकलता है, तो आपका एप्लिकेशन इसे प्राप्त करने में सक्षम होगा।

कुल्हाड़ी के साथ एचटीपी

कॉन्फ़िगर

वेब अनुरोध के लिए आप लाइब्रेरी एक्सियोस का भी उपयोग कर सकते हैं।

इसे कॉन्फ़िगर करना आसान है। इस उद्देश्य के लिए आप फ़ाइल 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- अडैप्टर ।

इस लिबास के साथ आप किसी भी रिस्पॉन्स को एक्ससाइज करने के लिए सेट कर सकते हैं जिसे आप इसे टेस्ट करना चाहते हैं। इसके अलावा, आप अपने axois'es तरीकों के लिए कुछ विशेष त्रुटियों को कॉन्फ़िगर कर सकते हैं। आप इसे अपने axios.js फ़ाइल में प्रचलित कदम में जोड़ सकते हैं:

import MockAdapter from 'axios-mock-adapter';

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

उदाहरण के लिए।

Redux स्टोर

कभी-कभी आपको हेडर जोड़ने के लिए टोकन को अधिकृत करने की आवश्यकता होती है, जिसे आप संभवतः अपने रेडक्स स्टोर में स्टोर करते हैं।

इस मामले में आपको एक और फ़ाइल की आवश्यकता होगी, इस फ़ंक्शन के साथ इंटरसेप्टर्स.जेएस:

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 प्रतिक्रिया-मूल पर आधारित अनुप्रयोगों के लिए बहुत ही सरल, विन्यास योग्य और उपयोगी पुस्तकालय है।