واکشی داده ها از سرور

یکی دیگر از کار های بسیار رایج در وب سایت ها و برنامه های مدرن ، بازیابی موارد داده های فردی از سرور برای به روزرسانی بخش های یک صفحه وب بدون نیاز به بارگیری یک صفحه کامل جدید است. این جزئیات به ظاهر کوچک تأثیر زیادی در عملکرد و رفتار سایت ها داشته است ، بنابراین در این مقاله ، مفهوم را توضیح می دهیم و به فناوری هایی که امکان پذیر است ، بررسی خواهیم کرد: به ویژه ، API Fetch.

مشکل اینجا چیست؟

یک صفحه وب از یک صفحه HTML و (معمولاً) پرونده های مختلف دیگر مانند برگه های سبک ، اسکریپت و تصاویر تشکیل شده است. مدل اصلی بارگیری صفحه در وب این است که مرورگر شما یک یا چند درخواست HTTP را برای پرونده های مورد نیاز برای نمایش صفحه به سرور می کند و سرور با پرونده های درخواست شده پاسخ می دهد. اگر به صفحه دیگری مراجعه کنید ، مرورگر پرونده های جدید را درخواست می کند و سرور با آنها پاسخ می دهد.

این مدل برای بسیاری از سایت ها کاملاً خوب کار می کند. اما وب سایتی را در نظر بگیرید که بسیار داده محور است. به عنوان مثال ، یک وب سایت کتابخانه مانند کتابخانه عمومی ونکوور. از جمله موارد دیگر که می توانید به عنوان سایتی مانند این به عنوان یک رابط کاربری در یک پایگاه داده فکر کنید. این ممکن است به شما امکان دهد ژانر خاصی از کتاب را جستجو کنید ، یا ممکن است توصیه هایی را برای کتابهایی که ممکن است دوست داشته باشید ، بر اساس کتابهایی که قبلاً وام گرفته اید نشان دهید. هنگامی که این کار را انجام می دهید ، برای نمایش صفحه باید صفحه را با مجموعه جدید کتاب به روز کنید. اما توجه داشته باشید که بیشتر محتوای صفحه - از جمله مواردی مانند هدر صفحه ، نوار کناری و پاورقی - یکسان است.

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

بنابراین به جای مدل سنتی ، بسیاری از وب سایت ها از API های JavaScript برای درخواست داده از سرور استفاده می کنند و محتوای صفحه را بدون بار صفحه به روز می کنند. بنابراین ، هنگامی که کاربر به دنبال یک محصول جدید است ، مرورگر فقط داده های مورد نیاز برای به روزرسانی صفحه را درخواست می کند - به عنوان مثال مجموعه کتاب های جدید برای نمایش.

API اصلی در اینجا API Fetch است. این کار JavaScript را در یک صفحه قادر می سازد تا درخواست HTTP را به یک سرور برای بازیابی منابع خاص ارائه دهد. هنگامی که سرور آنها را ارائه می دهد ، JavaScript می تواند از داده ها برای به روزرسانی صفحه استفاده کند ، به طور معمول با استفاده از API های دستکاری DOM. داده های درخواست شده اغلب JSON است ، که یک قالب مناسب برای انتقال داده های ساختاری است ، اما همچنین می تواند HTML یا متن باشد.

این یک الگوی متداول برای سایتهای داده محور مانند آمازون ، یوتیوب ، eBay و غیره است. با این مدل:

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

توجه: در روزهای اولیه ، این تکنیک کلی به عنوان JavaScript ناهمزمان و XML (AJAX) شناخته می شد ، زیرا تمایل به درخواست داده های XML داشت. این به طور معمول این روزها اینگونه نیست (احتمالاً بیشتر درخواست JSON می کنید) ، اما نتیجه هنوز یکسان است ، و اصطلاح "Ajax" هنوز هم برای توصیف این تکنیک استفاده می شود.

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

API Fetch

بیایید چند نمونه از API Fetch را طی کنیم.

واکشی محتوای متن

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

این سری از پرونده ها به عنوان پایگاه داده جعلی ما عمل می کنند. در یک برنامه واقعی ، ما به احتمال زیاد از یک زبان سمت سرور مانند PHP ، Python یا Node استفاده می کنیم تا داده های خود را از یک پایگاه داده درخواست کنیم. با این حال ، در اینجا ، ما می خواهیم آن را ساده نگه داریم و روی قسمت سمت مشتری تمرکز کنیم.

