نحوه استفاده از API در React Native

در اپلیکیشن های تلفن همراه گاهی اوقات نیاز پیدا می کنید که اطلاعات خودتون رو از طریق یک URL دریافت کنید.گرفتن اطلاعات از سرور از طریق URL یک امر عادی و پرکاربرد است.در React Native شما می توانید با استفاده از Fetch API یا axios درخواست به سرور بزنید و اطلاعات موردنیاز رو دریافت کنید.

Fetch

Fetch API یک رابط جاوا اسکریپتی فراهم می کند که می تواند منابع مورد نیاز را به صورت asynchronously از طریق network دریافت کند.این API بسیار شبیه به XMLHttpRequest است که برای همین کار استفاده می شود اما fetch API بسیار قوی تر و منعطف تر است.

درخواست Data با Fetch

در react native شما می توانید با استفاده از () fetch از API درخواست data کنید.

syntax آن به شکل زیر است:

fetch('https://examples.com/data.json');

1	fetch('https://examples.com/data.json');

ما خیلی راحت یک URL را به fetch برای درخواست پاس می دهیم.

علاوه بر URL ما می توانیم یک argument اختیاری به fetch بدهیم.در اینجا شما می توانید درخواست خودتان را سقارشی سازی کنید

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

fetch('https://examples.com/data.json', {

method: 'POST',

headers: {

Accept: 'application/json',

'Content-Type': 'application/json'

body: JSON.stringify({

firstParam: 'yourValue'

})

});

در قطعه کد بالا اولین argument که () fetch دریافت می کند URL است و دومین argument یک object است که properties هایی مثل method, headers و body دارد.method برای مشخص کردن نوع درخواست ما که به صورت GET, POST و … باشد،استفاده می شود.body یک getter ساده است که محتوای دریافتی را به صورت Json نمایش می دهد.

ما همچنین می توانیم properties های دیگری را در این object مثل cache, context, credentials, headers و … قرار دهیم.شما می توانید Request for Fetch API را برای کسب اطلاعات بیشتر در این مورد مطالعه کنید.

مدیریت کردن response دریافتی از fetch

زمانی که یک درخواست به سرور ارسال می شود، سرور یک response را در پاسخ برگشت می دهد.در اپلیکیشن های توسعه داده شده با React Native ما باید این response را مدیریت کنیم.

ارسال درخواست و انتظار برای پاسخ asynchronous ناهمزمان است و ما می توانیم fetch call را در React Native در یک تابعasync-await قرار دهیم همانطور که در زیر نشان داده شده است.

const getArticlesFromApi = async () => {
    let response = await fetch(
      'https://examples.com/data.json'
    );
    let json = await response.json();
    return json.movies;
  }
};

const getArticlesFromApi = async () => {

let response = await fetch(

'https://examples.com/data.json'

);

let json = await response.json();

return json.movies;

}

};

در قطعه کد فوق منتظر بازگشت response هستیم.سپس response دریافتی را به json تبدیل کرده و در متغیر json ذخیره می کنیم.اگر از async/await تا حالا استفاده نکردید، پیشنهاد می کنم مقاله async/await در جاوا اسکریپت را مطالعه کنید.

مدیریت کردن Error ها

در هنگام استفاده از API باید خطاهای احتمالی که ممکن است رخ بدهد، را مدیریت کنیم. ما می توانیم در صورت بروز خطا، یک پیغام به کاربر نشان دهیم یا آنها را log کنیم. برای اینکار try و catch را به کد خود اضافه می کنیم.

const getArticlesFromApi = async () => {
    try {
      let response = await fetch(
        'https://examples.com/data.json'
      );
      let json = await response.json();
      return json.movies;
    } catch (error) {
       console.error(error);
    }
  };

const getArticlesFromApi = async () => {

try {

let response = await fetch(

'https://examples.com/data.json'

);

let json = await response.json();

return json.movies;

} catch (error) {

console.error(error);

}

};

ساخت اپلیکیشن فروشگاهی مشابه دیجی کالا با React Native ،React js ،Node js و GraphQL

Fetching Data در React Native

اکنون می خواهیم داده ها را از یک فایل json در یک نمونه پروژه React Native دریافت کنیم. محتوای فایل json را می توانید از اینجا بگیرید: testAPI.json

این فایل حاوی آرایه ای از مقالات به همراه عنوان، توضیحات است. هر مقاله دارای شناسه و عنوان است. ما می خواهیم لیستی از مقالات را در اپلیکیشن React Native خود به همراه شناسه آن نمایش دهیم. برای انجام این کار می توانیم مراحل خلاصه شده زیر را دنبال کنیم:

گام های fetch data :

پاس دادن URL به fetch API. در اینجا URL آدرسی می باشد که فایل json در آن ذخیره شده است.
در مرحله بعدی ما response را به json تبدیل می کنیم.
UI پاسخ برگشت داده شده از سمت سرور را نمایش می دهد.
نمایش خطاها در صورت بروز مشکل

import React, { useEffect, useState } from 'react';
import { FlatList, Text, View } from 'react-native';

export default App = () => {
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState([]);
  console.log(data);

  useEffect(() => {
    fetch('https://raw.githubusercontent.com/adhithiravi/React-Hooks-Examples/master/testAPI.json')
      .then((response) => response.json())
      .then((json) => setData(json))
      .catch((error) => console.error(error))
      .finally(() => setLoading(false));
  }, []);

  return (

    <View style={{ flex: 1, padding: 24 }}>
      {isLoading ? <Text>Loading...</Text> : 
      ( <View style={{ flex: 1, flexDirection: 'column', justifyContent:  'space-between'}}>
          <Text style={{ fontSize: 18, color: 'green', textAlign: 'center'}}>{data.title}</Text>
          <Text style={{ fontSize: 14, color: 'green', textAlign: 'center', paddingBottom: 10}}>Articles:</Text>
          <FlatList
            data={data.articles}
            keyExtractor={({ id }, index) => id}
            renderItem={({ item }) => (
              <Text>{item.id + '. ' + item.title}</Text>
            )}
          />
        </View>
      )}
    </View>
  );
};

