کتابخانه Axios در ری اکت چیست ؟! آموزش Axios در ریکت !

کتابخانه Axios در ری اکت یکی از مهمترین و کاربردی ترین کتابخانه های فِرانت اِند هست که به ما اجازه میده با سرور Back-End خودمون ارتباط بگیریم. ( دریافت، ارسال، ویرایش و حذف اطلاعات )

تو اکثر پروژه های فِرانت اِند ما نیاز داریم که یکسری اطلاعات از سرور Back-End خودمون دریافت کنیم و داخل سایت نمایش بدیم.

این کار رو به کمک پروتکل های HTTP میتونیم انجام بدیم. ما با fetch در جاوااسکریپت آشنا هستیم و میدونیم که به کمک fetch میتونیم از سرور Back-End خودمون Data دریافت کنیم. اما fetch کافی نیست!

کتابخانه Axios در ریکت با ویژگی ها و قابلیت های فوق العاده ای که داره باعث شده که دیگه از fetch و سایر روش های دیگه دریافت اطلاعات از سرور استفاده نکنیم!

تو این مقاله میخوایم ببینیم کتابخانه Axios چیه و چرا باید از axios در ری اکت استفاده کنیم ؟

پس با فِرانت اِندی همراه باشید 🙂

کتابخانه Axios چیست ؟

کتابخانه axios یک کتابخانه جاوا اسکریپتی جهت ارتباط با Back-End هست که به ما اجازه میده درخواست های API به سرور Back-End خودمون ارسال کنیم.

در حقیقت axios یک کتابخانه promise-based هست که به ما اجازه میده کد های Async به کمک Async و Await بنویسیم.

به کمک کتابخانه axios میتونیم :

از Back-End اطلاعات دریافت کنیم. ( GET )

به Back-End اطلاعات ارسال کنیم . ( POST )

اطلاعات موجود در سرور رو ویرایش یا حذف کنیم. ( PUT و DELETE )

کتابخانه axios خیلی خیلی مشهوره و جامعه آماری خوبی داره. در حال حاضر این کتابخانه جاوااسکریپتی بیش از 50 میلیون دانلود هفتگی در NPM داره!!

50 میلیون دانلود هفتگی Axios در Npm !

دانلود هفتگی 50 میلیونی این کتابخونه محبوب نشون میده که جامعه آماری خیلی خوبی داره و قابل اعتماده.

Axios در ری اکت !

از Axios در ری اکت و سایر کتابخانه های جاوا اسکریپتی مثل Vue یا Angular میشه استفاده کرد.

استفاده از Axios در ریکت به ما اجازه میده خیلی راحت تر با API های اپیکیشن خودمون ارتباط بگیریم. axios در ری اکت امکانات و مزایای خیلی زیادی برای ما داره و کمک میکنه پروژه ما تمیز تر ( Clean Code ) باشه.

اگه باور ندارید Axios پروژه مارو تمیز تر میکنه، بیاید یه مقایسه بین fetch و Axios در React داشته باشیم ..

دریافت اطلاعات از سرور به کمک Fetch :

				
					const getPostsData = () => {
  fetch(‘https://jsonplaceholder.typicode.com/posts’)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error));
  }
}
 getPostsData();

دریافت اطلاعات از سرور به کمک Axios :

				
					const getPostsData = () => {
  axios
  .get("https://jsonplaceholder.typicode.com/posts")
  .then(data => console.log(data.data))
  .catch(error => console.log(error));
  };
 getPostsData();

شاید فکر کنیم تفاوت خیلی زیادی بین استفاده از Axios و Fetch نیست. اما اگه متود های PUT و DELETE رو هم در نظر بگیریم، میبینیم که Axios انتخاب بهتریه.

برای درک بهتر این موضوع، ما 5 دلیل میتونیم برای استفاده از axios در ری اکت بیاریم ..

کتابخانه axios خیلی خوب با داده های JSON کار میکنه :

بر خلاف سایر روش های دریافت اطلاعات از back-End مثل Fetch ، تو کتابخانه axios در ریکت ما نیازی به تبدیل Response ( پاسخ ) به JSON نداریم! خود Axios در پشت صحنه این کار رو برای ما انجام میده.

تو Axios نیازی به تنظیم header های اضافی نیست :

