JavaScript үндэс / Promise

Promise

Promise бол ирээдүйд дуусах үйлдлийг илэрхийлдэг объект юм. Нэрнээс нь ойлгоход болно — "амлалт" гэсэн утгатай. "Би энэ ажлыг хийнэ, дуусмагц чамд хариу өгнө" гэж амалж байгаа хэрэг.

Promise-ийн гурван төлөв

Promise дараах гурван төлөвийн аль нэгэнд байна:

  • pending — гүйцэтгэгдэж байна, хариу ирээгүй
  • fulfilled — амжилттай дууссан, утга буцаасан
  • rejected — алдаа гарсан, шалтгаан буцаасан
javascript
const амлалт = new Promise((resolve, reject) => {
  const амжилттай = true;

  if (амжилттай) {
    resolve("Өгөгдөл ирлээ!");
  } else {
    reject("Алдаа гарлаа.");
  }
});

resolve нь амжилтын утгыг, reject нь алдааг дамжуулна.

.then() ба .catch()

Promise-ийн үр дүнг .then() болон .catch() ашиглан авна.

javascript
const амлалт = new Promise((resolve, reject) => {
  resolve("Сервер хариулав!");
});

амлалт
  .then((үр дүн) => {
    console.log(үр дүн); // Сервер хариулав!
  })
  .catch((алдаа) => {
    console.log("Алдаа:", алдаа);
  });

.then() нь амжилтын үед, .catch() нь алдааны үед ажиллана. .catch() нь try/catch-тэй ижил үүрэгтэй гэж ойлгож болно.

.finally()

.finally() нь амжилттай эсвэл алдаатай аль ч тохиолдолд ажиллана. Loading дуусгах, холболт хаах зэрэгт хэрэглэнэ:

javascript
let ачааллаж = true;

өгөгдөл авах()
  .then((өгөгдөл) => {
    console.log(өгөгдөл);
  })
  .catch((алдаа) => {
    console.log("Алдаа:", алдаа.message);
  })
  .finally(() => {
    ачааллаж = false;
    console.log("Дууслаа"); // Үргэлж ажиллана
  });

Promise chain

.then() нь дахин Promise буцааж болно — ийнхүүгээр хэлхээ үүсгэж, дараалсан async үйлдлүүдийг callback hell-гүйгээр бичнэ:

javascript
татах("хэрэглэгч.json")
  .then((хэрэглэгч) => {
    console.log("Хэрэглэгч олдлоо:", хэрэглэгч.нэр);
    return татах("захиалга.json");
  })
  .then((захиалга) => {
    console.log("Захиалга:", захиалга.тоо);
    return татах("хүргэлт.json");
  })
  .then((хүргэлт) => {
    console.log("Хүргэлт:", хүргэлт.огноо);
  })
  .catch((алдаа) => {
    console.log("Ямар нэг алдаа гарлаа:", алдаа.message);
  });

Хэлхээний аль ч .then()-д алдаа гарвал доорх .catch() барина — нэг .catch() бүгдэд хангалттай.

Promise.all()

Хэд хэдэн Promise-ийг зэрэг ажиллуулж, бүгд дуусмагц үр дүнг авахад Promise.all() ашиглана:

javascript
const нэр авах = new Promise((resolve) => resolve("Болд"));
const нас авах = new Promise((resolve) => resolve(25));
const хот авах = new Promise((resolve) => resolve("Улаанбаатар"));

Promise.all([нэр авах, нас авах, хот авах])
  .then(([нэр, нас, хот]) => {
    console.log(нэр, нас, хот); // Болд 25 Улаанбаатар
  });

Нэг нь reject болвол .catch() шууд ажиллана.

Дараагийн хичээлд:

Async/Await — Promise дээр суурилсан боловч .then() хэлхээний оронд ердийн код шиг уншигдах, бичихэд хамгийн хялбар async арга. Орчин үеийн JavaScript-ийн стандарт болсон юм.