import React, { useEffect, useState } from 'react';

import { FlatList, Text, View } from 'react-native';

export default App = () => {

const [isLoading, setLoading] = useState(true);

const [data, setData] = useState([]);

console.log(data);

useEffect(() => {

fetch('https://raw.githubusercontent.com/adhithiravi/React-Hooks-Examples/master/testAPI.json')

.then((response) => response.json())

.then((json) => setData(json))

.catch((error) => console.error(error))

.finally(() => setLoading(false));

}, []);

return (

{isLoading ? <Text>Loading...</Text> :

( <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'space-between'}}>

<Text style={{ fontSize: 18, color: 'green', textAlign: 'center'}}>{data.title}</Text>

<Text style={{ fontSize: 14, color: 'green', textAlign: 'center', paddingBottom: 10}}>Articles:</Text>

<FlatList

data={data.articles}

keyExtractor={({ id }, index) => id}

renderItem={({ item }) => (

<Text>{item.id + '. ' + item.title}</Text>

)}

</View>

)}

</View>

);

};

اگر می خواهید React Native (ری اکت نیتیو) را به صورت کامل و در قالب پروژه های مختلف یاد بگیرید پیشنهاد می کنیم در دوره آموزش جامع و پروژه محور React native شرکت کنید.

آموزش جامع و پروژه محور react native

در این مثال ما از functional React component استفاده می کنیم.من قصد دارم داده ها زمانی که کامپوننت mount شد از سرور بگیرم. بهترین مکان برای اینکار useEffect hook است. من از دو تا state به نام های isLoading و data استفاده می کنم. data پاسخ برگشت داده شده از سمت سرور و isLoading وضعیت درخواست را ذخیره می کند.

بیایید آنچه را که در useEffect hook رخ می دهد را بررسی کنیم

 useEffect(() => {
    fetch('https://raw.githubusercontent.com/adhithiravi/React-Hooks-Examples/master/testAPI.json')
      .then((response) => response.json())
      .then((json) => setData(json))
      .catch((error) => console.error(error))
      .finally(() => setLoading(false));
  }, []);

useEffect(() => {

fetch('https://raw.githubusercontent.com/adhithiravi/React-Hooks-Examples/master/testAPI.json')

.then((response) => response.json())

.then((json) => setData(json))

.catch((error) => console.error(error))

.finally(() => setLoading(false));

}, []);

useEffect hook مشابه componentDidMount و componentDidUpdate در class compenent ها است. برای آشنایی بیشتر با این hook پیشنهاد می کنم مقاله راهنمای کامل کار با useEffect Hook در React را مطالعه کنید.

fetch call از طریق url ارسال می شود.سپس پاسخ دریافت شده تجزیه می شود.از setDate برای ذخیره سازی پاسخ به صورت json استفاده می شود. سپس در صورت بروز خطا، آنها در در console نمایش می دهد. سرانجام و در نهایت مقدار isLoading را false قرار می دهیم.

[منبع]

مطالب زیر را حتما مطالعه کنید

4 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

سعید گفت:

فوریه 19, 2021 در 9:56 ق.ظ

سلام خداقوت
وقتی جوابی از api دریافت میکنیم و اون جواب به شکل جیسون هستش
میخواهم اون جواب رو در صفحه ای از سایت نمایش بدم به زبون php یا html
مثل قیمت ارز
روش تغییر جواب جیسون رو اگه میشه توضیح بدین

پاسخ
- مهدی گفت:
  
  فوریه 19, 2021 در 5:45 ب.ظ
  
  سلام.سلامت باشید
  برای استفاده در وب سایتی که با php و html نوشته شده باید response برگشتی رو با استفاده از javascript به dom اضافه کنید
  
  پاسخ
mohsen.fallah گفت:

ژانویه 18, 2021 در 1:34 ب.ظ

سلام وقت بخیر
آقا اگه بخوایم fetch رو جوری استفاده کنیم که صبر کنه تا اون چیزی که ما خوایم اومد بعد finally بشه و جواب بیاد چی؟
یعنی api رو کال میکنم جوابش ممکنه دیر بیاد یا از بین یه سری جواب، اگر یه چیز خاص اومد اوکی کنم
نمیدونم تونستم برسونم یا نه
فکر کنید شبیه سوکت میخوام باهاش رفتار کنم
میشه یا برم سراغ همون سوکت

پاسخ
- مهدی گفت:
  
  ژانویه 18, 2021 در 4:36 ب.ظ
  
  سلام
  اگر قصد دارید که داده ها رو به صورت stream داشته باشید
  سوکت گزینه مناسبی هست
  
  پاسخ

Fetch

درخواست Data با Fetch

مدیریت کردن response دریافتی از fetch

مدیریت کردن Error ها

Fetching Data در React Native

گام های fetch data :

[منبع]

مطالب زیر را حتما مطالعه کنید

چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟

تفاوت توسعه برنامه های android و ios

استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)

نمایش PDF در react native

استفاده از Mapbox در react native (ری اکت نیتیو)

نمایش عکس های گوشی در react native (ری اکت نیتیو)

4 دیدگاه

دیدگاهتان را بنویسید لغو پاسخ