JS Promises

JS Async ба Await

JS async/await

JS Async

болон

JS Await

Агуулга

ASYNC гэж юу вэ?
AWAIT гэж юу вэ?

Promise гэж юу вэ?

Promise нь ирээдүйд гүйцэтгэгдэх үйлдлийн үр дүнг төлөөлөх объект юм.

Жишээлбэл: Сервер рүү хүсэлт илгээх, файл унших, өгөгдлийн сан руу хандах гэх мэт.

const promise = new Promise((resolve, reject) => {
    // Асинхрон үйлдэл
    if (success) {
        resolve(result);
    } else {
        reject(error);
    }
});

Promise-н төлөвүүд

Promise нь дараах 3 төлөвтэй байж болно:

Хүлээж буй - анхны төлөв, үр дүн тодорхойгүй
Амжилттай - үйлдэл амжилттай дууссан
Татгалзсан - алдаа гарсан эсвэл татгалзсан

Promise-тэй ажиллах

promise
    .then(result => {
        // Амжилттай биелсэн үед
        console.log('Амжилттай:', result);
    })
    .catch(error => {
        // Алдаа гарсан үед
        console.log('Алдаа:', error);
    })
    .finally(() => {
        // Үргэлж ажиллана
        console.log('Үйлдэл дууслаа');
    });

Async/Await

Async/Await нь Promise-тэй ажиллахад илүү энгийн, ойлгомжтой синтакс юм.

async function fetchResult() {
    try {
        const result = await sendRequestToServer();
        return result;
    } catch (error) {
        console.error('Алдаа гарлаа:', error);
    }
}

Практик жишээ

// Promise хэлбэрээр
fetch('https://api.example.com/data')
    .then(result => result.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));

// Async/Await хэлбэрээр
async function fetchData() {
    try {
        const result = await fetch('https://api.example.com/data');
        const data = await result.json();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}

Алдааг боловсруулах

Алдааг хоёр аргаар боловсруулж болно:

// Promise-н алдаа
promise.catch(error => {
    console.error('Алдаа гарлаа:', error);
});

// Async/Await алдаа
async function handleErrors() {
    try {
        await errorProneAction();
    } catch (error) {
        console.error('Алдаа гарлаа:', error);
    }
}

Сайн туршлагууд

Үргэлж алдааг шалгаж, боловсруулах
Promise.all() ашиглан олон үйлдлийг зэрэг гүйцэтгэх
async функц Promise буцаадгийг санах
then() функцууд дотор шинэ Promise үүсгэхээс зайлсхийх
Callback hell үүсгэхээс сэргийлэх

Дүгнэлт

Promise болон Async/Await нь:

Асинхрон кодыг илүү цэгцтэй, ойлгомжтой болгоно
Алдааг илүү хялбар удирдах боломж олгоно
Кодын уншигдах чанарыг сайжруулна
Өргөн хэрэглэгддэг орчин үеийн JavaScript функцүүд

Баярлалаа!

Асуулт байна уу?