جلب البيانات باستخدام fetch

الأساسيات

التمرين 1: تأمّل الشيفرة التالية.

const URL = 'https://jsonplaceholder.typicode.com/posts';
const response = fetch(URL);
console.log(response);

النتيجة هي:

Promise { <state>: "fulfilled", <value>: Response }

التمرين 2: ارجع إلى التمرين 1؛ استخرج القيمة من الوعد المُرجع.

const URL = "https://jsonplaceholder.typicode.com/posts";
const promise = fetch(URL);

promise
  .then((response) => console.log(response))
  .catch((error) => console.log(error));

النتيجة هي:

Response {
  type: "cors",
  url: "https://jsonplaceholder.typicode.com/posts",
  redirected: false,
  status: 200,
  ok: true,
  statusText: "OK",
  headers: Headers,
  body: ReadableStream,
  bodyUsed: false,
};

fetch()

العامل fetch() تجلب البيانات من عنوان URL، وتُرجع وعدًا يتحقق بكائن من نوع Response .

التمرين 3: ارجع إلى التمرين 2؛ ما حالة الاستجابة؟ تلميح: استخدم response.status

const URL = "https://jsonplaceholder.typicode.com/posts";
const promise = fetch(URL);

promise
  .then((response) => console.log(response.status))
  .catch((error) => console.log(error));

النتيجة هي: 200

التمرين 4: ارجع إلى التمرين 2؛ هل الاستجابة ناجحة؟ تلميح: استخدم response.ok

const URL = "https://jsonplaceholder.typicode.com/posts";
const promise = fetch(URL);

promise
  .then((response) => console.log(response.ok))
  .catch((error) => console.log(error));

النتيجة هي: true

التمرين 5: ارجع إلى التمرين 2؛ اعرض البيانات المُرجعة من العنوان. تلميح: استخدم response.json().

const URL = "https://jsonplaceholder.typicode.com/posts";
const promise = fetch(URL);

promise
  .then((response) => {
    let data = response.json();
    console.log(data);
  })
  .catch((error) => console.log(error));

النتيجة هي: Promise { <state>: "pending" }

تُرجع response.json() وعدًا

التمرين 6 ارجع إلى التمرين 5؛ استخرج قيمة الوعد الذي تُرجعه response.json()

const URL = "https://jsonplaceholder.typicode.com/posts";
const promise = fetch(URL);

promise
  .then((response) => {
    let data = response.json();
    let posts = data.then((values) => {
      console.log(values);
    });
  })
  .catch((error) => console.log(error));

النتيجة هي:

Array(100) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]

التمرين 7 ارجع إلى التمرين 6؛ اعرض كل عنصر في المصفوفة المُرجعة.

const URL = "https://jsonplaceholder.typicode.com/posts";
const promise = fetch(URL);

promise
  .then((response) => {
    let data = response.json();
    let posts = data.then((values) => {
      for (value of values) {
        console.log(value);
      }
    });
  })
  .catch((error) => console.log(error));

سيُعرض كل كائن في المصفوفة في سطر مستقل.

التمرين 8: اعرض البيانات المُرجعة من العنوان التالي.

const URL = "https://jsonplaceholder.typicode.com/users";
const promise = fetch(URL);

promise
  .then((response) => {
    let data = response.json();
    let users = data.then((values) => {
      for (value of values) {
        console.log(value);
      }
    });
  })
  .catch((error) => console.log(error));

سيُعرض كل كائن في المصفوفة في سطر مستقل.

التمرين 9: اعرض البيانات المُرجعة من العنوان التالي.

const URL = "https://jsonplaceholder.typicode.com/comments";
const promise = fetch(URL);

promise
  .then((response) => {
    let data = response.json();
    let comments = data.then((values) => {
      for (value of values) {
        console.log(value);
      }
    });
  })
  .catch((error) => console.log(error));

سيُعرض كل كائن في المصفوفة في سطر مستقل.

جلب البيانات بصورة غير متزامنة

التمرين 10: أنشئ دالة async ، واستدعِ فيها الطريقة fetch.

const URL = "https://jsonplaceholder.typicode.com/posts";
async function fetchPosts() {
  const promise = fetch(URL);
  console.log(promise);
}

fetchPosts();

النتيجة هي: Promise { <state>: "pending" }

التمرين 11: ارجع إلى التمرين 10؛ استخدم await لاستخراج قيمة الوعد المُرجع.

const URL = "https://jsonplaceholder.typicode.com/posts";
async function fetchPosts() {
  const response = await fetch(URL);
  console.log(response);
}

fetchPosts();

النتيجة هي:

Response {
  type: "cors",
  url: "https://jsonplaceholder.typicode.com/posts",
  redirected: false,
  status: 200,
  ok: true,
  statusText: "OK",
  headers: Headers,
  body: ReadableStream,
  bodyUsed: false,
};

التمرين 12: ارجع إلى التمرين 11؛ استخرج البيانات المُرجعة باستخدام response.json().

const URL = "https://jsonplaceholder.typicode.com/posts";
async function fetchPosts() {
  const response = await fetch(URL);
  const data = response.json();
  console.log(data);
}

fetchPosts();

النتيجة هي: Promise { <state>: "pending" }

التمرين 13: ارجع إلى التمرين 12؛ انتظر تحقق الوعد المُرجع باستخدام await.

const URL = "https://jsonplaceholder.typicode.com/posts";
async function fetchPosts() {
  const response = await fetch(URL);
  const data = await response.json();
  console.log(data);
}

fetchPosts();

النتيجة هي:

Array(100) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]

تدريبات

التمرين 14: اجلب البيانات من العنوان التالي باستخدام async/await.

const URL = "https://jsonplaceholder.typicode.com/users";
async function fetchUsers() {
  const response = await fetch(URL);
  const users = await response.json();
  console.log(users);
}
fetchUsers();

النتيجة هي:

Array(10) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…} ]

التمرين 15: اجلب البيانات من العنوان التالي باستخدام async/await.

const URL = "https://jsonplaceholder.typicode.com/photos";
async function fetchPhotos() {
  const response = await fetch(URL);
  const photos = await response.json();
  console.log(photos);
}
fetchPhotos();

النتيجة هي:

Array(5000) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]

التمرين 16: اجلب البيانات من العنوان التالي باستخدام async/await.

const URL = "https://jsonplaceholder.typicode.com/albums";
async function fetchAlbums() {
  const response = await fetch(URL);
  const albums = await response.json();
  console.log(albums);
}
fetchAlbums();

النتيجة هي:

Array(100) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]