نویسنده : مهندس امین حسن زاده

در این مقاله سعی داریم تا کاربرد Axios  را برای شما عزیزان شرح دهیم و دقیقا بگوییم که اگزیوس چیست و چه کاربردی دارد.

اگر با سیستم fetch و API در جاوااسکریپت کار کرده باشید می دانید که از fetch برای گرفتن دیتا اطلاعات به صورت json یا فایل های نظیر  jpeg, png, txt و … استفاده می شود. 

امروزه در وب مدرن نقش API و fetch بسیار پر کاربرد و حیاتی می باشد. به این دلیل که سایت ها و اپ های مدرن وب باید مطالب زیاد یا همون داده زیادی رو پردازش و ارائه دهند و در عین حال این عملیات پردازش با سرعت پیش رود و یا به اصطلاح سرعت لود کمتر شود. در این خصوص, نقش API و fetch بسیار پرنگ شده است. 

و اما اگزیوس Axios چیست ؟

در توضیح مختصر, اگزیوس یک سرویس گیرنده سبک بر اساس سرویس http در Angular.js است و شبیه به API و fetch در جاوااسکریپت عمل می کند.

اگزیوس بر پایه promise ها در جاوااسکریپت کار می کند که این امکان را به شما می دهد تا از سیستم async و await استفاده کنید تا کدهایی خواناتر به صورت ناهمزمان یا asynchronous داشته باشید. 

همچنین می‌توانید درخواست‌ها را رهگیری یا لغو کنید. همچنین محافظ داخلی در مقابل جعل درخواست‌های متقابل سایت در اختیارتان قرار می دهد.

اما تفاوت آن با fetch چیست ؟

1) تبدیل داده های json : اگزیوس به طور خودکار داده ها را در هنگام ارسال درخواست, به صورت رشته در می آورد (در اصطلاح stringify می کند) ولی در fetch این کار را باید به صورت دستی انجام دهیم. یعنی ابتدا به صورت ()json در آوریم سپس داده ها را از آن استخراج کنیم. ولی اگزیوس این کار را انجام می دهد و فقط کافیست تا داده ها را از response بیرون کشیم.

2) رهگیری HTTP : یکی دیگر از خاصیت های اگزیوس, رهگیری درخواست HTTP هست. و به این معنا است که می توانید مقدار درخواست یا response (پاسخ) را تغییر دهید. به صورت عمقی تر، شما می‌توانید از رهگیرها برای تبدیل درخواست (به عنوان مثال، ورود به سیستم، احراز هویت، و غیره) قبل از ارسال اگزیوس (رهگیری درخواست) استفاده کنید یا قبل از اینکه اگزیوس پاسخ را به کد شما برگرداند، پاسخ را تغییر دهید. اگزیوس دارای ویژگی های داخلی هست که امکان رهگیری درخواست را می دهند ولی fetch این قابلیت را ندارد.

3) پایان زمان پاسخ : اکثر توسعه دهندگان اگزیوس را به دلیل سادگی تنظیم گزینه timeout (پایان زمان) در اگزیوس به fetch ترجیح می دهند. با ویژگی timeout در اگزیوس، می‌توانید زمان را بر حسب میلی‌ثانیه تنظیم کنید که زمان قبل از لغو درخواست در نظر گرفته می‌شود:

