الگوهای رایج Fetch

مقدمه

در درس قبل، اصول اولیه Fetch API و نحوه ارسال درخواست‌های ساده GET را یاد گرفتیم. اما قدرت واقعی fetch زمانی مشخص می‌شود که از آرگومان دوم آن، یعنی شیء options، برای پیکربندی دقیق درخواست خود استفاده کنیم. این شیء به ما اجازه می‌دهد تا متد HTTP را تغییر دهیم (مثلاً برای ارسال داده با POST)، هدرهای سفارشی ارسال کنیم، و نحوه‌ی مدیریت کوکی‌ها و اعتبارسنجی را مشخص کنیم.

ارسال داده با درخواست POST

زمانی که می‌خواهیم داده‌ای را به سرور ارسال کنیم (مانند ایجاد یک پست جدید در یک وبلاگ یا ثبت اطلاعات یک فرم)، از متد HTTP POST استفاده می‌کنیم. برای این کار، باید یک شیء options به fetch پاس دهیم و سه پراپرتی کلیدی را در آن تنظیم کنیم.

• method: متد HTTP را مشخص می‌کند. برای ارسال داده، آن را برابر با رشته 'POST' قرار می‌دهیم.
• headers: یک شیء برای تنظیم هدرهای HTTP درخواست. اگر داده‌ای که ارسال می‌کنیم در فرمت JSON است، باید حتماً هدر Content-Type را برابر با 'application/json' قرار دهیم تا سرور بداند چگونه بدنه درخواست را تفسیر کند.
• body: حاوی داده‌ای است که می‌خواهیم ارسال کنیم. این داده باید به فرمت رشته یا یک بافر باینری باشد. بنابراین، اگر یک شیء جاوااسکریپت داریم، باید قبل از قرار دادن در body، آن را با JSON.stringify() به یک رشته JSON تبدیل کنیم.

JAVASCRIPT

async function createPost(postData) {
    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(postData),
        });

        if (!response.ok) {
            throw new Error(`HTTP error! Status: ${response.status}`);
        }

        const result = await response.json();
        console.log('Post created successfully:', result);
    } catch (error) {
        console.error('Failed to create post:', error);
    }
}

const newPost = { title: 'My New Post', body: 'This is the content.', userId: 1 };
createPost(newPost);

در این کد، ما یک تابع async برای ایجاد یک پست جدید تعریف کرده‌ایم. در شیء options، متد را POST تعیین کرده، نوع محتوا را application/json مشخص کرده و شیء جاوااسکریپت postData را پس از تبدیل به رشته JSON، در بدنه درخواست قرار داده‌ایم. الگوی مدیریت پاسخ و خطا مشابه درخواست GET است.

کار با هدرها (Headers)

هدرهای HTTP نقش مهمی در انتقال متادیتا بین کلاینت و سرور دارند. علاوه بر Content-Type، هدرهای رایج دیگری نیز وجود دارند، مانند Authorization برای ارسال توکن‌های احراز هویت. برای مدیریت هدرها می‌توانیم از یک شیء ساده جاوااسکریپت (مانند مثال قبل) یا از سازنده Headers برای ساخت یک شیء هدر استفاده کنیم که متدهای مفیدی مانند append() دارد.

JAVASCRIPT

const myHeaders = new Headers();
myHeaders.append('Authorization', 'Bearer YOUR_JWT_TOKEN');
myHeaders.append('X-Custom-Header', 'MyCustomValue');

fetch('/api/secure-data', { headers: myHeaders });

استفاده از سازنده Headers زمانی مفید است که نیاز به ساخت دینامیک و مدیریت چندین هدر به صورت جداگانه داریم.

مدیریت انواع مختلف پاسخ

همیشه پاسخ سرور در فرمت JSON نیست. Fetch API متدهایی برای خواندن انواع دیگر داده نیز فراهم می‌کند:

• response.text(): بدنه پاسخ را به صورت یک رشته متنی ساده می‌خواند. این متد برای دریافت محتوای HTML، XML یا فایل‌های متنی مناسب است.
• response.blob(): بدنه پاسخ را به صورت یک شیء Blob می‌خواند که برای داده‌های باینری مانند تصاویر، ویدئوها یا فایل‌های PDF کاربرد دارد.
• response.formData(): بدنه پاسخ را به صورت FormData می‌خواند.

JAVASCRIPT

async function displayImage(imageUrl) {
    try {
        const response = await fetch(imageUrl);
        if (!response.ok) throw new Error('Image not found');
        
        const imageBlob = await response.blob();
        
        // Create an object URL from the blob to display it
        const objectURL = URL.createObjectURL(imageBlob);
        document.getElementById('my-image').src = objectURL;
    } catch (error) {
        console.error('Failed to load image:', error);
    }
}

این مثال نشان می‌دهد که چگونه می‌توان یک تصویر را با fetch دریافت، بدنه آن را با .blob() به یک شیء Blob تبدیل کرده و سپس با استفاده از `Object URL` آن را در یک تگ <img> نمایش داد.

در این درس الگوهای پیشرفته‌تر Fetch را بررسی کردیم و یاد گرفتیم که چگونه با استفاده از شیء options، درخواست‌های سفارشی مانند POST را همراه با بدنه و هدرهای لازم ارسال کنیم. این مهارت‌ها برای ساخت اپلیکیشن‌هایی که با APIهای وب تعامل دارند، ضروری است. با این حال، تمام این درخواست‌ها تابع یک قانون امنیتی مهم در مرورگر هستند: سیاست مبدأ یکسان. در درس بعدی، با مفهوم CORS آشنا می‌شویم و می‌فهمیم که چگونه سرورها می‌توانند به صورت امن به صفحات وب از مبدأهای دیگر، اجازه دسترسی به منابع خود را بدهند.