الدوال غير المتزامنة

الأساسيات

التمرين 1: أنشئ دالة عادية تُرجع Sync Hi.

function hi1(){
  return 'Sync Hi'
}

let syncHi = hi1()
console.log(syncHi)

النتيجة هي: Sync Hi

التمرين 2: تأمّل الشيفرة التالية، وقارن النتيجة مع التمرين 1.

async function hi2(){
  return 'Async Hi'
}

let asyncHi = hi2()
console.log(asyncHi)

النتيجة هي:

Promise { <state>: "fulfilled", <value>: "Async Hi" }

الدوال غير المتزامنة

تُرجع الدوال غير المتزامنة وعدًا.

التمرين 3: اعرض قيمة الوعود المُرجعة في التمرين 2.

async function hi2(){
  return 'Async Hi'
}

let asyncHi = hi2()
asyncHi.then(value => console.log(value))

النتيجة هي: Async Hi

التمرين 4: حوّل الدالة التالية إلى دالة غير متزامنة، واعرض قيمتها في وحدة التحكم.

//function m10(num) {
//  return num * 10;
//}

async function m10(num) {
  return num * 10;
}
m10(10).then((value) => console.log(value));
m10(null).then((value) => console.log(value));
m10(undefined).then((value) => console.log(value));

النتيجة هي:

100
0
NaN

التمرين 5: حوّل الدالة التالية إلى دالة غير متزامنة، واعرض قيمتها في وحدة التحكم.

//const createObj = (key, val) => {
//  let obj = {};
//  obj[key] = val;
//  return obj;
//};

const createObj = async (key, val) => {
  let obj = {};
  obj[key] = val;
  return obj;
};
createObj("num", 5).then((obj) => console.log(obj));

النتيجة هي: Object {num: 5}

---

await

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

const hi = () => {
  return new Promise((resolve) => setTimeout(resolve, 2000, "hi"));
};
const getHi = async () => {
  let x = await hi();
  console.log(x);
};
getHi();

النتيجة هي: hi

await

العامل await يُستخدم لانتظار وعد، ويُرجع القيمة التي يتحقق بها الوعد.

التمرين 7: أعد كتابة شيفرة التمرين 4 بالطريقة نفسها التي كُتبت بها شيفرة التمرين 6 .

function m10(num) {
  return new Promise((resolve) => setTimeout(resolve, 2000, num * 10));
}
async function m10Async(num) {
  let result = await m10(num);
  console.log(result)
}
m10Async(10)

النتيجة هي: 100

التمرين 8: أعد كتابة شيفرة التمرين 5 بالطريقة نفسها التي كُتبت بها شيفرة التمرين 6 .

const createObj = (key, val) => {
  let obj = {};
  obj[key] = val;
  return new Promise((resolve) => setTimeout(resolve, 2000, obj));
};
const createObjAsync = async (key, val) => {
  let obj = await createObj(key, val);
  console.log(obj);
};
createObjAsync("num", 5);

النتيجة هي: Object {num: 5}

---

إرجاع وعد

التمرين 9: ارجع إلى التمرين 6؛ ما القيمة التي تُرجعها الدالة getHi ؟

const hi = () => {
  return new Promise((resolve) => setTimeout(resolve, 2000, "hi"));
};
const getHi = async () => {
  let x = await hi();
  return x;

};
console.log(getHi())

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

الدوال غير المتزامنة تُرجع وعدًا (للتذكير)

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

const hi = () => {
  return new Promise((resolve) => setTimeout(resolve, 2000, "hi"));
};
const getHi = async () => {
  let x = await hi();
  return x;
};
getHi().then(val => console.log(val))

النتيجة هي: hi

---

استخدام try/catch

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

function checkValue(value) {
  return new Promise((resolve, reject) => {
    if (value === undefined) {
      reject("Invalid value");
    } else {
      resolve(value);
    }
  });
}
checkValue(undefined)
  .then((value) => console.log(value))
  .catch((error) => console.log(error));
checkValue(5)
  .then((value) => console.log(value))
  .catch((error) => console.log(error));

النتيجة هي:

5
Invalid value

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

function checkValue(value) {
  return new Promise((resolve, reject) => {
    if (value === undefined) {
      reject("Invalid value");
    } else {
      resolve(value);
    }
  });
}
async function checkValueAsync(val) {
  try {
    let x = await checkValue(val);
    console.log(x);
  } catch (error) {
    console.log(error);
  }
}
checkValueAsync(undefined);
checkValueAsync(10);

النتيجة هي:

Invalid value
10

ملاحظة

يمكنك التقاط الأخطاء في الدوال async باستخدام عبارة try/catch .

---

تدريبات

التمرين 13: نفّذ الخطوات التالية:

1. أنشئ دالة عادية تُرجع وعدًا.
2. إذا كانت القيمة المُعطاة تساوي "done"، فتحقّق الوعد؛ وإلا فارفضه.
3. يتحقق الوعد بعد 4 ثوانٍ بالقيمة 200.
4. يُرفض الوعد بعد 3 ثوانٍ بالرسالة 403
5. استدعِ الدالة التي أنشأتها داخل دالة غير متزامنة.
6. التقط الخطأ باستخدام عبارة try/catch.

function myfunc(val) {
  return new Promise((resolve, reject) => {
    if (val === "done") {
      setTimeout(resolve, 4000, 200);
    } else {
      setTimeout(reject, 3000, 403);
    }
  });
}
async function myfuncAsync(val) {
  try {
    let res = await myfunc(val);
    console.log(res);
  } catch (error) {
    console.log(error);
  }
}

myfuncAsync("done");
myfuncAsync(5);

النتيجة هي:

403
200

التمرين 14: نفّذ الخطوات التالية:

1. أنشئ دالة عادية تُرجع وعدًا.
2. إذا كانت القيمة المُعطاة أقل من 0، فتحقّق الوعد؛ وإلا فارفضه.
3. يتحقق الوعد بعد ثانية واحدة بالقيمة {val: val, state: "ok"}.
4. يُرفض الوعد بعد ثانية واحدة بالرسالة {val: val, state: "ko"}
5. استدعِ الدالة التي أنشأتها داخل دالة غير متزامنة.
6. التقط الخطأ باستخدام عبارة try/catch.

function myfunc(val) {
  return new Promise((resolve, reject) => {
    if (val < 0) {
      setTimeout(resolve, 1000, {val: val, state: "ok"});
    } else {
      setTimeout(reject, 1000, {val: val, state: "ko"});
    }
  });
}
async function myfuncAsync(val) {
  try {
    let res = await myfunc(val);
    console.log(res);
  } catch (error) {
    console.log(error);
  }
}

myfuncAsync(-7);
myfuncAsync(1);

النتيجة هي:

Object { val: -7, state: "ok" }
Object { val: 1, state: "ko" }