29/09/2018, 00:26

ES7 async await đơn giản

Trong những các tính năng của ES7. một trong những tính năng thú vị nhất đó là sự bổ sung của async và await. làm việc với async khá là thường xuyên với chúng ta đặc biệt đối với những ứng dụng được phát triển sử dụng nodejs, hay việc call http đến server. bài toán async chưa bao giờ là đơn giản đối ...

Trong những các tính năng của ES7. một trong những tính năng thú vị nhất đó là sự bổ sung của async và await. làm việc với async khá là thường xuyên với chúng ta đặc biệt đối với những ứng dụng được phát triển sử dụng nodejs, hay việc call http đến server. bài toán async chưa bao giờ là đơn giản đối với những ngôn ngữ bất đồng bộ. để giải thích được lợi ích của async và await mình sẽ đi đến một vị dụ cụ thể:

Sơn dắt xe vào nhà khi cửa đang khóa, ví dụ vậy, vậy Sơn phải thực hiện các bước như sau
1: Tìm chìa khóa trong balo
2: Mở cửa
3: Dắt xe vào
4: Đóng cửa
5: Cho xe vào vị trí

Mỗi công đoạn xử lý phải mất 1 khoảng thời gian là 200 mili giây chẳng hạn:

Nếu javascript là ngôn ngữ lập trình đồng bộ ta dễ dàng xử lý như sau

function timChiaKhoa() {
    setTimeout(function() {
        return 'Tim chia khoa thanh cong'
    }, 200)
}

function moCua() {
    setTimeout(function() {
        return 'Mo cua thanh cong'
    }, 200)
}

function datXeVao() {
    setTimeout(function() {
        return 'dat xe thanh cong'
    }, 200)
}


function khoaCua() {
    setTimeout(function() {
        return 'khoa cua thanh cong'
    }, 200)
}


function xepXe() {
    setTimeout(function() {
        return 'Xe xe thanh cong'
    }, 200)
}


function process() {
    var getChiaKhoa = timChiaKhoa();
    var getMoCua = moCua()
    var getXeVao = datXeVao()
    var getKhoaCua = khoaCua()
    var getXepXe = xepXe()
    return getChiaKhoa + getMoCua + getXeVao + getKhoaCua + getXepXe
}

var result = process()

console.log(result)

Nhưng javascript là ngôn ngữ lập trình bất đồng bộ cho nên đoạn code trên không cho kết quả mong muốn

Xử lý bài toán bất đồng bộ với ES5
function timChiaKhoa(cb) {
    setTimeout(function () {
        cb('Tim chia khoa thanh cong')
    }, 200)
}

function moCua(kq_buoc_truoc, cb) {
    setTimeout(function () {
        cb(kq_buoc_truoc + 'Mo cua thanh cong')
    }, 200)
}

function datXeVao(kq_buoc_truoc, cb) {
    setTimeout(function () {
        cb(kq_buoc_truoc + 'dat xe thanh cong')
    }, 200)
}


function khoaCua(kq_buoc_truoc, cb) {
    setTimeout(function () {
        cb(kq_buoc_truoc + 'khoa cua thanh cong')
    }, 200)
}


function xepXe(kq_buoc_truoc, cb) {
    setTimeout(function () {
        cb(kq_buoc_truoc + 'Xe xe thanh cong')
    }, 200)
}


function process(cb) {
    timChiaKhoa(function(kqChiaKhoa) {
        moCua(kqChiaKhoa, function (kqMoCua) {
            datXeVao(kqMoCua, function (kqDatXeVao) {
                khoaCua(kqDatXeVao,function (kqKhoaCua) {
                    xepXe(kqKhoaCua, function (kqXepXe) {
                        cb(kqXepXe);
                    })
                })
            })
        })
    });
}

process(function (kq_mong_muon) {
    console.log(kq_mong_muon)
})

Kết quả được như mong muốn nhưng code nhìn khó hiểu.

Xử lý bài toán bất đồng bộ với ES6
function timChiaKhoa() {
    return new Promise((resolve) => {
        setTimeout(resolve('Tim chi khoa thanh cong'), 200);
    })
}

function moCua(kq_truoc) {
    return new Promise((resolve) => {
        setTimeout(resolve(kq_truoc + 'Mo cua thanh cong'), 200);
    })
}

function datXeVao(kq_truoc) {
    return new Promise((resolve) => {
        setTimeout(resolve(kq_truoc + 'Dat xe vao trong'), 200);
    })
}


function khoaCua(kq_truoc) {
    return new Promise((resolve) => {
        setTimeout(resolve(kq_truoc + 'Khoa cua thanh cong'), 200);
    })
}

function xepXe(kq_truoc) {
    return new Promise((resolve) => {
        setTimeout(resolve(kq_truoc + 'Dat xe thanh cong'), 200);
    })
}


function process() {
    timChiaKhoa().then((kq1) => {
        moCua(kq1).then((kq2) => {
            datXeVao(kq2).then((kq3) => {
                khoaCua(kq3).then((kq4) => {
                    xepXe(kq4).then((kq5) => {
                        console.log(kq5)
                    })
                })
            })
        })
    })


}

process()

Với sự có mặt của Promise thì nhìn code có vẻ dễ hiểu hơn chút

Xử lý bài toán bất đồng bộ với ES7

function timChiaKhoa() {
    return new Promise((resolve) => {
        setTimeout(resolve('Tim chi khoa thanh cong'), 200);
    })
}

function moCua(kq_truoc) {
    return new Promise((resolve) => {
        setTimeout(resolve(kq_truoc + 'Mo cua thanh cong'), 200);
    })
}

function datXeVao(kq_truoc) {
    return new Promise((resolve) => {
        setTimeout(resolve(kq_truoc + 'Dat xe vao trong'), 200);
    })
}


function khoaCua(kq_truoc) {
    return new Promise((resolve) => {
        setTimeout(resolve(kq_truoc + 'Khoa cua thanh cong'), 200);
    })
}

function xepXe(kq_truoc) {
    return new Promise((resolve) => {
        setTimeout(resolve(kq_truoc + 'Dat xe thanh cong'), 200);
    })
}


async function process() {
    let getChiaKhoa = await timChiaKhoa();
    let getMoCua = await moCua(getChiaKhoa)
    let getXeVao = await datXeVao(getMoCua)
    let getKhoaCua = await khoaCua(getXeVao)
    let getXepXe = await xepXe(getKhoaCua)
    console.log(getXepXe)

}

// Goi ra la co kq
process()

OK!

Kết quả đều là

+4