کتابخانه 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 در ری اکت !از 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(&quothttps://jsonplaceholder.typicode.com/posts&quot) .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 &quotaxios"const baseURL = &quothttps://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> );}با اجرای دستور بالا، پکیج axios که در NPM موجوده، روی پروژه فعلی شما نصب میشه.حالا بریم ببینیم چطور میشه یک GET Request ایجاد کرد جهت دریافت اطلاعات از سرور back-End ..ایجاد یک GET Request جهت دریافت اطلاعات از Back-End چجوریه ؟ساخت یک درخواست دریافت اطلاعات از Back-End یا همون Get Request تو کتابخانه Axios خیلی آسونه!تو تیکه کد زیر ما اینکار رو انجام دادیم :import axios from &quotaxios"const baseURL = &quothttps://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> );}با اجرای دستور بالا، پکیج axios که در NPM موجوده، روی پروژه فعلی شما نصب میشه.حالا بریم ببینیم چطور میشه یک GET Request ایجاد کرد جهت دریافت اطلاعات از سرور back-End ..ایجاد یک GET Request جهت دریافت اطلاعات از Back-End چجوریه ؟ساخت یک درخواست دریافت اطلاعات از Back-End یا همون Get Request تو کتابخانه Axios خیلی آسونه!تو تیکه کد زیر ما اینکار رو انجام دادیم :import axios from &quotaxios" const baseURL = &quothttps://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 &quotaxios"const baseURL = &quothttps://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: &quotمن عنوان این مقاله ام&quot, body: &quotمن توضیحات این مقاله ام&quot }) .then((response) => { setPost(response.data); }); } if (!post) return &quotNo post!&quot return ( <div> <h1>{post.title}</h1> <p>{post.body}</p> <button ={savePost}>ذخیره مقاله</button> </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 &quotaxios"const baseURL = &quothttps://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: &quotمن عنوان این مقاله ام&quot, body: &quotمن توضیحات این مقاله ام&quot }) .then((response) => { setPost(response.data); }); } if (!post) return &quotNo post!&quot return ( <div> <h1>{post.title}</h1> <p>{post.body}</p> <button ={savePost}>ذخیره مقاله</button> </div> );}زمانیکه روی دکمه “ذخیره مقاله” در خط 31 کلیک میکنیم، تابع savePost اجرا میشه. داخل تابع savePost از کتابخانه Axios استفاده کردیم و یک POST Request ایجاد کردیم ( خط 16 ). اگه به خط 17 و 18 دقت کنید، میبینید که اطلاعات مدنظر خودمون رو به سرور فرستادیم.آدرس API Endpoint رو در خط 3 مشخص کردیم ( آدرسی که باید عنوان و متن مقاله رو بهش بفرستیم )پس برای ایجاد یک POST Request ( ارسال اطلاعات به سرور ) باید از تیکه کد زیر استفاده ( برای axios در ریکت ) :axios.post(baseURL, { title: &quotعنوان مقاله&quot, body: &quotمتن مقاله&quot })ایجاد یک PUT Request جهت ویرایش اطلاعات در Back-End چجوریه ؟خیلی اوغات لازم داریم که یک داده ذخیره شده در سرور رو ویرایش کنیم. در چنین شرایطی باید از متود PUT ( برای ویرایش یک داده ) استفاده کنیم.استفاده از متود PUT در کتابخانه Axios خیلی آسونه!مثل مثال قبلی، تو تیکه کد زیر هم یک دکمه داریم. اما این دکمه عملیات ویرایش اطلاعات پست رو انجام میده :import axios from &quotaxios"const baseURL = &quothttps://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: &quotعنوان مقاله جدید&quot, body: &quotمتن مقاله جدید.&quot }) .then((response) => { setPost(response.data); }); } if (!post) return &quotهیچ پستی نیست&quot return ( <div> <h1>{post.title}</h1> <p>{post.body}</p> <button ={editPost}> ویرایش پست </button> </div> );}تو تیکه کد بالا ما از متود PUT در Axios برای ویرایش اطلاعات ذخیره شده در سرور استفاده کردیم. همانند متود POST ، متود PUT هم از ما یک آدرس API و اطلاعات جدید رو میگیره ( اطلاعات جدید در خط 17 و 18 مشخص شدن ).پس برای ویرایش اطلاعات موجود در سرور، باید از متود axios.put بصورت زیر استفاده کنیم ( برای Axios در React ) :axios.put(`api.frontEndi.com/posts/1`, { title: &quotعنوان مقاله جدید&quot, body: &quotمتن مقاله جدید.&quot })ایجاد یک DELETE Request جهت حذف اطلاعات در Back-End چجوریه ؟گاهی اوغات پیش میاد که ما نیاز داریم یک یا چند Data رو در سرور حذف کنیم. بطور مثال هنگامی که کاربر میخواد “دیلیت اکانت” کنه یا یکی از آیتم های لیست خودش رو حذف کنه.در چنین شرایطی ما باید از متود DELETE در Axios استفاده کنیم.تو تیکه کد زیر ما اینکار رو انجام دادیم :import axios from &quotaxios"import React from &quotreact"const baseURL = &quothttps://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(&quotمقاله با موفقیت حذف شد&quot); setPost(null) }); } if (!post) return &quotNo post!&quot return ( <div> <h1>{post.title}</h1> <p>{post.body}</p> <button ={deletePostHandler}> حذف پست </button> </div> );}ایجاد یک DELETE Request جهت حذف اطلاعات در Back-End چجوریه ؟گاهی اوغات پیش میاد که ما نیاز داریم یک یا چند Data رو در سرور حذف کنیم. بطور مثال هنگامی که کاربر میخواد “دیلیت اکانت” کنه یا یکی از آیتم های لیست خودش رو حذف کنه.در چنین شرایطی ما باید از متود DELETE در Axios استفاده کنیم.تو تیکه کد زیر ما اینکار رو انجام دادیم :لطفا برای مطالعه ادامه این مقاله در وبسایت فِرانت اِندی + مثالهای بیشتر روی لینک زیر کلیک کنید :کتابخانه axios در ری اکت