تو روش دریافت اطلاعات از سرور به کمک متود fetch ما باید یکسری header اضافه برای request خودمون تنظیم کنیم. مثل اینکه اصلا نوع درخواست ما چیه ( GET, POST , DELETE یا .. )

اما تو کتابخانه axios در ریکت دیگه نیازی به تنظیم هدر اضافی نیست. به کمک متود هایی که کتابخانه Axios در ری اکت در اختیار ما میزاره، میتونیم نوع درخواست رو بدون تنظیم Header اضافی مشخص کنیم.

به کمک کتابخانه Axios در ری اکت کمتر کد میزنیم!

تو کتابخانه Axios در ری اکت برای دسترسی به پاسخ دریافت شده از سرور back-End ، فقط کافیه از یک Callback به نام .then استفاده کنیم! اینجوری میتونیم به پاسخ سرور دسترسی داشته باشیم . . .

کتابخانه axios در ریکت امکان مدیریت خطا رو برای ما فراهم کرده ( Error Handler )

درصورت استفاده از axios در ریکت ما میتونیم خطاهای دریافتی رو بطور مناسبی مدیریت کنیم.

چطور از Axios در ری اکت استفاده کنیم ؟

حالا که فهمیدیم Axios چیه و چه مزایایی داره، بهتره بریم تو دل کد و ببینیم که چطور باید از axios در ریکت استفاده کرد ؟

استفاده از axios در React خیلی خیلی آسونه! با این حال ما سعی میکنیم مراحل استفاده از Axios رو خیلی ساده مطرح کنیم.

برای نصب Axios در ری اکت باید از دستور زیر استفاده کنیم :

				
					npm install axios

با اجرای دستور بالا، پکیج axios که در NPM موجوده، روی پروژه فعلی شما نصب میشه.

حالا بریم ببینیم چطور میشه یک GET Request ایجاد کرد جهت دریافت اطلاعات از سرور back-End ..

ایجاد یک GET Request جهت دریافت اطلاعات از Back-End چجوریه ؟

ساخت یک درخواست دریافت اطلاعات از Back-End یا همون Get Request تو کتابخانه Axios خیلی آسونه!

تو تیکه کد زیر ما اینکار رو انجام دادیم :

				
					import axios from "axios";

const baseURL = "https://jsonplaceholder.typicode.com/posts/1";

export default function App() {
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    axios.get(baseURL).then((response) => {
      setPost(response.data);
    });
  }, []);

  if (!post) return null;

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

تو خط 1 کتابخانه axios رو فراخوانی کردیم و تو خط 9 ازش استفاده کردیم.

عبارت axios.get یعنی ما قصد دریافت اطلاعات از سرور رو داریم.

تو خط 10 اطلاعات دریافت شده رو داخل State خودمون ذخیره کردیم ( در خط 6 )

برای اینکه دریافت اطلاعات از سرور هنگام Mounting کامپوننت صورت بگیره ( زمانیکه کامپوننت وارد DOM میشه ) ما از useEffect در ریکت استفاده کردیم.

پس برای دریافت اطلاعات از سرور باید از دستور زیر استفاده کنیم:

				
					axios.get('api.frontEndi.com/posts') // داخل پرانتز باید آدرس ای پی آی رو ذکر کنیم

ایجاد یک POST Request جهت ارسال اطلاعات به Back-End چجوریه ؟

سناریویی رو در نظر بگیریم که میخوایم یک Data رو به سرور Back-End بفرستیم تا ذخیره بشه. مثلا تو صفحه “ایجاد مقاله” کاربر یک عنوان و توضیحات مینویسه و ما باید اون اطلاعات رو به سرور Back-End بفرستیم تا ذخیره بشه.

در چنین شرایطی باید یک POST Request ایجاد کنیم و اطلاعات مدنظرمون رو به سرور بفرستیم. تو تیکه کد زیر اینکار رو انجام دادیم :

				
					import axios from "axios";

const baseURL = "https://jsonplaceholder.typicode.com/posts";

export default function App() {
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    axios.get(`${baseURL}/1`).then((response) => {
      setPost(response.data);
    });
  }, []);

  function savePost() {
    axios
      .post(baseURL, {
        title: "من عنوان این مقاله ام",
        body: "من توضیحات این مقاله ام"
      })
      .then((response) => {
        setPost(response.data);
      });
  }

  if (!post) return "No post!"

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <button onClick={savePost}>ذخیره مقاله</button>
    </div>
  );
}

زمانیکه روی دکمه “ذخیره مقاله” در خط 31 کلیک میکنیم، تابع savePost اجرا میشه. داخل تابع savePost از کتابخانه Axios استفاده کردیم و یک POST Request ایجاد کردیم ( خط 16 ). اگه به خط 17 و 18 دقت کنید، میبینید که اطلاعات مدنظر خودمون رو به سرور فرستادیم.

آدرس API Endpoint رو در خط 3 مشخص کردیم ( آدرسی که باید عنوان و متن مقاله رو بهش بفرستیم )

پس برای ایجاد یک POST Request ( ارسال اطلاعات به سرور ) باید از تیکه کد زیر استفاده ( برای axios در ریکت ) :

				
					axios.post(baseURL, {
        title: "عنوان مقاله",
        body: "متن مقاله"
      })

ایجاد یک PUT Request جهت ویرایش اطلاعات در Back-End چجوریه ؟

خیلی اوغات لازم داریم که یک داده ذخیره شده در سرور رو ویرایش کنیم. در چنین شرایطی باید از متود PUT ( برای ویرایش یک داده ) استفاده کنیم.

استفاده از متود PUT در کتابخانه Axios خیلی آسونه!

مثل مثال قبلی، تو تیکه کد زیر هم یک دکمه داریم. اما این دکمه عملیات ویرایش اطلاعات پست رو انجام میده :

				
					import axios from "axios";

const baseURL = "https://jsonplaceholder.typicode.com/posts";

export default function App() {
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    axios.get(`${baseURL}/1`).then((response) => {
      setPost(response.data);
    });
  }, []);

  function editPost() {
    axios
      .put(`${baseURL}/1`, {
        title: "عنوان مقاله جدید",
        body: "متن مقاله جدید."
      })
      .then((response) => {
        setPost(response.data);
      });
  }

  if (!post) return "هیچ پستی نیست"

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <button onClick={editPost}> ویرایش پست </button>
    </div>
  );
}

تو تیکه کد بالا ما از متود PUT در Axios برای ویرایش اطلاعات ذخیره شده در سرور استفاده کردیم. همانند متود POST ، متود PUT هم از ما یک آدرس API و اطلاعات جدید رو میگیره ( اطلاعات جدید در خط 17 و 18 مشخص شدن ).

پس برای ویرایش اطلاعات موجود در سرور، باید از متود axios.put بصورت زیر استفاده کنیم ( برای Axios در React ) :

				
					 axios.put(`api.frontEndi.com/posts/1`, {
        title: "عنوان مقاله جدید",
        body: "متن مقاله جدید."
      })

ایجاد یک DELETE Request جهت حذف اطلاعات در Back-End چجوریه ؟

گاهی اوغات پیش میاد که ما نیاز داریم یک یا چند Data رو در سرور حذف کنیم. بطور مثال هنگامی که کاربر میخواد “دیلیت اکانت” کنه یا یکی از آیتم های لیست خودش رو حذف کنه.

در چنین شرایطی ما باید از متود DELETE در Axios استفاده کنیم.

تو تیکه کد زیر ما اینکار رو انجام دادیم :

				
					import axios from "axios";
import React from "react";

const baseURL = "https://jsonplaceholder.typicode.com/posts";

export default function App() {
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    axios.get(`${baseURL}/1`).then((response) => {
      setPost(response.data);
    });
  }, []);

  function deletePostHandler() {
    axios
      .delete(`${baseURL}/1`)
      .then(() => {
        alert("مقاله با موفقیت حذف شد");
        setPost(null)
      });
  }

  if (!post) return "No post!"

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <button onClick={deletePostHandler}> حذف پست </button>
    </div>
  );
}

تو تیکه کد بالا، با کلیک روی دکمه “حذف پست” در خط 30 ، تابع deletePostHandler ( در خط 15 ) اجرا میشه.

داخل این تابع از متود delete استفاده کردیم ( درصورت استفاده از axios در ریکت ، میتونیم از این متود استفاده کنیم )

برای استفاده از متود delete در Axios باید بصورت زیر عمل کنیم :

				
					axios.delete('api.frontEndi.com/1')

