Fetch API چیست؟ به زبان ساده و کاربردی

تعامل با API های خارجی یا رابط های برنامه نویسی کاربردی، به یک مهارت ضروری در توسعه وب تبدیل شده است. API ها به نرم افزارهای مختلف اجازه می دهند تا با یکدیگر ارتباط برقرار کنند و توسعه دهندگان را قادر می سازد به داده ها از منابع مختلف دسترسی پیدا کرده و آنها را بازیابی کنند. یکی از راه های رایج برای انجام درخواست های API در جاوا اسکریپت استفاده از Fetch API است. در این مقاله، بررسی می‌کنیم که Fetch API چیست، چگونه کار می‌کند، و مثال‌های عملی برای راهنمایی شما در واکشی داده‌ها از یک API با استفاده از این ابزار قدرتمند ارائه می‌دهم. Fetch API مدت‌ها بود که عرضه می‌شد، و معرفی آن نوید بخش جدیدی از صفحات وب زنده و تعاملی بود. در 1 فوریه 2022، تیم اصلی Node.js یک pull request را با هم ادغام کرد و Fetch API را به Node اضافه کرد. برای درک اینکه چرا این یک معامله بزرگ است، بیایید بررسی کنیم که Fetch چگونه بوجود آمد و این افزوده جدید برای توسعه دهندگان Node.js چه معنایی دارد.

قبل از Fetch API

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

Internet Explorer 5 در سال 1998 با معرفی XMLHttpRequest، یک API برای غلبه بر این محدودیت، این مورد را تغییر داد. در ابتدا، XMLHttpRequest برای fetch داده‌های XML از طریق HTTP طراحی شده بود، از این رو نام آن به این نام است. با این حال، مدتی پس از انتشار، پشتیبانی از فرمت‌های داده دیگر - در درجه اول JSON، HTML و متن ساده - اضافه شد.

XMLHttpRequest API در آن زمان با جذابیت کار می کرد، اما با رشد وب، کار با فریمورک های جاوا اسکریپت، به ویژه jQuery، مجبور شد آن را انتزاعی کند تا پیاده سازی آسان تر و مدیریت موفقیت/خطا راحت تر شود.

Fetch API چیست؟

در سال 2015، Fetch API به عنوان جانشین مدرن XMLHttpRequest راه اندازی شد و متعاقباً تبدیل به استاندارد واقعی برای برقراری تماس های ناهمزمان(asynchronous calls) در برنامه های وب شد.و اگر اگر با شی XMLHttpRequest (XHR) کار کرده اید، Fetch API می تواند تمام وظایف را مانند شی XHR انجام دهد.یکی از مزیت‌های مهم Fetch نسبت به XMLHttpRequest این است که از Promises استفاده می‌کند و اجازه می‌دهد یک API ساده‌تر و تمیزتر داشته باشد و در عین حال از جهنم callback ها جلوگیری کند و باید API پیچیده XMLHttpRequest را به خاطر بسپارد.

اگرچه Fetch API مدتی است که وجود دارد، اما به دلیل برخی محدودیت ها در هسته Node.js گنجانده نشده است. در سوالی که یکی از مشارکت‌کنندگان اصلی Node در Hacker News به آن پاسخ داد، اشاره شد که پیاده‌سازی Fetch API مرورگر به یک API Web Streams مبتنی بر مرورگر و رابط AbortController (برای لغو درخواست‌های fetch) وابسته است که درNode.js تا همین اواخر در دسترس نبود.به این ترتیب، تصمیم گیری در مورد بهترین رویکرد برای گنجاندن آن در هسته Node.js دشوار بود.

مدت ها قبل از اضافه شدن Fetch API، ماژول Request محبوب ترین روش برای ایجاد درخواست های HTTP در Node بود. اما اکوسیستم جاوا اسکریپت در کل به سرعت تکامل یافت و الگوهای جدید معرفی شده درخواست را منسوخ کردند. یک مثال مهم در اینجا async/wait است. هیچ شرطی برای این مورد در API درخواست وجود نداشت و پروژه بعداً به دلیل این محدودیت‌ها منسوخ شد.

متد fetch() در محدوده گوبال موجود است که به مرورگرهای وب دستور می دهد تا درخواستی را به URL ارسال کنند.

