آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش ارتباطات تحت شبکه در React Native Apps

دوره های مرتبط با این مقاله

آموزش ارتباطات تحت شبکه در React Native Apps

اغلب application های موبایل منابع خود را از شبکه load می کنند. ممکن است بخواهید یک POST request به یک REST API بزنید، یا محتوایی ثابت از یک سرور بگیرید.

استفاده از Fetch

React Native، Fetch API را برای کارهای تحت شبکه در اختیار می گذارد. اگر از XMLHttpRequest یا API های دیگر استفاده کرده باشید با fetch آشنایید. می توانید برای مطالعه ی بیشتر به راهنمای MDN درمورد نحوه استفاده از Fetch مراجعه کنید.

Request

برای دریافت محتوا از یک آدرس فرضی، کافی است آدرس را به fetch() بدهید:


fetch('https://mywebsite.com/mydata.json');

همچنین fetch یک آرگومان دیگر هم می تواند بگیرد و به شما امکان کنترل بیشتری روی HTTP request بدهد. ممکن است بخواهید header اضافه کنید، یا یک request POST بزنید:


fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  }),
});

برای لیست کامل property ها سری به مستندات Fetch Request بزنید.


آموزش React Native

مدیریت Response ها

مثال بالا نحوه ارسال یک request را نشان می دهد. در بسیاری موارد ممکن است بخواهید روی response سرور کاری انجام دهید.

ارتباطات در شبکه ذاتا async هستند. متد Fetch یک Promise برمی گرداند که نوشتن کد برای سناریوهای async را آسان می کند:


function getMoviesFromApiAsync() {
  return fetch('https://facebook.github.io/react-native/movies.json')
    .then((response) => response.json())
    .then((responseJson) => {
      return responseJson.movies;
    })
    .catch((error) => {
      console.error(error);
    });
}

میتوان از دستور async/await در ES2017 نیز در یک application React Native استفاده کرد:


async function getMoviesFromApi() {
  try {
    let response = await fetch(
      'https://facebook.github.io/react-native/movies.json',
    );
    let responseJson = await response.json();
    return responseJson.movies;
  } catch (error) {
    console.error(error);
  }
}

فراموش نکنید که خطاهای ممکن هنگام کار با fetch را catch کنید، در غیر این صورت هیچ هشداری نخواهد بود.


import React from 'react';
import { FlatList, ActivityIndicator, Text, View  } from 'react-native';
export default class FetchExample extends React.Component {
  constructor(props){
    super(props);
    this.state ={ isLoading: true}
  }
  componentDidMount(){
    return fetch('https://facebook.github.io/react-native/movies.json')
      .then((response) = > response.json())
      .then((responseJson) = > {
        this.setState({
          isLoading: false,
          dataSource: responseJson.movies,
        }, function(){
        });
      })
      .catch((error) = >{
        console.error(error);
      });
  }
  render(){
    if(this.state.isLoading){
      return(
                        < View style={ {flex: 1, padding: 20}} >
                        < ActivityIndicator / >
        < /View >
      )
    }
    return(
                        < View style={ {flex: 1, paddingTop:20}} >
                        < FlatList data={this.state.dataSource}
                                  renderItem={({item}) = > < Text >{item.title}, {item.releaseYear}< /Text >}
          keyExtractor={({id}, index) = > id}
        / >
      < /View >
    );
  }
}


به طور پیش فرض iOS تمام request هایی را که encryp نشده اند و از SSL استفاده نمی کنند block می کند. اگر می خواهید از آدرسی بدون SSL، دیتا بگیرید ابتدا باید یک App Transport Security exception App Transport Security exception اضافه کنید. اگر از قبل می دانید که کدام دامنه ها استفاده می شوند، بهتر است فقط برای آن دامنه ها exception اضافه کنید. اگر دامنه ها تا زمان اجرا مشخص نیستند می توانید ATS را کامل غیرفعال کنید. البته از ابتدای 2017، برای غیرفعال کردن ATS به دلیلی موجه احتیاج دارد. مستندات Apple را برای اطلاعات بیشتر ببینید.

استفاده از کتابخانه های دیگر

XMLHttpRequest API در React Native هست، به این معنا که شما می توانید از کتابخانه های فرعی مثل frisbee یا Axios که براساس آن نوشته شده اند استفاده کنید، یا خود XMLHttpRequest API را مستقیما استفاده کنید.


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

امنیت برای XMLHttpRequest در application ها متفاوت از web است، چرا که مفهوم CORS در application معنا ندارد.

پشتیبانی از Web Socket

React Native از Web Socket نیز پشتیبانی می کند، پروتکلی که کانال های دوطرفه ارتباطی را روی یک ارتباط TCP فراهم می کند:


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

مشکلات رایج در رابطه با fetch و احراز هویت مبتنی بر کوکی ها (cookie based authentication)

استفاده از موارد زیر هنگام کار با fetch، فعلا ممکن نیست:


  • استفاده از redirect:manual
  • استفاده از credentials:omit
  • داشتن header های با نام یکسان در android. یک راه حل موقت در این لینک قابل پیاده سازی است.
  • احراز هویت مبتنی بر Cookie فعلا ناپایدار است. می توانید issue های مشابه را در اینجا ببینید.
  • در iOS وقتی خطای 302 اتفاق می افتد، اگر در کوکی Set-Cookie وجود داشته باشد، Cookie به درستی set نمی شود. از آنجا که redirect نمی تواند دستی انجام شود، اگر redirect حاصل یک session expired باشد، ممکن است request ها درون یک infinite loop بیفتد.
  • 660
  •    0
  • تاریخ ارسال :   1398/05/30

دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .