Axios در مقابل Fetch: کدام یک را باید برای پروژه خود انتخاب کنید

Summarize this content to 400 words in Persian Lang

مقدمه

در توسعه وب، بحث بین Axios در مقابل واکشی حول محور درخواست های HTTP می چرخد ​​که برای ارتباط بین مرورگر و سرور ضروری است. چه در حال واکشی داده‌ها، ارسال فرم‌ها یا تعامل با APIها باشید، درخواست‌های HTTP برنامه‌های وب را پویا نگه می‌دارند. توسعه دهندگان اغلب به هر دو متکی هستند fetch()، یک ویژگی داخلی مرورگر یا کتابخانه شخص ثالث Axios.

هم Axios و هم fetch() درخواست‌های رایج HTTP مانند GET، POST، PUT و DELETE را مدیریت می‌کند، اما دارای مزایای مشخصی است. Axios به دلیل سادگی و ویژگی های قدرتمندش محبوب است، در حالی که fetch() سبک وزن است و در مرورگرها تعبیه شده است و از وابستگی های خارجی اجتناب می کند.

این وبلاگ مقایسه خواهد کرد Axios در مقابل واکشی، تفاوت های کلیدی، نقاط قوت و ضعف آنها را با مثال های عملی برجسته می کند و به شما در انتخاب ابزار مناسب برای پروژه کمک می کند.

تفاوت اصلی بین Axios و fetch()

هنگام تصمیم گیری بین Axios در مقابل واکشیمهم است که تفاوت های اساسی آنها را درک کنید، از نحو و راه اندازی گرفته تا مدیریت داده ها و سازگاری با عقب. در زیر، ما تضادهای کلیدی بین این دو را بررسی خواهیم کرد تا به شما در تصمیم گیری کمک کند.

1. نحو و راه اندازی اولیه

یکی از تفاوت های اصلی بین Axios و fetch() سادگی نحو آنهاست. در اینجا نگاهی اجمالی به نحوه ظاهر یک درخواست HTTP ساده با استفاده از هر دو روش داریم:

مثال Axios:

axios.get(‘https://jsonplaceholder.typicode.com/posts’)
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(‘Error:’, error);
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

fetch() مثال:

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

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در Axios، داده های پاسخ به طور خودکار تجزیه می شوند و data شی را می توان مستقیماً در دسترس قرار داد. با fetch()، باید پاسخ را با تماس به صورت دستی تجزیه کنید response.json()، Axios را برای عملیات استاندارد مختصرتر می کند.

2. مدیریت داده، تجزیه JSON، و سادگی

یکی دیگر از تفاوت های کلیدی در Axios در مقابل واکشی بحث حول مدیریت داده ها می چرخد:

تجزیه خودکار JSON:
Axios به طور خودکار تجزیه JSON را کنترل می کند و داده های درخواست و پاسخ را به طور پیش فرض به JSON تبدیل می کند. این کار هنگام کار با API های JSON راحت است، زیرا شما را از رشته یا تجزیه دستی داده ها نجات می دهد. در مقابل، fetch() نیاز به مدیریت صریح هم از تجزیه و هم رشته‌بندی دارد که آن را کمی پرمخاطب‌تر می‌کند.

مثال Axios (مدیریت داده):

axios.post(‘https://jsonplaceholder.typicode.com/posts’, {
title: ‘Post Title’,
body: ‘Post Content’,
})
.then(response => console.log(response.data));

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

fetch() مثال (مدیریت داده):

fetch(‘https://jsonplaceholder.typicode.com/posts’, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’
},
body: JSON.stringify({
title: ‘Post Title’,
body: ‘Post Content’
})
})
.then(response => response.json())
.then(data => console.log(data));

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