حالا که 4 عمل اصلی در Axios رو یادگرفتیم ( post , delete , get , put ) میتونیم بریم سراغ سایر ویژگی ها و قابلیت های Axios در ریکت !

تو ابتدای همین مقاله، گفتیم که Axios در ری اکت ما اجازه مدیریت ارور هارو میده ( Error Handler ) اما بریم یکم جزئی تر راجبش صحبت کنیم . . .

مدیریت خطا در axios چطوریه ؟

تاحالا به این فکر کردید که اگه هنگام درخواست به سرور یک مشکلی بوجود بیاد ( اروری رخ بده ) چه اتفاقی میوفته ؟!

مثلا فرض کنید ما به یک آدرس اشتباه ( End Point اشتباه ) درخواست بزنیم یا اینترنت کاربر قطع بشه!

تو چنین شرایطی ما یک ارور دریافت میکنیم. کتابخانه axios در ریکت به ما اجازه مدیریت خطا های صورت گرفته رو میده.

تو مثال زیر، ما مدیریت خطا رو در خط 14 انجام دادیم.

در حقیقت گفتیم اگه اروری وجود داشت، اون ارور رو داخل یک State بریز تا بتونیم به کاربر نمایشش بدیم :

				
					import axios from "axios";
import React from "react";

const baseURL = "https://jsonplaceholder.typicode.com/posts";

export default function App() {
  const [post, setPost] = React.useState(null);
  const [error, setError] = React.useState(null);

  React.useEffect(() => {
    // invalid url will trigger an 404 error
    axios.get(`${baseURL}/asdf`).then((response) => {
      setPost(response.data);
    }).catch(error => {
      setError(error);
    });
  }, []);
  
  if (error) return `Error: ${error.message}`;
  if (!post) return "No post!"

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

تو تیکه کد بالا به این دلیل که EndPoint ( آدرس API ) اشتباهی رو انتخاب کردیم ( در خط 12 )، کتابخانه Axios ارور برمیگردونه و اصلا متود .then اجرا نمیشه.

متودی که هنگام برخوردن به Error اجرا میشه، متود .catch هست.

متود catch در Axios برای ما اطلاعات ارور رو دریافت میکنه. تو این مثال، ما اطلاعات ارور دریافتی رو داخل یک State ذخیره کردیم تا به کاربر نمایش بدیم.

در حقیقت اروری که کتابخانه Axios به ما برمیگردونه و داخل State ذخیره میشه متن زیر هست :

Error: Request failed with status code 404

ساخت یک نمونه ( Instance ) از Axios

بیاید یک سناریو رو در نظر بگیریم…

ما توی اپیکیشن خودمون ده ها بار قراره API Call داشته باشیم و با سرور Back-End ارتباط بگیریم.

( مثلا فرض کنید 80 بار باید api call داشته باشیم )

ما باید تو تمامی این 80 مرتبه، بخش ثابت API Endpoint رو بنویسیم. در حقیقت آدرس api.frontEndi.com توی تمامی این 80 درخواست، مشترکه پس نیازی نیست هر بار این آدرس رو بنویسیم.

ما میتونیم یک نمونه ( Instance ) از Axios بسازیم و یکسری تنظیمات و مقادیر ثابت رو بهش معرفی کنیم.

با انجام اینکار دیگه نیازی نیست در هر Api Call ( درخواست به سرور ) آدرس api.frontEndi.com و تنظیمات تکراری رو بنویسیم.

تو تیکه کد زیر، یک instance از axios در ریکت ساختیم تا هربار آدرس ثابت API رو ننویسیم :

				
					import axios from "axios";
import React from "react";

const client = axios.create({
  baseURL: "https://jsonplaceholder.typicode.com/posts" 
});

export default function App() {
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    client.get("/1").then((response) => {
      setPost(response.data);
    });
  }, []);

  function deletePost() {
    client
      .delete("/1")
      .then(() => {
        alert("Post deleted!");
        setPost(null)
      });
  }

  if (!post) return "هیچ پستی نیست!"

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <button onClick={deletePost}> حذف پست </button>
    </div>
  );
}

اگه به خط 4 دقت کنید، میبینید که به کمک متود .create در Axios تونستیم یک نمونه از Axios ایجاد کنیم. حالا میتونیم به این نمونه ایجاد شده، هر تنظیمات و مقادیر دلخواهی اختصاص بدیم.