همچنین در سال 2018، Undici به عنوان یک کلاینت HTTP/1.1 جدیدتر و سریع‌تر برای Node.js معرفی شد که از جمله ویژگی‌های دیگر، از Pipelining و Pooling پشتیبانی می‌کند. Undici پیاده سازی ()fetch را در Node.js پس از تلاش زیاد تیم اصلی امکان پذیر کرد.

اگر Promise ها را به یاد نمی آورید مقاله بررسی عمیق Promise ها در جاوا اسکریپت را در وب سایت آنوفل مطالعه کنید.

Fetch API چگونه کار می کند؟

Fetch API یک رابط جاوا اسکریپت مدرن برای ایجاد درخواست های شبکه است که در اصل برای جایگزینی XMLHttpRequest قدیمی طراحی شده است. این روش ساده‌تر و منعطف‌تری برای رسیدگی به درخواست‌های HTTP فراهم می‌کند و کار با API و واکشی داده‌ها از سرورها را برای توسعه‌دهندگان آسان‌تر می‌کند.

تاریخچه Fetch API و AJAX

Fetch API یک ویژگی نسبتاً جدید مرورگر وب است اما بر اساس فناوری های قدیمی مانند AJAX ساخته شده است.

AJAX مخفف Asynchronous JavaScript و XML است. این اولین فناوری به طور گسترده ای بود که به وب سایت ها اجازه می داد بدون نیاز به بارگیری مجدد کل صفحه درخواست ارسال کنند. قبل از AJAX، اگر می خواستید چیزی را در صفحه وب خود به روز کنید، باید کل صفحه را مجدداً بارگیری کنید، که ناهموار و ناکارآمد بود.

AJAX به توسعه دهندگان این امکان را می داد تا بدون نیاز به رفرش تمام صفحه درخواست های HTTP را ارسال کنند. این فناوری توسعه وب را متحول کرد، اما محدودیت هایی داشت. درخواست‌های AJAX محدود به بازیابی داده‌ها از همان مبدأ (دامنه/زیر دامنه) با صفحه درخواستی بود.

Fetch API را وارد کنید. این فناوری که توسط مرورگرهای وب جدیدتر ارائه شد، تمام قدرت AJAX را داشت، اما بدون مسائل امنیتی متقابل و پشتیبانی از روش‌های HTTP بیشتر مانند PUT و DELETE.

چگونه از Fetch API استفاده کنیم؟

Fetch API جاوا اسکریپت درخواستی را برای URL ارسال می کند. اگر درخواست ارسال شود، پاسخ را نمایش می دهد. اگر درخواست ارسال نشود، خطا نشان می دهد.

قبل از هر چیزی با سینتکس آن آشنا شویم در کد های زیر متد Fetch API را با استفاده از جاوا اسکریپت برای ارسال درخواست URL نشان می دهد:

