شرح data في javascript

Hafsa Aly · 13 يناير 2021


كنت اريد شرح هذا الكود
fetch(url).then(function(response) {return response.json()}).then(data=>{console.log(data.items)});
مالفرق بين الداله الاولى then والثانيه
data=>{}
لم افهم ماهو المتغير data

سامح أشرف · 13 يناير 2021

دالة Fetch عبارة عن Web API تسمح لك بإرسال طلبات HTTP Requests وتقوم بجلب لك نتيجة هذا الطلب، فعلى سبيل المثال:

تريد أن تجلب 10 أسماء أشخاص عشوائية من API معين، لذلك تستخدم هذا الرابط (قم بزيارته في المتصفح لترى النتيجة)، ما تراه في المتصفح هو ما سوف تجلبه لك دالة Fetch ويسمى إجابة الطلب Response.

فإن قمت بكتابة السطر التالي في الـ console:

console.log(fetch('https://namey.muffinlabs.com/name.json?count=10&with_surname=true&frequency=common'));

ستحصل على هذه النتيجة (الصورة الأولى fetch_then_result.png)

fetch_then_result.png.f5cdde82e65bb214bdaacca8daeabd76.png

هذه النتيجة من نوع Promise وسنرجع لهذا النوع لاحقًا، أما الآن تحتاج لطريقة للحصول على الأسماء من داخل هذه النتيجة، وهنا يأتي دور دالة then، هذه الدالة تسمح لك بالدخول إلى النتيجة من نوع Promise وتستخدمها كما تريد، فإذا قمت بكتابة السطر التالي في الـ console:

console.log(fetch('https://namey.muffinlabs.com/name.json?count=10&with_surname=true&frequency=common').then(function(response) {return response.json()}));

ستحصل على هذه النتيجة (الصورة الثانية fetch_result.png) وستجد 10 أسماء عشوائية موجودة في PromiseResult

fetch_result.png.18ea70308d5985bc39c8d252c23364af.png

دالة then تأخذ متغير عبارة عن دالة في حد ذاته، بعد ذلك يتم تمرير إجابة الطلب من نوع Promise إلى هذه الدالة الأخيرة لتقوم بتحويله إلى كود JSON بدلًا من نص عادي String حتى يسهل التعامل معه في باقي الكود، بمجرد أن يتم تحويل الإجابة response إلى كود JSON ترجعه الدالة then الأولى بإستخدام جملة return ويخزن في PromiseResult

لاحظ أنه يمكنك أن تسمي اسم المتغير الممرر إلى الدالة داخل then بأي اسم، مثلًا:

.then(function(something) {return something.json()}));

// أو هكذا 
.then(function(data) {return data.json()}));

لاحظ أيضُا أنه يمكنك أن تستدعي دالة then أكثر من مرة على التوالي:

fetch('https://namey.muffinlabs.com/name.json?count=10&with_surname=true&frequency=common').then(function(response) {return response.json()}).then(function (something){console.log(something)});

وفي كل مرة تأخذ دالة then ما أعادته دالة then التي قبلها، (أنظر الصور الثالثة fetch_then_then_result.png)

قد تتسأل لمذا كل هذا التعقيد، لماذا لا يتم تخزين نتيجة الطلب في متغير مباشرة هكذا:

var x = fetch('https://namey.muffinlabs.com/name.json?count=10&with_surname=true&frequency=common')

لتستخدمها بكل سهولة بعد ذلك

للإجابة على ذلك عليك أن ما سيحدث للموقع في حالة تأخر الخادم server في إرسال النتيجة response، بكل بساطة سيتوقف كل شيء حتى يتم تخزين إجابة الطلب في المتغير x ، بالطبع لا نريد حدوث ذلك، لذلك وجب إستخدام عملية غير متزامنة (asynchronous operation) أي يتم تنفيذ دالة fetch وفي نفس الوقت يظل الموقع يعمل كما كان بالضبط.

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

ملاحظة: في دالة then الثانية في سؤالك، تم دالة سهمية Arrow Function وهي نفس الدالة العادية لكن بطريقة كتابة مختلفة فقط. أنظر الدوال السهمية في JavaScript