الشكل العام لـ JavaScript Promises

وعليكم السلام ورحمة الله وبركاته

الكود مؤلف من ثلاثة أقسام، اﻷول هو:

fetch(url)

تابع fetch هو طريقة لعمل HTTP Requests من خلال الـjavascript ويعتبر بديلاً عن XMLHttpRequest أي بديلاً عن الـAjax.

هذا التابع يرد ما يسمى بـPromise، الـPromise هو تمثيل ﻷي عملية asynchronous حيث ينفذ بالخلفية وعندما ينتهي تنفيذه ينفذ التابع الذي تمرره كمعامل إلى تابع then، في حالة الـfetch ينفذ تابع الـthen عندما ينتهي الـrequest من السيرفر، القسم الثاني هو تابع then التالي:

.then(response => {return response.text()})

المعامل response هو نتيجة Promise وأي Promise أي أيُ عملية asynchronous قد تأتي بنتيجة وقد لا تأتي بنتيجة، المعامل response هو Response object عنده الكثير من التوابع لجلب معلومات عن الجواب الذي أرسله السيرفر، اﻵن نريد أن نجلب response body ونحن نتوقع أن يكون response body هو نصي مثل html response مثلاً لكن قد يكون أيضاً text/plain.

لجلب response body نستخدم تابع text، تابع text أيضاً يرد promise أي أنه عملية asynchronous ، قد تقول اﻵن لماذا وضعنا قبل response.text() تعليمة return ؟ ألا تستخدم هذه التعليمة لرد قيمة ؟

إن Promise يعتبر object له تعامل خاص من المتصفح ولكنه كأي object يمكن رده كقيمة وهذا يجعل كتابة تابعك الخاص الذي يرد Promise ممكناً والـPromise لديه constructor مثله مثل أي object.

عندما نرد promise كقيمة داخل تابع then لـPromise آخر فإن نتيجة تابع then تكون أيضاً Promise.

سأعيد الشرح ﻷنني أعلم أن اﻷفكار أصبحت متشابكة، أولاً لدينا:

fetch(url)

يرد Promise لذلك نستدعي then ونجلب response body باستخدام تابع text، الـthen يرد promise إذاً التعبير التالي:

fetch(url).then(response => {return response.text()})

عبارة عن Promise كبير ينتهي عندما ينتهي الـrequest من السيرفر وتنتهي عملية response.text أيضاً، بما أنه Promise كبير يمكننا كتابة .then وهذا هو القسم الثالث من الكود وهو كالتالي:

.then(data => {})

الـdata هنا هي نتيجة response.text وﻷن response.text يرد Promise<string> إذاً فالـdata عبارة عن string هو response body as text، قد يكون نص html يمكننا إضافته إلى DOM وبهذا يصير الكود AJAX نظامي، قد يكون أيضاً text/plain، الكود السابق لا يفعل شيئاً بالـresponse body ﻷنه مجرد مثالٍ لا أكثر.

كمعلومة إضافية الـResponse object لديه تابع هو json يرد response body as JSON Object.

لفهم المزيد من اﻷكواد مثل كودك أنصح بالقراءة بشكل أكبر عن موضوع Promises وستختمه بإذن الله تعالى.

بالتوفيق وشكراً لك

مرحبا حفصة،

fetch هي تابع function يقوم بالاتصال برابط ويب URL : Uniform Resource Locator أي (محدد موقع المعلومات) وينتظر جواب المخدم الذي يرسل البيانات أو رسالة خطأ، وتمرر النتيجة للتابع التالي then.

then الأولى: هي تابع أيضا ينتظر إنتهاء عمل fetch ليقوم بالتنفيذ وتعني كترجمة (عندها) أي مثل الخطوة التالية، وتقوم باستقبال البيانات عن طريق الوسيط response الذي يمثل جواب المخدم للطلبية وتعيد النتيجة على الشكل 

{return response.text()}

مستخلصةً البيانات من الرد response باستخدام ال function التي هي text أي تعيد البيانات بشكل نصي، وبدورها تمررها للدالة التالية.

then الثانية: بعد انتهاء then الأولى تتقبل البيانات بنفس الطريقة في متحول اسمه data و تعيد غرض فارغ {}.

هذه سلسلة functions تستعمل لمعالجة البيانات تعتمد علة ما يدعى JavaScript Promises

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

"I Promise a Result!"

// الشيفرة البرمجية التي تعدي البيانات مثلا المخدم
"Producing code" is code that can take some time 

// الشيفرة البرمجية التي تستقبل البيانات مثلا المتصفح
"Consuming code" is code that must wait for the result 

