إضافة سلسلة الاستعلام في جلب طلبات GET

أثناء استكشاف إمكانيات سلسلة استعلام Fetch API، يهدف المطور إلى تمرير المعلمات إلى طلبات GET باستخدام طريقة مشابهة لـ $ jQuery .ajax().

الحل

تستخدم واجهة Fetch API الجديدة URLSearchParams لمعالجة إضافة سلسلة الاستعلام. يوفر هذا الكائن طريقة ملائمة لإنشاء وتعديل معلمات سلسلة الاستعلام.

fetch('https://example.com?'   new URLSearchParams({
    foo: 'value',
    bar: 2,
}).toString())

يقوم أسلوب URLSearchParams.toString() بتشفير كائن المعلمة إلى سلسلة استعلام منسقة بشكل مناسب.

بدلاً من ذلك، يمكنك حذف استدعاء .toString()، كما تقوم JavaScript تلقائيًا بإجبار الكائنات غير المتسلسلة على السلاسل عندما تكون متسلسلة مع السلاسل. لاحظ أن هذا الأسلوب يتطلب فهمًا أعمق لجافا سكريبت.

مثال كامل

إليك مثال شامل مع معلمات الاستعلام:

async function doAsyncTask() {
  const url = (
    'https://jsonplaceholder.typicode.com/comments?'  
    new URLSearchParams({ postId: 1 }).toString()
  );

  const result = await fetch(url)
    .then(response => response.json());

  console.log('Fetched from: '   url);
  console.log(result);
}

doAsyncTask();