انتقل إلى المحتوى الرئيسي

جلب API

@serverSerrverlesskiy

ال تسمح Fetch API لجافا سكريبت بالاتصال بالخادم باستخدام طلبات HTTP وهي بديل أفضل لفئة XMLHttpRequest. يتم تنفيذ الاستعلامات بواسطة fetch() الطريقة التي تعود🔄 Promise.

Exchange

بناء الجملة#

Book

fetch(url, { options })
  • url - URL لإرسال الطلب ؛
  • options - طلب المعلمات.

بتحديدfetch() طريقة بدون options, ستتلقى طلب GET لجلب البيانات من URL.

طلب المعلمات#

Option

الحجة الثانية ل {options} يقبل طلب المعلمات. قائمة المعلمات:

  1. method - طريقة الطلب(GET, POST, PUT, DELETE, HEAD);
  2. headers - رؤوس HTTP
  3. body - نص الطلب (يُستخدم للطريقة: POST / PUT) ؛
  4. cache - وضع التخزين المؤقت (الافتراضي ، إعادة التحميل ، عدم التخزين المؤقت);
  5. mode - وضع الطلب (cors، no-cors، same-origin);
  6. redirect - يحدد كيفية التعامل مع عمليات إعادة التوجيه (متابعة ، خطأ ، دليل);
  7. referrer - طلب المُحيل ؛
  8. signal - AbortSignal ، طلب المقاطعة;
  9. credentials - إرسال ملفات تعريف الارتباط مع الطلب - mit، same-origin.
fetch('https://jsonplaceholder.typicode.com/users', {  method: 'GET',  headers: {    'Content-Type': 'application/json'  },  mode: 'no-cors'})

تلقي الرد#

Bascketball

إرجاع طريقة fetch ()🔄 Promise كائن من فئة "Response" ، والتي لها الخصائص التالية:

  1. status - كود الاستجابة
  2. statusText - رسالة نصية 📜 المقابلة لرمز الاستجابة ؛
  3. ok - قيمة منطقية تشير إلى نجاح رمز الاستجابة (صواب: 200-299) ؛;
  4. headers - كائن برؤوس استجابة ، حيث يكون المفتاح هو اسم الرأس ، وقيمة المفتاح هي قيمة الرأس المقابلة للمفتاح ؛
  5. url - عنوان URL الذي تم إرسال الطلب إليه ؛
  6. body - بيانات الاستجابة بتنسيق "ReadableStream"
  7. bodyUsed - قيمة منطقية تشير إلى قراءة البيانات.
fetch('https://jsonplaceholder.typicode.com/users').then(response => console.log(response))

التعامل مع الاستجابة#

Download

البيانات المرسلة في التنسيق ReadableStream. يمكن استخدام الطرق التالية لتغيير التنسيق:

  1. text() - يحول الإجابة إلى سلسلة ؛
  2. json() - تحويل الاستجابة بتنسيق JSON ؛
  3. blob() - يحول الاستجابة إلى كائن Blob ؛
  4. formData() - يتم تحويل الاستجابة إلى مثيل FormData؛
  5. arrayBuffer() - يحول الاستجابة إلى كائن ArrayBuffer.

مثال على تحويل استجابة إلى تنسيق JSON.

fetch('https://jsonplaceholder.typicode.com/users')  .then(response => response.json())  .then(data => console.log(data))

معالجة الخطأ#

Error

يمكننا معرفة ما إذا كان fetch() hكما اكتمل مع وجود خطأ🙅‍♂️ باستخدام خصائص "الحالة" و "موافق".

fetch('https://jsonplaceholder.typicode.com/users')  .then(response => {    if (!response.ok) {      console.log('Something went wrong ... Status:' + response.status)    } else {      return response.json()    }  })  .then(data => console.log(data))

With help .catch()

fetch('https://jsonplaceholder.typicode.com/users')  .then(response => response.json())  .then(data => console.log(data))  .catch(error => console.log(error))

طلب أمثلة#

Math

fetch('https://jsonplaceholder.typicode.com/users')  .then(response => response.json())  .then(data => console.log(data[0].name + ' and ' + data[2].name))  .catch(error => console.log(error))

نفس الشيء ، باستخدام ملف async / await بناء الجملة ، والتي سنتعرف عليها بمزيد من التفصيل في المقالة التالية.

let response = await fetch('https://jsonplaceholder.typicode.com/users')let data = await response.json()console.log(data[0].name + ' and ' + data[2].name)

مشاكل؟#

Problem

اكتب لDiscord محادثة.

أسئلة:#

Question

ما الذي تعيده طريقة fetch ()؟

  1. الوظيفة
  2. الكائن
  3. وعد

بالنظر إلى معلمة URL فقط في fetch () ، ما هو الطلب الذي نحصل عليه؟

  1. "مشاركة"
  2. "احصل"
  3. "وضع"

ما هي المعلمة المحددة رؤوس HTTP؟

  1. "إعادة التوجيه"
  2. "رؤوس"
  3. "أوراق الاعتماد"

ما الطريقة التي يجب أن تستخدمها لتحويل الاستجابة إلى سلسلة؟

  1. blob ()
  2. json ()
  3. "نص ()`

ماذا تعني الخاصية "ok" لكائن من الفئة "Response"؟

  1. رمز الاستجابة
  2. نجاح رمز الاستجابة
  3. قراءة البيانات من طلب

لفهم مقدار ما تعلمته في هذا الدرس ، قم بإجراء الاختبار في mobile application من مدرستنا في هذا الموضوع.

Sumerian school

الروابط#

  1. Learn JavaScript
  2. MDN Web Docs
  3. JS Tutorial

المساهمون ✨#

الشكر يعود إلى هؤلاء الأشخاص الرائعين(emoji key):


IIo3iTiv

📖

Dmitriy Vasilev

💵

Resoner2005

🐛 🎨 🖋

Navernoss

🖋 🐛 🎨

Become a Patron!