الوعد في جافاسكربت هو غرض يربط بين الطلبية و جوابهافي حال اتصالات غير متزامنة
A Promise is a JavaScript object that links producing code and consuming code

- أظن أنها شيفرة برمجية غير هادفة ومثال بدون تطبيق لكن هذا الشكل العام له.

يمكنك الإطلاع أكثر من توثيق موسوعة حسوب JavaScript - Promise

شرح من أكاديمية حسوب من هنا - توثيق w3schools - مصادر أجنبية رابط1 - رابط2 - رابط3

بالتوفيق

بتاريخ On 1/12/2021 at 15:54 قال أحمد حبنكة:

وعليكم السلام ورحمة الله وبركاته

الكود مؤلف من ثلاثة أقسام، اﻷول هو:

fetch(url)

تابع fetch هو طريقة لعمل HTTP Requests من خلال الـjavascript ويعتبر بديلاً عن XMLHttpRequest أي بديلاً عن الـAjax.

هذا التابع يرد ما يسمى بـPromise، الـPromise هو تمثيل ﻷي عملية asynchronous حيث ينفذ بالخلفية وعندما ينتهي تنفيذه ينفذ التابع الذي تمرره كمعامل إلى تابع then، في حالة الـfetch ينفذ تابع الـthen عندما ينتهي الـrequest من السيرفر، القسم الثاني هو تابع then التالي:

.then(response => {return response.text()})

المعامل response هو نتيجة Promise وأي Promise أي أيُ عملية asynchronous قد تأتي بنتيجة وقد لا تأتي بنتيجة، المعامل response هو Response object عنده الكثير من التوابع لجلب معلومات عن الجواب الذي أرسله السيرفر، اﻵن نريد أن نجلب response body ونحن نتوقع أن يكون response body هو نصي مثل html response مثلاً لكن قد يكون أيضاً text/plain.

لجلب response body نستخدم تابع text، تابع text أيضاً يرد promise أي أنه عملية asynchronous ، قد تقول اﻵن لماذا وضعنا قبل response.text() تعليمة return ؟ ألا تستخدم هذه التعليمة لرد قيمة ؟

إن Promise يعتبر object له تعامل خاص من المتصفح ولكنه كأي object يمكن رده كقيمة وهذا يجعل كتابة تابعك الخاص الذي يرد Promise ممكناً والـPromise لديه constructor مثله مثل أي object.

عندما نرد promise كقيمة داخل تابع then لـPromise آخر فإن نتيجة تابع then تكون أيضاً Promise.

سأعيد الشرح ﻷنني أعلم أن اﻷفكار أصبحت متشابكة، أولاً لدينا:

fetch(url)

يرد Promise لذلك نستدعي then ونجلب response body باستخدام تابع text، الـthen يرد promise إذاً التعبير التالي:

fetch(url).then(response => {return response.text()})

عبارة عن Promise كبير ينتهي عندما ينتهي الـrequest من السيرفر وتنتهي عملية response.text أيضاً، بما أنه Promise كبير يمكننا كتابة .then وهذا هو القسم الثالث من الكود وهو كالتالي:

.then(data => {})

الـdata هنا هي نتيجة response.text وﻷن response.text يرد Promise<string> إذاً فالـdata عبارة عن string هو response body as text، قد يكون نص html يمكننا إضافته إلى DOM وبهذا يصير الكود AJAX نظامي، قد يكون أيضاً text/plain، الكود السابق لا يفعل شيئاً بالـresponse body ﻷنه مجرد مثالٍ لا أكثر.

كمعلومة إضافية الـResponse object لديه تابع هو json يرد response body as JSON Object.

لفهم المزيد من اﻷكواد مثل كودك أنصح بالقراءة بشكل أكبر عن موضوع Promises وستختمه بإذن الله تعالى.

بالتوفيق وشكراً لك

تقصد اننا نستطيع جلب بيابنات الapi  باستخدام ال ajax وهي طريقه افضل

بتاريخ 24 دقائق مضت قال Hafsa Aly:

تقصد اننا نستطيع جلب بيابنات الapi  باستخدام ال ajax وهي طريقه افضل

مرحبا،

إن تقنية AJAX توفر طريقة لجلب بيانات من المخدم بدون الحاجة لتحديث كامل الصفحة وهو أمر مرغوب به وحل سريع لتحديث أجزاء معينة من الصفحة.

نستطيع جلب بيانات من API بأي طريقة أردنا، فبعد طلب الرابط URL يرسل المخدم البيانات المطلوبة.

تسهل مكتبة jQuery التعامل مع Ajax ويمكنك الإطلاع عليها من jquery_ajax

بالتوفيق