JavaScript · ES2017

ES8 Interactive Hub — ECMAScript 2017

Game-changer cho async code: async/await chính thức kết thúc kỷ nguyên callback. Plus Object.entries/values, String.padStart/padEnd.

Kinh Nghiệm

0 XP

Hoàn thành khóa học0%

async / await

Chuyên đề cốt lõi

Khó12 phút

💡 Khái niệm tóm tắt

Cú pháp đường (syntactic sugar) bao bọc Promise, giúp viết code bất đồng bộ trông và đọc như đồng bộ.

🤔 Tại sao cần tính năng này?

Promise giải quyết callback hell nhưng vẫn rườm rà với chuỗi .then(). async/await cho phép viết code async theo phong cách tuần tự, dễ debug, dễ try/catch giống code đồng bộ.

Trước (cách viết cũ)Verbose / Cồng kềnh

// Chuỗi Promise truyền thống (ES6)
function fetchUser(id) {
    return fetch('/api/users/' + id)
        .then(function(res) {
            if (!res.ok) throw new Error('Not found');
            return res.json();
        })
        .then(function(user) {
            return fetch('/api/posts?user=' + user.id);
        })
        .then(function(res) { return res.json(); })
        .catch(function(err) { console.error(err); });
}

ES8 (Hiện đại)Tối ưu & Khuyên dùng

// async / await ES8 — đọc tự nhiên như đồng bộ
async function fetchUser(id) {
    try {
        const res = await fetch(`/api/users/${id}`);
        if (!res.ok) throw new Error('Not found');
        const user = await res.json();
        const postsRes = await fetch(`/api/posts?user=${user.id}`);
        return await postsRes.json();
    } catch (err) {
        console.error(err);
    }
}

Bạn đã nắm chắc? Thử chạy code thật hoặc làm trắc nghiệm!

Bảng Tra Cứu Nhanh ES8

Xem nhanh cấu trúc + copy snippet

async / await

Cú pháp đường (syntactic sugar) bao bọc Promise, giúp viết code bất đồng bộ trông và đọc như đồng bộ.

async function fetchUser(id) {
    try {
        const res = await fetch(`/api/users/${id}`);
...

Object.entries() & Object.values()

Hai phương thức tĩnh giúp lấy ra mảng các cặp [key, value] hoặc mảng các value từ một object.

const user = { name: "Lan", age: 25, city: "HCM" };
Object.entries(user).forEach(([key, value]) => {
    console.log(`${key}: ${value}`);
...

String padStart / padEnd

Hai phương thức bổ sung thêm ký tự ở đầu hoặc cuối chuỗi cho đến khi đạt độ dài mong muốn.

console.log('5'.padStart(3, '0'));   // '005'
console.log('42'.padStart(6, '*'));  // '****42'
console.log('42'.padEnd(6, '.'));    // '42....'
...