رسیدگی به خطا:
در Axios، خطاهای HTTP به طور خودکار مدیریت می شوند و هر پاسخی با کد وضعیت خارج از محدوده 2xx باعث ایجاد خطا می شود. catch مسدود کردن این بدان معناست که Axios با خطاهای سرور (مانند 404 یا 500) به عنوان استثنا برخورد می کند و مدیریت خطا را بصری تر می کند. در مقابل، fetch() فقط در صورت خرابی های شبکه رد می کند و همچنان خطاهای سرور را برطرف می کند. شما باید بررسی کنید response.ok ویژگی به صورت دستی برای رسیدگی به خطاها

fetch() مثال (بررسی خطا):

fetch(‘https://jsonplaceholder.typicode.com/invalid-endpoint’)
.then(response => {
if (!response.ok) {
throw new Error(‘Server Error’);
}
return response.json();
})
.catch(error => console.error(‘Error:’, error));

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

3. سازگاری به عقب

یکی از مزایای مهم Axios پشتیبانی آن از مرورگرهای قدیمی است. Axios استفاده می کند XMLHttpRequest زیر کاپوت، به آن اجازه می دهد حتی در محیط هایی مانند اینترنت اکسپلورر 11 نیز کار کند. این باعث می شود که آن را برای پروژه هایی که به سازگاری گسترده مرورگر بدون پیکربندی اضافی نیاز دارند، گزینه ای عالی تبدیل کند.

از سوی دیگر، fetch() یک API مدرن است که فقط در مرورگرهای جدیدتر کار می‌کند – به ویژه Chrome 42+، Firefox 39+، Edge 14+ و Safari 10.3+. اگر سازگاری به عقب ضروری است و همچنان ترجیح می دهید از آن استفاده کنید fetch()، می توانید از پلی فیل استفاده کنید:

استفاده از fetch() Polyfill:

npm install whatwg-fetch –save

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مثال راه اندازی با Polyfill:

import ‘whatwg-fetch’;
fetch(‘https://jsonplaceholder.typicode.com/posts’)
.then(response => response.json())
.then(data => console.log(data));

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این سناریو، whatwg-fetch اجازه می دهد fetch() برای کار در مرورگرهای قدیمی با شبیه سازی API بومی. با این حال، افزودن پلی‌فیل، اندازه کلی باندل را افزایش می‌دهد، که ممکن است برای برنامه‌های حساس به عملکرد یک نقطه ضعف باشد.

Axios در مقابل واکشی به طور قابل توجهی در نحو، مدیریت داده ها و سازگاری متفاوت هستند. Axios کارهای رایج مانند تجزیه JSON و مدیریت خطا را ساده می کند و آن را برای توسعه سریع جذاب می کند. با این حال، fetch()در دسترس بودن بومی در مرورگرها آن را به گزینه ای قوی و سبک تبدیل می کند، اگر با JSON به صورت دستی راحت هستید و نیازی به پشتیبانی از مرورگرهای قدیمی ندارید.

سهولت استفاده و تجربه توسعه دهنده

وقتی صحبت از تجربه توسعه دهنده می شود، بحث بین Axios در مقابل واکشی اغلب حول محور استفاده از آنها برای سناریوهای رایج و پیچیده می چرخد. در اینجا خلاصه ای از نحوه عملکرد هر دو از نظر سادگی و انعطاف پذیری آورده شده است.

1. سادگی Axios برای موارد استفاده معمول

Axios طوری طراحی شده است که درخواست‌های HTTP را ساده‌تر و شهودی‌تر کند. این یک API مختصر و مناسب برای توسعه‌دهنده ارائه می‌کند که تنظیم آن آسان است، به خصوص برای موارد استفاده استاندارد مانند درخواست‌های GET و POST:

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

axios.get(‘https://jsonplaceholder.typicode.com/posts’)
.then(response => console.log(response.data))
.catch(error => console.error(‘Error:’, error));

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

تنها در چند خط، Axios کل چرخه درخواست-پاسخ، از جمله تجزیه JSON و مدیریت خطا را مدیریت می کند. به طور خودکار پاسخ را به یک شی جاوا اسکریپت تبدیل می کند و تعامل با داده ها را آسان می کند.

2. پرحرفی fetch() برای Edge Cases

در حالی که fetch() برای درخواست‌های اساسی ساده است، هنگام رسیدگی به سناریوهای پیچیده، مانند تنظیم زمان‌بندی یا مدیریت خطاها، پرمخاطب‌تر می‌شود:

نمونه ای از مدیریت یک مهلت با استفاده از fetch():

const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000);

fetch(‘https://jsonplaceholder.typicode.com/posts’, {
signal: controller.signal
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => {
if (error.name === ‘AbortError’) {
console.error(‘Request timed out’);
} else {
console.error(‘Error:’, error);
}
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این مثال، مدیریت یک بازه زمانی نیاز به کد اضافی برای راه‌اندازی آن دارد AbortController. در حالی که این باعث می شود fetch() انعطاف پذیر است، به کد دیگ بخار بیشتری در مقایسه با پیکربندی داخلی Axios نیاز دارد.

3. نحو مختصر Axios در مقابل انعطاف پذیری fetch()

نحو مختصر Axios:سینتکس Axios برای کاهش حجم دیگ طراحی شده است و رسیدگی به درخواست ها با خطوط کد کمتر را آسان تر می کند. این به طور خودکار JSON را تغییر می دهد، مدیریت خطا را ساده می کند و ویژگی های داخلی مانند لغو درخواست و رهگیرها را ارائه می دهد که توسعه را ساده می کند. این آن را برای پروژه‌هایی ایده‌آل می‌کند که در آن تعاملات سریع و کارآمد HTTP بسیار مهم است.
انعطاف پذیری fetch().:از سوی دیگر، fetch() یک رویکرد منعطف تر و مدولار را ارائه می دهد. هیچ رفتار پیش‌فرضی اعمال نمی‌کند و به توسعه‌دهندگان کنترل کامل بر چرخه درخواست و پاسخ می‌دهد. در حالی که این نیاز به کار دستی بیشتری دارد، همچنین انعطاف پذیری برای پیاده سازی راه حل های سفارشی متناسب با نیازهای خاص را فراهم می کند.

ملاحظات عملکرد

انتخاب بین Axios در مقابل واکشی اغلب به نیازهای عملکرد و الزامات خاص پروژه شما بستگی دارد.

1. مناسب بودن بر اساس الزامات عملکرد

درخواست های ساده:برای واکشی داده های اولیه، fetch() به طور معمول مناسب تر است. این یک گزینه سبک وزن و داخلی است که اندازه بسته را کاهش می دهد زیرا به وابستگی های خارجی متکی نیست.
تعاملات پیچیده:Axios در سناریوهای پیچیده که در آن به ویژگی هایی مانند رهگیرها، هدرهای سفارشی و مدیریت خطا نیاز دارید برتری می یابد. این ابزارهای داخلی می توانند در زمان توسعه برنامه های بزرگتر صرفه جویی کنند و Axios را به انتخاب بهتری برای پروژه های سطح سازمانی تبدیل کنند.

2. تأخیر شبکه و مدیریت پاسخ

تأخیر شبکه:تفاوت قابل توجهی در سرعت خام بین Axios و fetch()، زیرا هر دو بر فناوری های اساسی مشابه متکی هستند. Axios ممکن است به دلیل ویژگی‌هایش هزینه کمی را وارد کند، اما این اغلب برای بیشتر موارد استفاده ناچیز است.
مدیریت پاسخ:Axios مدیریت JSON را ساده می کند و پاسخ ها را به طور خودکار تجزیه می کند fetch() نیاز به تجزیه دستی با response.json(). این امر Axios را از نظر زمان توسعه برای برنامه های کاربردی JSON کمی سریعتر می کند.

3. سناریوهای انتخاب Axios در مقابل fetch()

وقتی Axios Overkill است:اگر پروژه شما شامل درخواست های ساده و حداقل مدیریت داده است، fetch()رویکرد بومی و بدون حاشیه ایده آل است. از وزن اضافی Axios برای کاربردهای سبک خودداری کنید.
وقتی fetch() به کمک نیاز دارد:برای برنامه‌هایی که نیاز به مدیریت متمرکز خطا، تلاش‌های مجدد یا هدرهای پیچیده دارند، fetch() می تواند دست و پا گیر شود. در این موارد، Axios راه حل ساده تری را بدون نیاز به کد سفارشی گسترده ارائه می دهد.

با درک این جنبه های عملکرد، می توانید بین آنها تصمیم بگیرید Axios در مقابل واکشی بر اساس پیچیدگی و مقیاس پروژه شما.

مقایسه ویژگی های Axios در مقابل Fetch

برای درک کامل مزایا و معایب Axios در مقابل واکشی، بیایید ویژگی های کلیدی آنها را با مثال های عملی بررسی کنیم:

1. تبدیل خودکار داده ها

Axios به طور خودکار تبدیل JSON را مدیریت می کند، بارهای درخواستی و پاسخ ها را بدون کد اضافی تبدیل می کند:

مثال Axios (دسترسی خودکار JSON):

axios.post(‘https://jsonplaceholder.typicode.com/posts’, {
title: ‘Axios Post’,
content: ‘Axios makes it simple!’
})
.then(response => console.log(response.data))
.catch(error => console.error(‘Error:’, error));

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در Axios، JSON به طور خودکار هم در درخواست و هم در پاسخ تجزیه می شود و فرآیند را ساده می کند.

fetch() مثال (تجزیه دستی JSON):

fetch(‘https://jsonplaceholder.typicode.com/posts’, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’
},
body: JSON.stringify({
title: ‘fetch Post’,
content: ‘fetch requires manual handling.’
})
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(‘Error:’, error));

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

با fetch()، باید به صورت دستی JSON.stringify() داده ها قبل از ارسال و تماس response.json() برای تجزیه پاسخ، اضافه کردن کمی پیچیدگی بیشتر.

2. مدیریت تایم اوت

رسیدگی به وقفه های زمانی می تواند چالشی با درخواست های HTTP باشد. Axios آن را با یک داخلی ساده می کند timeout دارایی:

مثال Axios (تایم اوت داخلی):

axios.get(‘https://jsonplaceholder.typicode.com/posts’, { timeout: 5000 })
.then(response => console.log(response.data))
.catch(error => console.error(‘Error:’, error)); // Automatically catches timeout errors

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در Axios، تنظیم یک بازه زمانی به سادگی اضافه کردن a است timeout پیکربندی

fetch() مثال (استفاده از AbortController برای Timeout):

const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000);

fetch(‘https://jsonplaceholder.typicode.com/posts’, {
signal: controller.signal
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => {
if (error.name === ‘AbortError’) {
console.error(‘Request timed out’);
} else {
console.error(‘Error:’, error);
}
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

با استفاده از fetch()، وقفه های زمانی نیاز به مراحل اضافی با AbortController، آن را در مقایسه با Axios ساده تر می کند.

3. رسیدگی به خطا

رسیدگی به خطا یکی دیگر از زمینه‌هایی است که در آن Axios با طبقه‌بندی داخلی می‌درخشد:

مثال Axios (دسته‌بندی خطا):

axios.get(‘https://jsonplaceholder.typicode.com/invalid-endpoint’)
.then(response => console.log(response.data))
.catch(error => {
if (error.response) {
console.error(‘Server Error:’, error.response.status);
} else if (error.request) {
console.error(‘Network Error:’, error.request);
} else {
console.error(‘Unknown Error:’, error.message);
}
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

Axios خطاها را به دسته بندی می کند response، request، و unknown، اشکال زدایی را آسان تر می کند.

fetch() مثال (مدیریت دستی خطا):

fetch(‘https://jsonplaceholder.typicode.com/invalid-endpoint’)
.then(response => {
if (!response.ok) {
throw new Error(`Server Error: ${response.status}`);
}
return response.json();
})
.catch(error => console.error(‘Error:’, error));

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

با fetch()، خطاهای سرور باید با استفاده از آن به صورت دستی بررسی شوند response.ok، زیرا به طور پیش فرض وعده های کدهای وضعیت غیر 2xx را رد نمی کند.

4. رهگیرهای HTTP

رهگیرها امکان رسیدگی جهانی به درخواست‌ها و پاسخ‌ها را می‌دهند که به صورت بومی توسط Axios پشتیبانی می‌شود:

مثال Axios (رهگیر درخواست جهانی):

axios.interceptors.request.use(config => {
config.headers[‘Authorization’] = ‘Bearer token’;
console.log(‘Request Interceptor: Adding Authorization Header’);
return config;
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

Axios اضافه کردن هدر یا اطلاعات گزارش را قبل از ارسال درخواست آسان می کند.

fetch() مثال (اجرای رهگیر سفارشی):

const originalFetch = fetch;
window.fetch = async (…args) => {
console.log(‘Custom Interceptor: Adding Authorization Header’);
const [url, options] = args;
options.headers = {
…options.headers,
‘Authorization’: ‘Bearer token’
};
return originalFetch(url, options);
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

fetch() رهگیرهای بومی ندارد، اما می‌توانید با رونویسی سراسری رفتار را تقلید کنید fetch روش

موارد استفاده پیشرفته

1. درخواست های همزمان

رسیدگی به درخواست های متعدد در توسعه وب رایج است و هم Axios و هم fetch() راه های خود را دارند:

مثال Axios (درخواست‌های همزمان با استفاده از axios.all):

axios.all([
axios.get(‘https://jsonplaceholder.typicode.com/posts/1’),
axios.get(‘https://jsonplaceholder.typicode.com/posts/2’)
])
.then(axios.spread((response1, response2) => {
console.log(‘Response 1:’, response1.data);
console.log(‘Response 2:’, response2.data);
}))
.catch(error => console.error(‘Error:’, error));

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

Axios فراهم می کند axios.all() و axios.spread() برای رسیدگی به درخواست های همزمان به طور تمیز.

fetch() مثال (درخواست‌های همزمان با استفاده از Promise.all):

Promise.all([
fetch(‘https://jsonplaceholder.typicode.com/posts/1’).then(res => res.json()),
fetch(‘https://jsonplaceholder.typicode.com/posts/2’).then(res => res.json())
])
.then(([data1, data2]) => {
console.log(‘Data 1:’, data1);
console.log(‘Data 2:’, data2);
})
.catch(error => console.error(‘Error:’, error));

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

با fetch()، استفاده می کنید Promise.all() برای رسیدگی به درخواست های متعدد، نیاز به تجزیه دستی برای هر پاسخ.

2. آپلود فایل و شاخص های پیشرفت

آپلود فایل و نمایش پیشرفت در Axios به دلیل پشتیبانی داخلی آسان تر است:

مثال Axios (نشانگر پیشرفت برای آپلود فایل):

axios.post(‘/upload’, formData, {
onUploadProgress: progressEvent => {
const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
console.log(`Upload Progress: ${percentCompleted}%`);
}
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اکسیوس onUploadProgress پاسخ به تماس برای نشان دادن پیشرفت آپلود در زمان واقعی عالی است.

fetch() مثال (آپلود فایل و پیشرفت دانلود):

const formData = new FormData();
formData.append(‘file’, file);

fetch(‘/upload’, {
method: ‘POST’,
body: formData
})
.then(response => response.json())
.then(data => console.log(‘File uploaded successfully’))
.catch(error => console.error(‘Error:’, error));

// Download Progress
fetch(‘https://example.com/large-file’)
.then(response => {
const reader = response.body.getReader();
let receivedLength = 0;
const contentLength = response.headers.get(‘Content-Length’);

reader.read().then(function process({ done, value }) {
if (done) {
console.log(‘Download complete’);
return;
}
receivedLength += value.length;
console.log(`Received ${receivedLength} of ${contentLength}`);
return reader.read().then(process);
});
})
.catch(error => console.error(‘Error:’, error));

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

با fetch()، پیاده سازی پیشرفت فایل نیاز به مدیریت دارد ReadableStream به صورت دستی، که پیچیدگی را اضافه می کند.

سناریوهای دنیای واقعی: زمان استفاده از Axios در مقابل fetch()

تصمیم گیری بین Axios در مقابل واکشی تا حد زیادی به نیازهای خاص پروژه شما بستگی دارد. در اینجا نگاهی داریم به زمانی که هر ابزار موثرترین است:

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

پروژه های کوچک: اگر در حال ساخت یک پروژه ساده هستید که به واکشی اولیه داده نیاز دارد، fetch() اغلب انتخاب بهتری است سبک وزن است، در مرورگر تعبیه شده است و از افزودن وابستگی های خارجی جلوگیری می کند. این آن را برای کارهای ساده ای مانند واکشی داده های JSON از یک API یا ارسال فرم عالی می کند.

مثال: یک وبلاگ شخصی یا یک وب سایت کوچک که فقط نیاز به چند درخواست API دارد می تواند استفاده کند fetch() بدون سربار یک کتابخانه بزرگتر.

برنامه های کاربردی سازمانی: در پروژه های بزرگ مقیاس، Axios مزایای متمایز ارائه می دهد. ویژگی‌های داخلی آن مانند رهگیرها، پیکربندی‌های جهانی و تبدیل خودکار داده‌ها، نگهداری کد و مدیریت خطا را ساده می‌کند. این باعث می‌شود Axios برای برنامه‌های پیچیده مناسب‌تر باشد، جایی که مدیریت ساختار یافته و سازگار HTTP بسیار مهم است.

مثال: داشبورد مالی که با چندین API تعامل داشته باشد و به مدیریت خطای قوی نیاز دارد، از تنظیمات و ویژگی‌های ساده Axios بهره می‌برد.

2. تحلیل هزینه و فایده

انتخاب بین Axios در مقابل واکشی اغلب شامل ارزیابی اینکه آیا مزایای Axios وابستگی اضافی را توجیه می کند یا خیر. برای پروژه های کوچک، fetch() اغلب کافی است، اندازه بسته را به حداقل می رساند و راه اندازی را ساده می کند. با این حال، در برنامه‌های سازمانی که قابلیت نگهداری، سازگاری کد و ویژگی‌های پیشرفته اهمیت دارند، مزایای Axios می‌تواند بر هزینه افزودن کتابخانه بیشتر باشد.

مدیریت CORS

1. CORS چیست؟

اشتراک‌گذاری منابع متقاطع (CORS) یک ویژگی امنیتی است که به سرورها اجازه می‌دهد مشخص کنند چه کسی می‌تواند به منابع خود دسترسی داشته باشد. هنگام درخواست برای دامنه دیگری، یک خط مشی CORS تضمین می کند که برنامه شما مجاز است داده ها را به صورت ایمن واکشی کند.

Axios و fetch() درخواست‌های CORS را به طور مشابه مدیریت کنید، زیرا هر دو به خط‌مشی‌های CORS مرورگر متکی هستند. یک اشتباه رایج اضافه کردن است Access-Control-Allow-Origin هدرها در درخواست – این هدر فقط باید توسط سرور تنظیم شود. سرورهایی که به درستی پیکربندی شده اند این هدر را در پاسخ برای نشان دادن مبداهای مجاز گنجانده اند.

2. مثال‌های راه‌اندازی مناسب CORS

نمونه Axios:

axios.get(‘https://example.com/api’, {
headers: {
‘Content-Type’: ‘application/json’
}
})
.catch(error => console.error(‘CORS Error:’, error));

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

fetch() مثال:

fetch(‘https://example.com/api’, {
method: ‘GET’,
headers: {
‘Content-Type’: ‘application/json’
}
})
.catch(error => console.error(‘CORS Error:’, error));

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در هر دو مورد، مطمئن شوید که سرور به گونه‌ای پیکربندی شده است که درخواست‌های متقاطع را مجاز کند.

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

بهینه سازی هر دو Axios و fetch() می تواند به بهبود عملکرد برنامه کمک کند، به خصوص هنگام مدیریت حجم زیادی از داده یا درخواست های مکرر.

1. ذخیره سازی

Axios: از یک کتابخانه ذخیره سازی مانند استفاده کنید axios-cache-adapter برای ذخیره پاسخ ها و کاهش درخواست های اضافی شبکه.

واکشی (): یک مکانیسم کش ساده با استفاده از localStorage یا sessionStorage API برای ذخیره داده های واکشی شده

2. مدیریت پاسخ

مدیریت موثر پاسخ ها برای کاهش بار شبکه:

Axios: از رهگیرها برای مدیریت پاسخ‌ها در سطح جهانی استفاده کنید و فقط داده‌های مرتبط را تجزیه کنید.

واکشی (): از واکشی داده های غیر ضروری با استفاده از پارامترهای URL یا رشته های پرس و جو برای محدود کردن پاسخ های سرور خودداری کنید.

3. به حداقل رساندن بار شبکه

Axios: از CancelToken قابلیت لغو درخواست ها در صورت عدم نیاز به آنها و کاهش بار هدر رفت شبکه.

واکشی (): استفاده کنید AbortController برای خاتمه دادن به درخواست های ناخواسته

با درک زمان استفاده Axios در مقابل واکشی و با استفاده از این تکنیک‌های بهینه‌سازی، می‌توانید اطمینان حاصل کنید که پروژه شما بدون مشکل اجرا می‌شود و در عین حال تأثیر شبکه را به حداقل می‌رساند.

نتیجه گیری

انتخاب بین Axios در مقابل واکشی در نهایت به پیچیدگی و الزامات پروژه شما بستگی دارد. Axios برای برنامه‌های بزرگ‌تر و در سطح سازمانی ایده‌آل است، جایی که کد ساختاریافته، مدیریت خطای متمرکز، و ویژگی‌های داخلی مانند رهگیرها می‌توانند توسعه را ساده‌تر کنند. از سوی دیگر، fetch() برای پروژه‌های کوچک‌تری که نیاز به واکشی داده‌های ساده و سبک وزن دارند، بدون هزینه بالای کتابخانه اضافی، عالی است. برای توسعه دهندگانی که اجرای سریع با حداقل تنظیمات را در اولویت قرار می دهند، Axios راحتی را ارائه می دهد، در حالی که کسانی که به دنبال کنترل کامل و انعطاف پذیری هستند، قدردانی خواهند کرد. fetch(). اگر در حال بررسی گزینه‌های جایگزین هستید، نحوه انجام آن را بررسی کنید React Query در مقابل Axios برای درک استراتژی های پیشرفته تر واکشی داده ها مقایسه می شود. انتخاب شما باید با مقیاس و تقاضای برنامه شما هماهنگ باشد و سادگی، عملکرد و قابلیت نگهداری کد را متعادل کند.

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

  axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'Post Title',
    body: 'Post Content',
  })
  .then(response => console.log(response.data));

  fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      title: 'Post Title',
      body: 'Post Content'
    })
  })
  .then(response => response.json())
  .then(data => console.log(data));

  fetch('https://jsonplaceholder.typicode.com/invalid-endpoint')
    .then(response => {
      if (!response.ok) {
        throw new Error('Server Error');
      }
      return response.json();
    })
    .catch(error => console.error('Error:', error));

npm install whatwg-fetch --save

import 'whatwg-fetch';
fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(data => console.log(data));

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000);

fetch('https://jsonplaceholder.typicode.com/posts', {
  signal: controller.signal
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => {
    if (error.name === 'AbortError') {
      console.error('Request timed out');
    } else {
      console.error('Error:', error);
    }
  });

axios.post('https://jsonplaceholder.typicode.com/posts', {
  title: 'Axios Post',
  content: 'Axios makes it simple!'
})
.then(response => console.log(response.data))
.catch(error => console.error('Error:', error));

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: 'fetch Post',
    content: 'fetch requires manual handling.'
  })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

axios.get('https://jsonplaceholder.typicode.com/posts', { timeout: 5000 })
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error)); // Automatically catches timeout errors

const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000);

fetch('https://jsonplaceholder.typicode.com/posts', {
  signal: controller.signal
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => {
    if (error.name === 'AbortError') {
      console.error('Request timed out');
    } else {
      console.error('Error:', error);
    }
  });

axios.get('https://jsonplaceholder.typicode.com/invalid-endpoint')
  .then(response => console.log(response.data))
  .catch(error => {
    if (error.response) {
      console.error('Server Error:', error.response.status);
    } else if (error.request) {
      console.error('Network Error:', error.request);
    } else {
      console.error('Unknown Error:', error.message);
    }
  });

fetch('https://jsonplaceholder.typicode.com/invalid-endpoint')
  .then(response => {
    if (!response.ok) {
      throw new Error(`Server Error: ${response.status}`);
    }
    return response.json();
  })
  .catch(error => console.error('Error:', error));

axios.interceptors.request.use(config => {
  config.headers['Authorization'] = 'Bearer token';
  console.log('Request Interceptor: Adding Authorization Header');
  return config;
});

const originalFetch = fetch;
window.fetch = async (...args) => {
  console.log('Custom Interceptor: Adding Authorization Header');
  const [url, options] = args;
  options.headers = {
    ...options.headers,
    'Authorization': 'Bearer token'
  };
  return originalFetch(url, options);
};

axios.all([
  axios.get('https://jsonplaceholder.typicode.com/posts/1'),
  axios.get('https://jsonplaceholder.typicode.com/posts/2')
])
.then(axios.spread((response1, response2) => {
  console.log('Response 1:', response1.data);
  console.log('Response 2:', response2.data);
}))
.catch(error => console.error('Error:', error));

Promise.all([
  fetch('https://jsonplaceholder.typicode.com/posts/1').then(res => res.json()),
  fetch('https://jsonplaceholder.typicode.com/posts/2').then(res => res.json())
])
.then(([data1, data2]) => {
  console.log('Data 1:', data1);
  console.log('Data 2:', data2);
})
.catch(error => console.error('Error:', error));

axios.post('/upload', formData, {
  onUploadProgress: progressEvent => {
    const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log(`Upload Progress: ${percentCompleted}%`);
  }
});

const formData = new FormData();
formData.append('file', file);

fetch('/upload', {
  method: 'POST',
  body: formData
})
.then(response => response.json())
.then(data => console.log('File uploaded successfully'))
.catch(error => console.error('Error:', error));

// Download Progress
fetch('https://example.com/large-file')
  .then(response => {
    const reader = response.body.getReader();
    let receivedLength = 0;
    const contentLength = response.headers.get('Content-Length');

    reader.read().then(function process({ done, value }) {
      if (done) {
        console.log('Download complete');
        return;
      }
      receivedLength += value.length;
      console.log(`Received ${receivedLength} of ${contentLength}`);
      return reader.read().then(process);
    });
  })
  .catch(error => console.error('Error:', error));

axios.get('https://example.com/api', {
  headers: {
    'Content-Type': 'application/json'
  }
})
.catch(error => console.error('CORS Error:', error));

fetch('https://example.com/api', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  }
})
.catch(error => console.error('CORS Error:', error));