برای شروع این مثال ، یک کپی محلی از fetch-start.html و چهار پرونده متنی-آیه 1. txt ، آیه 2. txt ، آیه 3/3 و آستانه 4 را در یک فهرست جدید در رایانه خود تهیه کنید. در این مثال ، وقتی در منوی کشویی انتخاب می شود ، آیه دیگری از شعر (که ممکن است شما را به خوبی تشخیص دهید) می گیریم.

بیایید عملکرد به روز شده ما () را تعریف کنیم. اول از همه ، موارد زیر را زیر بلوک کد قبلی خود قرار دهید - این پوسته خالی عملکرد است.

با این حال، وب سرورها به حروف کوچک و بزرگ حساس هستند و نام فایل در آن فضای خالی ندارد. برای تبدیل "Verse 1" به "verse1. txt" باید V را به حروف کوچک تبدیل کنیم، فاصله را برداریم و txt. را در انتها اضافه کنیم. این را می توان با ()place، toLowerCase() و الحاق رشته انجام داد. خطوط زیر را در تابع updateDisplay() خود اضافه کنید:

در نهایت ما آماده استفاده از Fetch API هستیم:

چیزهای زیادی برای باز کردن در اینجا وجود دارد.

ابتدا، نقطه ورود به Fetch API یک تابع سراسری به نام fetch() است که URL را به عنوان یک پارامتر می گیرد (برای تنظیمات سفارشی پارامتر اختیاری دیگری می خواهد، اما ما در اینجا از آن استفاده نمی کنیم).

سپس fetch() یک API ناهمزمان است که یک Promise را برمی گرداند. اگر نمی دانید این چیست، ماژول جاوا اسکریپت ناهمزمان و به ویژه مقاله وعده ها را بخوانید، سپس به اینجا بازگردید. متوجه خواهید شد که آن مقاله همچنین در مورد fetch() API صحبت می کند!

بنابراین چون fetch() یک وعده را برمی گرداند، ما یک تابع را به متد then() وعده بازگشتی ارسال می کنیم. این روش زمانی فراخوانی می شود که درخواست HTTP پاسخی از سرور دریافت کند. در کنترل کننده، بررسی می کنیم که درخواست موفقیت آمیز بوده است، و در صورت عدم موفقیت، خطا می دهیم. در غیر این صورت، ما answer. text() را فراخوانی می کنیم تا بدنه پاسخ را به عنوان متن دریافت کنیم.

معلوم می شود که answer. text() نیز ناهمزمان است، بنابراین قولی را که برمی گرداند برمی گردانیم و یک تابع را به متد then() این وعده جدید ارسال می کنیم. وقتی متن پاسخ آماده شد این تابع فراخوانی می شود و در داخل آن بلوک خود را با متن به روز می کنیم.

در نهایت، یک کنترلر catch() را در انتها زنجیر می کنیم تا هرگونه خطای ایجاد شده در هر یک از توابع ناهمزمان را که فراخوانی کرده ایم یا کنترل کننده های آنها را شناسایی کنیم.

یکی از مشکلات مثال در حالت حاضر این است که هیچ یک از شعرها را در اولین بارگذاری نشان نمی دهد. برای رفع این مشکل، دو خط زیر را در پایین کد خود اضافه کنید (درست بالای قسمت بسته شدنtag) برای بارگیری آیه 1 به طور پیش فرض، و مطمئن شوید که عنصر همیشه مقدار صحیح را نشان می دهد:

ارائه مثال شما از یک سرور

اگر مثال را فقط از یک فایل محلی اجرا کنید، مرورگرهای مدرن درخواست های HTTP را اجرا نمی کنند. این به دلیل محدودیت های امنیتی است (برای اطلاعات بیشتر در مورد امنیت وب، امنیت وب سایت را بخوانید).

برای دور زدن این موضوع، باید نمونه را با اجرای آن از طریق یک وب سرور محلی آزمایش کنیم. برای اطلاع از نحوه انجام این کار، راهنمای ما برای راه اندازی یک سرور تست محلی را بخوانید.

انبار قوطی

در این مثال ما یک سایت نمونه به نام CAN Store ایجاد کرده ایم - این یک سوپر مارکت داستانی است که فقط کالاهای کنسرو شده را می فروشد. می توانید این مثال را به صورت زنده در GitHub پیدا کنید و کد منبع را ببینید.

به طور پیش فرض ، سایت تمام محصولات را نشان می دهد ، اما می توانید از کنترل فرم در ستون سمت چپ استفاده کنید تا آنها را بر اساس طبقه بندی یا اصطلاح جستجو یا هر دو فیلتر کنید.

