JavaScript үндэс / Async/Await

Async/Await

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

async функц

async түлхүүр үгийг функцийн өмнө бичихэд тухайн функц автоматаар Promise буцаадаг болно.

javascript
async function мэндлэх() {
  return "Сайн уу!";
}

мэндлэх().then((үр дүн) => console.log(үр дүн)); // Сайн уу!

return "Сайн уу!" нь return Promise.resolve("Сайн уу!") гэж бичсэнтэй ижил утгатай.

await түлхүүр үг

await нь async функц дотор л ашиглагдана. Promise дуусахыг хүлээж, үр дүнг шууд авна — .then() бичих шаардлагагүй болно.

javascript
function хоцролт(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

async function жишээ() {
  console.log("Эхлэв");
  await хоцролт(2000); // 2 секунд хүлээнэ
  console.log("2 секундын дараа");
}

жишээ();

await байсан мөрт хүрмэгц функц хүлээдэг — гэхдээ бусад код зогсохгүй үргэлжилнэ.

.then() болон async/await харьцуулалт

Хоёулаа ижил үйлдлийг хийдэг — зөвхөн бичлэгийн хэлбэр өөр:

javascript
// .then() хэлбэр
function өгөгдөл авах() {
  татах("/api/хэрэглэгч")
    .then((хэрэглэгч) => {
      return татах("/api/захиалга/" + хэрэглэгч.id);
    })
    .then((захиалга) => {
      console.log(захиалга);
    });
}

// async/await хэлбэр
async function өгөгдөл авах() {
  const хэрэглэгч = await татах("/api/хэрэглэгч");
  const захиалга = await татах("/api/захиалга/" + хэрэглэгч.id);
  console.log(захиалга);
}

Доорх хувилбар дараалсан алхам шиг уншигдана — ихэнх хөгжүүлэгчид үүнийг илүүд үздэг.

try/catch алдаа зохицуулах

Async/Await-тэй алдаа зохицуулахдаа try/catch ашиглана — .catch() бичих шаардлагагүй.

javascript
async function өгөгдөл татах(url) {
  try {
    const хариу = await fetch(url);

    if (!хариу.ok) {
      throw new Error("Сервер алдаа буцаав: " + хариу.status);
    }

    const өгөгдөл = await хариу.json();
    console.log(өгөгдөл);
  } catch (алдаа) {
    console.log("Алдаа гарлаа:", алдаа.message);
  }
}

Promise.all ба await

Хэд хэдэн async үйлдлийг зэрэг явуулахдаа Promise.all-ийг await-тэй хослуулна:

javascript
async function бүгдийг авах() {
  try {
    const [хэрэглэгчид, бүтээгдэхүүн] = await Promise.all([
      fetch("/api/хэрэглэгчид").then((r) => r.json()),
      fetch("/api/бүтээгдэхүүн").then((r) => r.json())
    ]);

    console.log("Хэрэглэгчид:", хэрэглэгчид.length);
    console.log("Бүтээгдэхүүн:", бүтээгдэхүүн.length);
  } catch (алдаа) {
    console.log("Алдаа:", алдаа.message);
  }
}

Хоёр request зэрэг явна — нэгийг нь дуусахыг хүлээгээд нөгөөг эхлүүлэхгүй. Ийм байдлаар хурдан болно.

Нийтлэг алдаа: await-г мартах

await мартвал Promise объект авна, тэр дотрох утгыг биш:

javascript
async function буруу() {
  const өгөгдөл = fetch("/api/мэдээлэл"); // await мартсан!
  console.log(өгөгдөл); // Promise { <pending> } — буруу!
}

async function зөв() {
  const өгөгдөл = await fetch("/api/мэдээлэл"); // await байгаа
  console.log(өгөгдөл); // Response объект — зөв
}

Алдааны мэдэгдэл ойлгомжгүй байвал await дутуу бичсэн эсэхийг эхэлж шалгаарай.

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

Fetch API — async/await ашиглан жинхэнэ серверээс өгөгдөл татах, илгээх аргыг үзнэ. Энэ бол вэб программчлалын хамгийн чухал ур чадваруудын нэг юм.

← Өмнөх хичээлPromiseДараах хичээл →Fetch API