axios({ method: `post`, url: `/login`, timeout: 5000, // 5 seconds timeout data: { email: `Michel@outlook.com`, password: `*****` } }) .then(response => /*login response*/) .catch(error => console.error(`timeout exceeded`))

 Fetch عملکرد مشابهی را از طریق AbortController ارائه می دهد. اما به سادگی اگزیوس نیست.

4) درخواست های چند گانه : هم اگزیوس و هم fetch امکان دسترسی به چند درخواست را دارند ولی در اگزیوس این عمل ساده تر انجام شده است. به طور ساده اگزیوس با استفاده از متود ()axios.all یک آرایه ای از درخواست ها آماده می کند که در آخر با استفاده از ()axios.spread, خصوصیات آرایه پاسخ را به متغیرهای جداگانه به صورت زیر اختصاص می دهد:

با ارسال آرایه درخواست ها به متد داخلی ()Promise.all می توانید به نتایج مشابهی با fetch برسید. سپس پاسخ می تواند با استفاده از یک تابع async انجام شود:

Promise.all([ fetch('https://api.github.com/users/mojombo'), fetch('https://api.github.com/users/defunkt') ]) .then(async([res1, res2]) => { const user1 = await res1.json(); const user2 = await res2.json(); console.log(user1.login + 'repos url is' + user1.repos_url); console.log(user2.login + 'repos url is' + user2.repos_url); }) .catch(error => { /*errors*/ });

5) امنیت CSRF : اگزیوس دارای پشتیبانی داخلی از CSRF (جعل درخواست بین سایتی) است تا از درخواست های نامتقابل سایت جلوگیری شود در حالی که fetch این امکان را ندارد.

6) پیشرفت درخواست آپلود/دانلود : اگزیوس ماژول Axios Progress Bar را برای پیشرفت انتقال داده ها در اختیار توسعه دهندگان قرار می دهد که بتوانند نشانگر بارگزاری را در حین ارتباط کاربر با سرور را نشان دهد. ولی fetch همچین ویژگی را ندارد.

آموزش نصب AXIOS

برای نصب آن دو روش وجود دارد . اولین روش با CDN که فقط کافیست تا این کد مورد نظر را به HTML مان وارد کنیم :

<script src=”https://unpkg.com/axios/dist/axios.min.js”></script>

و اما روش دوم که از npm استفاده می کنیم تا فایل های مورد نظر اگزیوس مستقیما در اختیارمان قرار گیرد. این روش نصبت به روش بالا بیشتر توصیه می شود.

ابتدا باید به پوشه پروژه رفته و دستور زیر را با توجه به آدرس فایل پروژه در ترمینال وارد کنیم :

npm install axios –save

بعد چند دقیقه روی فایل پروژه مان نصب می شود. فایلی با نام node_modules ایجاد شده که در آن تمامی محتویات اصلی و دستورات مهم قرار گرفته است. کافیست تا آدرس “axios.min.js” در داخل آن را به فایل HTML پروژه با دستور زیر لینک دهیم:

<script src=”./node_modules/axios/dist/axios.min.js”></script>

حالا ما به دستورات و کد های اگزیوس دسترسی داریم.

برای نصب آن در ریکت از روش npm استاده می کنیم. ابتدا یک اپ ریکت می سازیم :

npx create-react-app axios-example

سپس وارد فایل axios-example می شویم :

cd  axios-example

و  کتابخانه اگزیوس را نصب می کنیم :

$ npm install axios –save

تمامی فایل های اگزیوس روی پروژه نصب شده اند. در آخر برای استفاده از آن باید روی پروژه ایمپورت شود :

import axios from “axios

حالا در اپ ریکتمان دسترسی به کد ها و دستورات اگزیوس داریم.

همانطوری که گفتیم عملکرد اگزیوس شبیه به fetch هست و همان خروجی را به ما می دهد. با این تفاوت که کار را برایمان بسیار ساده تر نموده است. 

به طور کلی 3 متود پر کاربرد برای ایجاد درخواست یا ریکوست وجود دارد. این متود ها get , post و delete می باشند. ابتدا از get  شروع می کنیم :

GET : از این متود برای ایجاد درخواست دریافت داده ها استفاده می شود. برای فراخوانی این متود و استفاده آن با استفاده از اگزیوس باید با پیشوند axios شروع شود. مثال :

const fetchUsers = () => { axios.get(`https://jsonplaceholder.typicode.com/users`) .then(response => { const users = response.data; console.log(`GET list users`, users); }) .catch(error => console.error(error)); }; fetchUsers();

