بلاگ اول: چگونه از APIهای خارجی در پروژه‌های خود استفاده کنیم؟

استفاده از APIهای خارجی در پروژه‌های React (یا هر پروژه‌ی فرانت‌اند دیگر)، به شما اجازه می‌دهد تا داده‌های دنیای واقعی را به اپلیکیشن خود وارد کرده و آن را پویا و کاربردی‌تر کنید. این کار یکی از مهم‌ترین مهارت‌های توسعه‌دهندگان وب مدرن است.

در ادامه، به‌صورت کاملاً رسمی و ساخت‌یافته توضیح می‌دهم چگونه از APIهای خارجی استفاده کنیم:

۱. درک مفهوم API خارجی

API (رابط برنامه‌نویسی نرم‌افزار) مجموعه‌ای از توابع است که به برنامه‌ها اجازه می‌دهد با یکدیگر ارتباط برقرار کنند. APIهای خارجی (مثل OpenWeather، GitHub، یا Google Maps) داده‌هایی را از سرورهای خارج از اپلیکیشن شما در اختیار قرار می‌دهند.

۲. پیش‌نیازها

برای استفاده از API در React نیاز به موارد زیر دارید:

درک اولیه از JavaScript و React
آشنایی با توابع fetch یا کتابخانه‌هایی مانند axios
توانایی کار با Promiseها یا async/await

۳. یافتن و ثبت‌نام در یک API

بیشتر APIهای خارجی نیاز به کلید دارند. به‌عنوان مثال:

پس از ثبت‌نام، یک API Key به شما داده می‌شود که باید آن را در درخواست‌ها استفاده کنید.

۴. ارسال درخواست به API

روش پایه استفاده از API با fetch به شکل زیر است:

useEffect(() => {

  fetch('https://api.example.com/data?apiKey=YOUR_API_KEY')

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

    .then(data => setData(data))

    .catch(error => console.error('Error:', error));

}, []);

یا با استفاده از axios:

import axios from 'axios';

useEffect(() => {

  axios.get('https://api.example.com/data', {

    params: { apiKey: 'YOUR_API_KEY' }

  })

  .then(response => setData(response.data))

  .catch(error => console.error('Error:', error));

}, []);

۵. مدیریت وضعیت (State) و بارگذاری

برای مدیریت داده‌هایی که از API می‌گیرید:

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

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

const [error, setError] = useState(null);

useEffect(() => {

  fetch('https://api.example.com/data')

    .then(res => res.json())

    .then(json => {

      setData(json);

      setLoading(false);

    })

    .catch(err => {

      setError(err.message);

      setLoading(false);

    });

}, []);

۶. نمایش داده‌ها در رابط کاربری

if (loading) return <p>در حال بارگذاری...</p>;

if (error) return <p>خطا: {error}</p>;

return (

  <div>

    <h2>نتایج:</h2>

    <pre>{JSON.stringify(data, null, 2)}</pre>

  </div>

);

۷. نکات امنیتی و بهینه‌سازی

کلید API را در فایل .env نگه دارید و با استفاده از process.env فراخوانی کنید.
از debouncing یا throttling هنگام جستجوهای پی‌درپی استفاده کنید.
خطاها را به‌درستی هندل کنید تا تجربه کاربری بهتری ارائه دهید.
اگر نیاز به ارسال اطلاعات حساس دارید، آن را از طریق Backend انجام دهید.

۸. نمونه API واقعی

// دریافت وضعیت آب‌وهوا از OpenWeather

const apiKey = 'YOUR_API_KEY';

const city = 'Tehran';

fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`)

  .then(res => res.json())

  .then(data => console.log(data));