التعامل مع الشبكات في React Native

التشبيك (Networking)

تحتاج العديد من تطبيقات الجوال إلى تحميل الموارد من عنوان URL بعيد. قد ترغب في إرسال طلب POST إلى واجهة REST برمجيّة، أو قد تحتاج ببساطة إلى جلب محتوًى ثابت من خادم آخر.

استعمال أداة Fetch

يوفر React Native واجهة Fetch البرمجية للتعامل مع الشبكات. ستكون أداة Fetch مألوفة بالنسبة لك إن استخدمت XMLHttpRequest أو واجهات التشبيك البرمجية الأخرى سابقًا. يمكنك الرجوع إلى دليل MDN حول كيفيّة استخدام Fetch للحصول على معلومات إضافية.

إرسال الطلبات

لجلب محتوًى من عنوان URL مُعيّن، فمرِّره للدالة ‎fetch()‎ ببساطة كما يلي:

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

تقبل الدالة ‎fetch()‎ كذلك معاملًا ثانيًّا اختياريًّا يسمح لك بتخصيص طلب HTTP الذي تُريد إرساله. قد ترغب في تحديد ترويسات (headers) إضافية أو تقديم طلب POST عوضًا عن طلب GET:

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

ألقِ نظرة على توثيق Fetch Request لقائمة كاملة بالخاصيات الممكنة.

التعامل مع الرد

توضح الأمثلة أعلاه كيفيّة إرسال الطلبات، لكنّك ستحتاج إلى التّعامل مع الرّد في كثير من الحالات.

التشبيك عملية غير متزامنة (asynchronous) بطبيعتها. تعيد توابع Fetch وعدًا (Promise) يسهّل كتابة شيفرة برمجية تعمل بطريقة غير متزامنة:

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 في تطبيقات 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);
  }
}

لا تنسَ إمساك (catch) أي أخطاء قد ترميها ‎fetch‎، وإلا ستمرّ بصمت وسيصعب حلّ المشاكل التي قد تنشأ جرّاء ذلك.

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 افتراضيًّا أي طلبٍ غير مشفر باستخدام SSL. إن احتجت إلى جلب بيانات من عنوان URL غير مُشفّر (الذي يبدأ بالمقطع ‎http‎ عوضًا عن ‎https‎) ، فستحتاج أولا إلى إضافة استثناء App Transport Security . إذا كنت تعرف مسبقًا النطاقات التي ستحتاج إلى الوصول إليها، فمن الأفضل إضافة استثناءات لهذه النطاقات فقط؛ إذا لم تكن النطاقات معروفة حتى وقت تشغيل التطبيق، فيمكنك تعطيل ATS بالكامل. ومع ذلك لاحظ أنه اعتبارًا من يناير 2017، ستتطلب مراجعة سوق Apple للتطبيقات تبريرات معقولة لتعطيل ATS. راجع توثيق Apple لمزيد من المعلومات.

استعمال مكتبات تشبيك أخرى

واجهةُ XMLHttpRequest مضمَّنة مسبقًا في React Native. ما يعني أنّك تستطيع استخدام مكتباتِ طرفٍ ثالث (third party libraries) مثل ‎frisbee‎ أو ‎‎axios التي تعتمد عليها، أو يمكنك استخدام 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();

ملاحظة: يختلف نموذج الأمان الخاص بواجهة XMLHttpRequest عن ذلك الموجود على الويب، إذ لا يوجد مفهوم CORS في التطبيقات الأصيلة.

دعم WebSocket

يدعم React Native بروتوكول WebSockets كذلك، والذي يوفر قنوات اتصال ثنائية الاتجاه (full-duplex communication) عبر اتصال TCP واحد.

var ws = new WebSocket('ws://host.com/path');

ws.onopen = () => {
  // فُتِح الاتّصال
  ws.send('something'); // send a message
};

ws.onmessage = (e) => {
  // استُقبِلَت رسالة
  console.log(e.data);
};

ws.onerror = (e) => {
  // حدث خطأ
  console.log(e.message);
};

ws.onclose = (e) => {
  // أغلِق الإتصال
  console.log(e.code, e.reason);
};

تهانينا!

مبارك وصولك إلى هذه المرحلة من سلسلة الدروس هذه، يُمكنك الآن بناء تطبيقات جوال أصيلة بالمعرفة التي حصلت عليها! انظر هذه الصفحة للمزيد من الموارد وما يوفّره مجتمع React Native من أدوات وأمثلة وغير ذلك.

للمزيد من المعلومات حول React Native، انظر صفحة التوثيق الرئيسيّة.

مصادر

• صفحة Networking في توثيق React Native الرسمي.