جلب API

@serverSerrverlesskiy

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

Exchange

بناء الجملة

Book

fetch(url, { options })

url - URL لإرسال الطلب ؛
options - طلب المعلمات.

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

طلب المعلمات

Option

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

method - طريقة الطلب(GET, POST, PUT, DELETE, HEAD);
headers - رؤوس HTTP
body - نص الطلب (يُستخدم للطريقة: POST / PUT) ؛
cache - وضع التخزين المؤقت (الافتراضي ، إعادة التحميل ، عدم التخزين المؤقت);
mode - وضع الطلب (cors، no-cors، same-origin);
redirect - يحدد كيفية التعامل مع عمليات إعادة التوجيه (متابعة ، خطأ ، دليل);
referrer - طلب المُحيل ؛
signal - AbortSignal ، طلب المقاطعة;
credentials - إرسال ملفات تعريف الارتباط مع الطلب - mit، same-origin.

fetch('https://jsonplaceholder.typicode.com/users', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  },
  mode: 'no-cors'
})

تلقي الرد

Bascketball

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

status - كود الاستجابة
statusText - رسالة نصية المقابلة لرمز الاستجابة ؛
ok - قيمة منطقية تشير إلى نجاح رمز الاستجابة (صواب: 200-299) ؛;
headers - كائن برؤوس استجابة ، حيث يكون المفتاح هو اسم الرأس ، وقيمة المفتاح هي قيمة الرأس المقابلة للمفتاح ؛
url - عنوان URL الذي تم إرسال الطلب إليه ؛
body - بيانات الاستجابة بتنسيق "ReadableStream"
bodyUsed - قيمة منطقية تشير إلى قراءة البيانات.

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

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

Download

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

text() - يحول الإجابة إلى سلسلة ؛
json() - تحويل الاستجابة بتنسيق JSON ؛
blob() - يحول الاستجابة إلى كائن Blob ؛
formData() - يتم تحويل الاستجابة إلى مثيل FormData؛
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)