fetch('url')  
.then(response  =>  { //handle request});  
.then(error  = >  { //handle error});  

یک شی پیکربندی و URL نقطه پایانی را به متد fetch ارسال می کنیم.
ما اطلاعات داده شده را در کامپوننت های HTML یا جاوا اسکریپت که به عنوان خروجی نشان داده شده است، ارسال کردیم.

Fetch API به‌عنوان یک تابع سطح بالا ارائه می‌شود و در ابتدایی‌ترین نسخه آن، یک URL می‌گیرد و یک پرومیس تولید می‌کند که به پاسخ پاسخ می‌دهد:

fetch("http://example.com/api/endpoint")
  .then((response) => {
    // Do something with response
  })
  .catch(function (err) {
    console.log("Unable to fetch -", err);
  });

همچنین می‌توانید نحوه انجام فرآیند fetch کردن را با اضافه کردن یک شی اختیاری پس از URL تغییر دهید، که به شما امکان می‌دهد مواردی مانند متد های درخواست، هدر های درخواست و سایر گزینه‌ها را تغییر دهید. پاسخ درخواست یک شی است که حاوی متادیتا های بازگشتی برای درخواست ما است که از عناصری مانند داده های پاسخ، هدر ها، تاریخ درخواست و غیره تشکیل شده است.

خواندن پاسخ با استفاده از Fetch API

Fetch API جاوا اسکریپت درخواستی را برای URL ارسال می کند و پاسخی از API دریافت می کند. اگر درخواست با موفقیت ارسال شود، API یک پاسخ دریافت می کند و داده ها را نشان می دهد.

fetch('url')  
.then(response  =>  response.json())  
.then(data  = >  console.log(data));  

تفاوت XMLHttpRequest با  Fetch API چیست؟

حال که ما با سینتکس Fetch  آشنا شدیم بیایم یک مقایسه ای بین هر دو تا انجام بدیم.ما با مقایسه یک مثال ساده با یک XMLHttpRequest و سپس با Fetch شروع می کنیم. ما فقط می خواهیم یک URL درخواست کنیم، یک پاسخ دریافت کنیم و آن را به عنوان JSON تجزیه کنیم.

XMLHttpRequest :
یک XMLHttpRequest به دو listeners برای رسیدگی به موارد موفقیت و خطا و یک فراخوان برای ()open و ()send نیاز دارد.

function reqListener() {
    var data = JSON.parse(this.responseText);
    console.log(data);
}

function reqError(err) {
    console.log('Fetch Error :-S', err);
}

var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.onerror = reqError;
oReq.open('get', './api/some.json', true);
oReq.send();

Fetch API :
درخواست Fetch ما شبیه به این خواهد بود:

fetch('./api/some.json')
    .then(
    function(response) {
        if (response.status !== 200) {
        console.log('Looks like there was a problem. Status Code: ' +
            response.status);
        return;
        }

        // Examine the text in the response
        response.json().then(function(data) {
        console.log(data);
        });
    }
    )
    .catch(function(err) {
    console.log('Fetch Error :-S', err);
    });

قبل از تجزیه پاسخ به عنوان JSON، بررسی می کنیم که وضعیت پاسخ 200 باشد.

پاسخ درخواست ()fetch یک آبجکت Stream است، به این معنی که وقتی متد ()json را فراخوانی می کنیم، یک Promise برگردانده می شود زیرا خواندن Stream به صورت ناهمزمان اتفاق می افتد.

متادیتای پاسخ

در مثال قبلی به وضعیت شی Response و همچنین نحوه تجزیه پاسخ به عنوان JSON نگاه کردیم. سایر متادیتا هایی که ممکن است بخواهیم به آنها دسترسی داشته باشیم، مانند هدرها، در زیر نشان داده شده‌اند.

fetch('users.json').then(function(response) {
    console.log(response.headers.get('Content-Type'));
    console.log(response.headers.get('Date'));

    console.log(response.status);
    console.log(response.statusText);
    console.log(response.type);
    console.log(response.url);
});

انواع پاسخ (Response) 

هنگامی که ما یک درخواست Fetch می کنیم، به پاسخ یک answer.type از "basic"، "cors" یا "opaque" داده می شود. این تایپ ها نشان می دهد که منبع از کجا آمده است و می توان از آنها برای اطلاع رسانی نحوه برخورد با شی پاسخ استفاده کرد.

هنگامی که درخواستی برای منبعی در همان مبدا ارسال می شود، پاسخ یک نوع basic خواهد داشت و هیچ محدودیتی در مورد آنچه می توانید از پاسخ مشاهده کنید وجود ندارد.

اگر درخواستی برای منبعی در مبدا دیگری که هدرهای COR را برمی گرداند، ارسال شود، آنگاه نوع آن cors است. cors و پاسخ‌های basic تقریباً یکسان هستند به جز اینکه پاسخ cors هدرهایی را که می‌توانید مشاهده کنید به Cache-Control، Content-Language، Content-Type، Expires، Last-Modified و Pragma محدود می‌کند.

یک پاسخ opaqueبرای درخواستی است که برای منبعی در مبدا متفاوتی که سرصفحه های CORS را بر نمی گرداند، انجام می شود. با یک پاسخ opaque، نمی‌توانیم داده‌های برگشتی را بخوانیم یا وضعیت درخواست را مشاهده کنیم، به این معنی که نمی‌توانیم بررسی کنیم که آیا درخواست موفقیت‌آمیز بوده است یا خیر.

شما می توانید حالتی را برای یک درخواست fetch تعریف کنید که فقط درخواست های خاصی حل شوند. حالت هایی که می توانید تنظیم کنید به شرح زیر است:

same-origin فقط برای درخواست‌های دارایی‌هایی در همان مبدا موفق می‌شود، همه درخواست‌های دیگر رد می‌شوند.
cors درخواست‌هایی را برای دارایی‌هایی با مبدا یکسان و سایر مبدا که هدرهای COR مناسب را برمی‌گردانند، اجازه می‌دهد.
cors-with-forced-preflight همیشه قبل از درخواست واقعی یک بررسی قبل از پرواز انجام می دهد.
no-cors در نظر گرفته شده است تا درخواست‌هایی را به مبداهای دیگری ارسال کند که هدر CORS ندارند و منجر به پاسخ opaque می‌شوند، اما همانطور که گفته شد، در حال حاضر در محدوده کلی پنجره این امکان وجود ندارد.

برای تعریف حالت، یک شی گزینه به عنوان پارامتر دوم در درخواست fetch اضافه کنید و حالت را در آن شی تعریف کنید:

fetch('http://some-site.com/cors-enabled/some.json', {mode: 'cors'})
    .then(function(response) {
    return response.text();
    })
    .then(function(text) {
    console.log('Request successful', text);
    })
    .catch(function(error) {
    log('Request failed', error)
    });

مزایای استفاده از Fetch API 

این واقعیت که Fetch API اکنون به عنوان یک ماژول Node داخلی بسته بندی شده است، برای جامعه توسعه دهندگان بسیار مفید است. برخی از این مزایا عبارتند از:

بدون بسته Fetch اضافی

Fetch داخلی برای Node.js ممکن است به معنای پایان بسته هایی مانند node-fetch، got، cross-fetch و بسیاری دیگر باشد که برای همین منظور ساخته شده اند. این بدان معناست که قبل از انجام عملیات شبکه در Node نیازی به نصب npm ندارید.

علاوه بر این، node-fetch، که در حال حاضر محبوب‌ترین بسته Fetch برای Node.js است، اخیراً به یک بسته فقط ESM تغییر یافته است. این بدان معنی است که شما نمی توانید آن را با تابع ()require وارد کنید. Fetch API بومی باعث می‌شود فتچ HTTP در محیط‌های Node بسیار روان‌تر و طبیعی‌تر احساس شود.

بهبود بین پلتفرمی

توسعه‌دهندگانی که قبلاً از Fetch API در فرانت‌اند استفاده کرده‌اند، با استفاده از متد ()fetch داخلی در Node احساس راحتی می‌کنند. این بسیار ساده تر و شهودی تر از استفاده از بسته های خارجی برای دستیابی به همان عملکرد در یک محیط Node خواهد بود.

اجرای سریعتر

همانطور که قبلا ذکر شد، پیاده‌سازی Fetch جدید نیز مبتنی بر Undici است، یک کلاینت HTTP سریع، قابل اعتماد و سازگار با مشخصات Node.js. در نتیجه، باید عملکرد بهبود یافته را از Fetch API نیز پیش بینی کنید.

معایب استفاده از Fetch API 

Fetch API مرورگر به خودی خود دارای معایبی است و بدون شک به اجرای جدید Node.js Fetch منتقل می شود:

هندل کردن خطا

Fetch هنگام مدیریت خطا عملکرد ضعیفی دارد. فقط خطاهای شبکه به عنوان خطاهای واقعی در نظر گرفته می شوند. این بدان معنی است که Fetch فقط در صورتی که کاربر به اینترنت متصل نباشد یا یک خطای نادر شبکه اتفاق بیفتد، یک پرومیس را رد می کند. خطاهای ارائه شده توسط سرور نادیده گرفته می شوند.

تنظیم وقفه های زمانی

تنظیم مهلت زمانی برای لغو یک درخواست خاص پس از یک دوره زمانی مشخص نیز در Fetch دشوار است.

بدون پیشرفت درخواست

یکی دیگر از اشکالات مهم این است که Fetch روشی برای نظارت آسان بر پیشرفت درخواست ها ندارد، در حالی که کتابخانه هایی مانند Axios با خوبی این کار را انجام می دهند.

نتیجه

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

در صورت داشتن هر گونه سوالی در مورد Fetch API می توانید در قسمت نظرات بپرسید.