ما اینجا بهش baseURL دادیم، یعنی دیگه نیازی نیست تو هر درخواست این آدرس api رو وارد کنیم.

اگه به خط 12 دقت کنیم میبینیم که ما از axios.get استفاده نکردیم، از client.get استفاده کردیم. و اینکه دیگه آدرس کامل API رو وارد نکردیم، صرفا بخش اضافه و جدید API رو وارد کردیم ( که در اینجا مقدار 1 هست )

پیاده سازی Async-Await به کمک Axios در ری اکت

ما میتونیم کد های Async به کمک axios در ریکت بنویسیم. هیچ لزومی نیست که حتما از .then و .catch استفاده کنیم!

تو تیکه کد زیر ما کد های Async-Await دلخواه خودمون رو تو کتابخانه Axios نوشتیم :

				
					import axios from "axios";
import React from "react";

const client = axios.create({
  baseURL: "https://jsonplaceholder.typicode.com/posts" 
});

export default function App() {
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    async function getPost() {
      const response = await client.get("/1");
      setPost(response.data);
    }
    getPost();
  }, []);

  async function deletePost() {
    await client.delete("/1");
    alert("Post deleted!");
    setPost(null);
  }

  if (!post) return "No post!"

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <button onClick={deletePost}> حذف پست </button>
    </div>
  );
}

تو روش بالا ما از Async-Await استفاده کردیم ( بجای then و catch )

اگه دقت کنید میبینید که حجم کد کمتری تولید شده و کد ما تمیزتره.

Axios در ریکت !

تو این مقاله در مورد axios در ریکت و مزایای کتابخانه Axios صحبت کردیم. صادقانه کمتر توسعه دهنده فِرانت اِندی رو میشه پیدا کرد که کار با Axios رو بلد نباشه.

چرا که کتابخانه Axios یکی از بزرگترین، قدیمی ترین و بهترین کتابخانه های کار با API هست.

پیشنهاد میکنم حتما از این کتابخانه ارزشمند و کاربردی تو پروژه های خودتون استفاده کنید 🙂

کتابخانه Axios چیست ؟

بطور ساده و خلاصه، کتابخانه axios یک کتابخانه جاوا اسکریپتی جهت ارتباط با Back-End هست که به ما اجازه میده درخواست های API به سرور Back-End خودمون ارسال کنیم.

میشه از axios در ری اکت استفاده کرد ؟

بله.

ما میتونیم از کتابخانه axios در react استفاده کنیم.

نه تنها از axios در React میشه استفاده کرد، بلکه از Axios در سایر فریمورک ها و کتابخانه های جاوا اسکریپتی مثل ویو جی اس و انگولار هم میشه استفاده کرد.

وبلاگ

کتابخانه Axios در ری اکت چیست ؟! آموزش Axios در ریکت !

کتابخانه Axios چیست ؟

50 میلیون دانلود هفتگی Axios در Npm !

Axios در ری اکت !

دریافت اطلاعات از سرور به کمک Fetch :

دریافت اطلاعات از سرور به کمک Axios :

کتابخانه axios خیلی خوب با داده های JSON کار میکنه :

تو Axios نیازی به تنظیم header های اضافی نیست :

به کمک کتابخانه Axios در ری اکت کمتر کد میزنیم!

کتابخانه axios در ریکت امکان مدیریت خطا رو برای ما فراهم کرده ( Error Handler )

چطور از Axios در ری اکت استفاده کنیم ؟

ایجاد یک GET Request جهت دریافت اطلاعات از Back-End چجوریه ؟

ایجاد یک POST Request جهت ارسال اطلاعات به Back-End چجوریه ؟

ایجاد یک PUT Request جهت ویرایش اطلاعات در Back-End چجوریه ؟

ایجاد یک DELETE Request جهت حذف اطلاعات در Back-End چجوریه ؟

مدیریت خطا در axios چطوریه ؟

ساخت یک نمونه ( Instance ) از Axios

پیاده سازی Async-Await به کمک Axios در ری اکت

Axios در ریکت !

درباره احمد احمدنژاد

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

صفحات فِرانت اِندی

تماس با ما

شبکه های اجتماعی