کد پیچیده زیادی وجود دارد که به فیلتر کردن محصولات براساس دسته بندی و اصطلاحات جستجو ، دستکاری رشته ها می پردازد تا داده ها به درستی در UI نمایش داده شوند ، و غیره. نظرات در کد (به can-script. js مراجعه کنید).

با این حال ، ما کد واکشی را توضیح خواهیم داد.

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

عملکرد Fetch () یک وعده را برمی گرداند. اگر این کار با موفقیت انجام شود ، عملکرد داخل بلوک اول. then () حاوی پاسخ برگشتی از شبکه است.

در داخل این عملکرد ما:

• بررسی کنید که سرور خطایی را برنگرداند (مانند 404 یافت نشد). اگر این کار را انجام داد ، ما خطا را پرتاب می کنیم.
• با JSON () در پاسخ تماس بگیرید. این داده ها را به عنوان یک شیء JSON بازیابی می کند. ما قول برگشتی را توسط پاسخ. json () برمی گردانیم.

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

برای رسیدگی به خطاها ، ما یک بلوک . catch () را در انتهای زنجیره زنجیره ای قرار می دهیم. این در صورت عدم موفقیت این وعده به دلایلی اجرا می شود. در داخل آن ، ما تابعی را شامل می شویم که به عنوان یک پارامتر ، یک شیء ERR منتقل می شود. این شیء ERR می تواند برای گزارش ماهیت خطایی که رخ داده است استفاده شود ، در این حالت ما این کار را با یک کنسول ساده انجام می دهیم. log ().

با این حال ، یک وب سایت کامل با نمایش پیام در صفحه کاربر و شاید ارائه گزینه هایی برای اصلاح اوضاع ، این خطا را با لطف بیشتری انجام می دهد ، اما ما به چیزی بیش از یک کنسول ساده احتیاج نداریم.

شما می توانید خودتان پرونده شکست را آزمایش کنید:

1. یک کپی محلی از پرونده های مثال تهیه کنید.
2. کد را از طریق یک سرور وب اجرا کنید (همانطور که در بالا توضیح داده شد ، در ارائه مثال خود از یک سرور).
3. مسیر پرونده را که در حال واگذاری شده است ، به چیزی مانند "product. json" تغییر دهید (اطمینان حاصل کنید که اشتباه شده است).
4. اکنون پرونده فهرست را در مرورگر خود (از طریق LocalHost: 8000) بارگیری کنید و در کنسول توسعه دهنده مرورگر خود جستجو کنید. پیامی مشابه "مشکل واکشی: خطای HTTP: 404" را مشاهده خواهید کرد.

بلوک Fetch دوم را می توان در داخل عملکرد FetchBlob () یافت:

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

هنگامی که ما با موفقیت حبس خود را دریافت کردیم ، آن را به عملکرد نمایشگاه () خود منتقل می کنیم ، که آن را نشان می دهد.

API Xmlhttprequest

بعضی اوقات ، به خصوص در کد قدیمی ، API دیگری به نام XMLHTTPREQUEST (اغلب به عنوان "XHR") که برای درخواست HTTP استفاده می شود ، مشاهده خواهید کرد. این واکشی را پیش بینی کرد ، و واقعاً اولین API بود که به طور گسترده برای اجرای AJAX استفاده می شد. توصیه می کنیم در صورت امکان از Fetch استفاده کنید: این یک API ساده تر است و ویژگی های بیشتری نسبت به XMLHTTPREQUEST دارد. ما به عنوان نمونه ای که از XMLHTTPRequest استفاده می کند ، نمی پردازیم ، اما ما به شما نشان خواهیم داد که نسخه XMLHTTPREQUEST از اولین درخواست ما می تواند به نظر برسد:

پنج مرحله برای این کار وجود دارد:

1. یک شیء جدید XMLHTTPREQUEST ایجاد کنید.
2. برای تنظیم اولیه آن ، روش باز () آن را فراخوانی کنید.
3. یک شنونده رویداد را به رویداد بار خود اضافه کنید ، که هنگامی که پاسخ با موفقیت تمام شد ، آتش می گیرد. در شنونده ما با داده ها به صورت اولیه () می نامیم.
4. یک شنونده رویداد را به رویداد خطای خود اضافه کنید ، که در صورت بروز خطای درخواست آتش سوزی می شود
5. درخواست را ارسال کنید

ما همچنین باید همه چیز را در امتحان بپیچیم. Catch Block ، برای رسیدگی به هرگونه خطایی که توسط Open () یا ارسال () پرتاب شده است.

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

خلاصه

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

همچنین ببینید

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