JS async 和 await

Source: Dev.to

什么是 async 和 await？

• async 和 await 用于以更简洁的方式处理异步操作。

为什么需要异步代码？

• JavaScript 是单线程的——一次只能做一件事。许多真实场景的任务（从服务器获取数据、读取文件、等待计时器）都需要时间。如果 JS 在每个任务完成之前都停下来等待，浏览器就会卡死，变得无响应。
• 异步编程允许 JS 启动一个慢任务，继续执行其他代码，然后在结果准备好时再处理——不会阻塞主线程。

典型使用场景

• 从 API 获取数据（网络请求）
• 读取/写入文件（Node.js）
• setTimeout / setInterval（计时器）
• 数据库查询

演进过程： 回调 → Promise → Async/Await

回调（旧方式）

setTimeout(() => {
    console.log("Prepping");
    setTimeout(() => {
        console.log("Cooking");
        setTimeout(() => {
            console.log("Eating");
        }, 3000);
    }, 5000);
}, 1000);

prepping();

Promise（更好）

function prepping() {
    return new Promise((resolve, reject) =>
        setTimeout(() => resolve("Prepping"), 1000)
    );
}
function cooking() {
    return new Promise((resolve, reject) =>
        setTimeout(() => resolve("Cooking"), 5000)
    );
}
function eating() {
    return new Promise((resolve, reject) =>
        setTimeout(() => resolve("Eating"), 3000)
    );
}

prepping()
    .then(response => {
        console.log(response);
        return cooking();
    })
    .then(response => {
        console.log(response);
        return eating();
    })
    .then(response => console.log(response));

async/await（现代且最简洁）

function prepping() {
    return new Promise((resolve, reject) =>
        setTimeout(() => resolve("Prepping"), 1000)
    );
}
function cooking() {
    return new Promise((resolve, reject) =>
        setTimeout(() => resolve("Cooking"), 5000)
    );
}
function eating() {
    return new Promise((resolve, reject) =>
        setTimeout(() => resolve("Eating"), 3000)
    );
}

async function asynfunction() {
    const prep = await prepping();
    console.log(prep);
    const cook = await cooking();
    console.log(cook);
    const eat = await eating();
    console.log(eat);
}

asynfunction();

语法规则

• async 关键字放在函数声明或表达式之前。
• 它会让函数始终返回一个 Promise，即使返回的是普通值。
• await 只能在 async 函数内部使用。

async function greet() {
    return "Hello";
}

console.log(greet()); // Promise { : 'Hello' }
greet().then(response => console.log(response)); // Hello