چه اتفاقی در کد بالا رخ می دهد ؟ در ابتدا تابعی ساختیم که کار این تابع استخراج داده ها از دیتابیسمان هست. همانطور که می بینید در axios.get(‘https://jsonplaceholder.typicode.com/users’) با استفاده از دستور axios و get ما درخواست مورد نظر را تهیه کرده ایم.

با این متود ها یک promise برایمان برگشت داده می شود. سپس میتوانیم از دستوراتی مانند then و catch استفاده کنیم. اگر مراحل promise ما با موفقیت انجام شود, اطلاعات به صورت شیء دریافت خواهد شد که در response ذخیره شده است.

این response ما دارای اطلاعاتی از مانند headers, data, config, status و حتی یک آبجکت کامل از request می باشد.چون ما فایل دیتا را می خواهیم استخراج کنیم تا از آن استفاده کنیم , از متود data استفاده می کنیم. حالا خروجی response مان در قالب یک آرایه از دیتا ها می باشد.

POST : از این متود برای اضافه کردن داده به دیتا بیس استفاده می شود. کد زیر را دقت کنید :

const createUser = (user) => { axios.post(`https://reqres.in/api/users`, user) .then(response => { const addedUser = response.data; console.log(`POST: user is added`, addedUser); }) .catch(error => console.error(error)); }; createUser(`parsa`)

در اینجا ما می خواهیم که یک کاربری را به داده ها اضافه کنیم. در ابتدا از دستور post استفاده می کنیم . یعنی با axios.post ریکوست POST را در این کد اجرا می کنپم.

ما از تابع createUser استفاده می کنیم که ورودی را بهتر نمایش دهیم. ورودی این تابع همان کاربری هست که می خواهیم اضافه شود. یک آرگمانی به آن تابع پاس می دهیم. ریکوست POST در اگزیوس دو مقدار می گیرد.

مقدار اول آدرس فایل و مقدار دوم axios.post که با ((,)) از آدرس فایل جدا می شود همان مقداری است که می خواهیم به فایل POST کنیم.

پس هر چیزی که در این بخش قرار گیرد به داده اضافه می شود. در اینجا آرگمان تابع را به مقدار دوم axios.post می دهیم. سپس پاسخمان را به صورت data نمایش می دهیم . خروجی اسن تابع همان داده ها هستند ولی با این تفاوت که داده جدیدی با نا “parsa” به آن اضافه شده است.

DELETE : اگزیوس با استفاده از دستور axios.delete این امکان را به ما می دهد تا از ریکوست DELETE استفاده کنیم که یکسری ویژگی ها یا بخش هایی از داده را حذف کنیم. مثال : 

const deleteUser = (id) => { axios.delete(`https://reqres.in/api/users/${id}`) .then(response => { console.log(`DELETE: user is removed`, id); }) .catch(error => console.error(error)); }; deleteUser(1)

اگر با ساختار REST api آشنا باشید می دانید که ساختاری که برای فایل json در نظر گرفته شده, ساختاری است که می توان با استفاده از آدرس آن به داده دسترسی داشت یا آن را تغییر داد.

در این آدرس هم به صورت پویا id کاربر با استفاده از یک تابع گرفته می شود سپس با دستور axios.delete (که ورودی آن به صورت آدرس فایل همراه با ساختار REST است) آن id را پیدا کرده و آن بلوک داده را حذف می کنم و دیگر در خروجی نمایش داده نمی شود. در بخش بالا اطلاعات کاربر با id = 1 با استفاده از متود DELETE حذف گردیده است.

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

امیدواریم از این مقاله نهایت استفاده را برده باشید و آن را با دوستانتان به اشتراک بگذارید. تیم تولید محتوای مدرسه اینترنتی پرنیان این مقاله را تهیه کرده است.