MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

JavaScript async和await在异步操作中的应用

2024-04-307.3k 阅读

JavaScript 异步编程简介

在深入探讨 async 和 await 之前，先来回顾一下 JavaScript 异步编程的基础。JavaScript 是单线程语言，这意味着它在同一时间只能执行一个任务。然而，在处理 I/O 操作（如网络请求、文件读取等）时，等待操作完成会阻塞线程，导致用户界面无响应。为了解决这个问题，JavaScript 引入了异步编程模型。

回调函数

回调函数是 JavaScript 中实现异步操作的最基本方式。当一个异步操作完成时，会调用事先传入的回调函数。例如，使用 setTimeout 模拟一个异步操作：

setTimeout(() => {
    console.log('异步操作完成');
}, 1000);

在这个例子中，setTimeout 会在 1000 毫秒（1 秒）后调用传入的回调函数。

在处理更复杂的异步操作，比如读取文件或发起网络请求时，回调函数同样被广泛使用。以 Node.js 中的文件读取为例：

const fs = require('fs');
fs.readFile('example.txt', 'utf8', (err, data) => {
    if (err) {
        console.error('读取文件出错:', err);
    } else {
        console.log('文件内容:', data);
    }
});

这里 fs.readFile 是一个异步操作，它接收文件名、编码格式以及一个回调函数。当文件读取完成后，会调用回调函数，并将错误（如果有）和读取到的数据作为参数传入。

回调地狱

随着异步操作的嵌套增多，代码会变得难以阅读和维护，这就是所谓的“回调地狱”。例如，假设我们有一系列的异步操作，每个操作依赖前一个操作的结果：

asyncOperation1((result1) => {
    asyncOperation2(result1, (result2) => {
        asyncOperation3(result2, (result3) => {
            asyncOperation4(result3, (result4) => {
                // 处理最终结果
            });
        });
    });
});

这种层层嵌套的代码不仅难以理解，而且修改和调试都很困难。为了解决回调地狱的问题，Promise 应运而生。

Promise

Promise 是 JavaScript 中处理异步操作的一种更优雅的方式。它代表一个异步操作的最终完成（或失败）及其结果值。

Promise 的基本使用

创建一个 Promise 实例时，需要传入一个执行器函数，该函数接收 resolve 和 reject 两个参数。resolve 用于将 Promise 的状态从“进行中”变为“已完成”，并传递操作成功的结果；reject 用于将 Promise 的状态从“进行中”变为“已失败”，并传递错误信息。

以下是一个简单的 Promise 示例，模拟一个异步的加法操作：

function addAsync(a, b) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (typeof a!== 'number' || typeof b!== 'number') {
                reject(new Error('参数必须是数字'));
            } else {
                resolve(a + b);
            }
        }, 1000);
    });
}

addAsync(2, 3)
   .then(result => {
        console.log('加法结果:', result);
    })
   .catch(error => {
        console.error('操作出错:', error);
    });

在这个例子中，addAsync 函数返回一个 Promise。setTimeout 模拟了一个异步操作，1 秒后根据参数类型决定是调用 resolve 还是 reject。then 方法用于处理 Promise 成功的情况，catch 方法用于处理 Promise 失败的情况。

Promise 的链式调用

Promise 的一个强大特性是可以进行链式调用，这使得多个异步操作可以按照顺序执行，而不会出现回调地狱的问题。例如，假设有三个异步操作，每个操作依赖前一个操作的结果：

function asyncOperation1() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('操作 1 结果');
        }, 1000);
    });
}

function asyncOperation2(result1) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(result1 +'-> 操作 2 结果');
        }, 1000);
    });
}

function asyncOperation3(result2) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(result2 +'-> 操作 3 结果');
        }, 1000);
    });
}

asyncOperation1()
   .then(result1 => asyncOperation2(result1))
   .then(result2 => asyncOperation3(result2))
   .then(finalResult => {
        console.log(finalResult);
    });

在这个链式调用中，每个 then 方法返回的新 Promise 会被下一个 then 方法接收并处理，这样就可以按顺序执行多个异步操作。

async 和 await

async 和 await 是 ES2017 引入的语法糖，它们建立在 Promise 的基础之上，使得异步代码看起来更像同步代码，进一步简化了异步操作的处理。

async 函数

async 函数是一种异步函数，它返回一个 Promise 对象。如果 async 函数的返回值不是一个 Promise，JavaScript 会自动将其包装成一个已解决状态的 Promise。

以下是一个简单的 async 函数示例：

async function hello() {
    return 'Hello, World!';
}

hello().then(result => {
    console.log(result);
});

在这个例子中，hello 是一个 async 函数，它返回一个字符串。JavaScript 会自动将这个字符串包装成一个已解决状态的 Promise，then 方法可以获取到这个返回值。

await 关键字

await 关键字只能在 async 函数内部使用。它用于暂停 async 函数的执行，直到其等待的 Promise 被解决（resolved）或被拒绝（rejected）。当 Promise 被解决时，await 会返回 Promise 的解决值；当 Promise 被拒绝时，await 会抛出错误。

以下是使用 await 的示例，结合前面的 addAsync 函数：

async function main() {
    try {
        const result = await addAsync(2, 3);
        console.log('加法结果:', result);
    } catch (error) {
        console.error('操作出错:', error);
    }
}

main();

在 main 函数中，await addAsync(2, 3) 会暂停 main 函数的执行，直到 addAsync 返回的 Promise 被解决或被拒绝。如果 Promise 被解决，await 会返回解决值并赋值给 result；如果 Promise 被拒绝，await 会抛出错误，被 catch 块捕获。

多个异步操作的顺序执行

使用 async 和 await 可以很方便地按顺序执行多个异步操作。例如，结合前面的 asyncOperation1、asyncOperation2 和 asyncOperation3 函数：

async function executeOperations() {
    const result1 = await asyncOperation1();
    const result2 = await asyncOperation2(result1);
    const finalResult = await asyncOperation3(result2);
    console.log(finalResult);
}

executeOperations();

在 executeOperations 函数中，通过 await 依次等待每个异步操作完成，代码看起来就像同步执行一样，非常清晰易懂。

多个异步操作的并行执行

有时候，我们希望多个异步操作并行执行，以提高效率。可以使用 Promise.all 结合 async 和 await 来实现。Promise.all 接收一个 Promise 数组，当所有的 Promise 都被解决时，它返回一个新的 Promise，其解决值是一个包含所有输入 Promise 解决值的数组。

以下是一个示例，假设有两个异步操作 asyncOperationA 和 asyncOperationB：

function asyncOperationA() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('操作 A 结果');
        }, 2000);
    });
}

function asyncOperationB() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('操作 B 结果');
        }, 1000);
    });
}

async function parallelOperations() {
    const [resultA, resultB] = await Promise.all([asyncOperationA(), asyncOperationB()]);
    console.log('操作 A 结果:', resultA);
    console.log('操作 B 结果:', resultB);
}

parallelOperations();

在 parallelOperations 函数中，Promise.all 接收 asyncOperationA 和 asyncOperationB 返回的 Promise 数组。await 会等待所有的 Promise 都被解决，然后将结果分别赋值给 resultA 和 resultB。这样两个异步操作是并行执行的，总的执行时间取决于耗时最长的操作（这里是 asyncOperationA，2 秒）。

处理异步操作中的错误

在使用 async 和 await 时，处理错误有两种常见的方式。一种是使用 try...catch 块，如前面的例子所示：

async function main() {
    try {
        const result = await addAsync('a', 3);
        console.log('加法结果:', result);
    } catch (error) {
        console.error('操作出错:', error);
    }
}

main();

另一种方式是在 Promise 上直接使用 catch 方法。例如：

async function main() {
    const promise = addAsync('a', 3);
    promise.then(result => {
        console.log('加法结果:', result);
    }).catch(error => {
        console.error('操作出错:', error);
    });
}

main();

这两种方式本质上是类似的，try...catch 块捕获的是 await 抛出的错误，而 catch 方法捕获的是 Promise 被拒绝时的错误。

async 和 await 在实际项目中的应用场景

网络请求

在前端开发中，发起网络请求是非常常见的异步操作。例如，使用 fetch API 发起 HTTP 请求：

async function fetchData() {
    try {
        const response = await fetch('https://example.com/api/data');
        if (!response.ok) {
            throw new Error('网络请求失败:'+ response.statusText);
        }
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('获取数据出错:', error);
    }
}

fetchData().then(data => {
    if (data) {
        console.log('获取到的数据:', data);
    }
});

在这个例子中，fetch 返回一个 Promise，await 等待请求完成并获取响应。然后检查响应状态，如果状态不是 ok，则抛出错误。接着 await 将响应解析为 JSON 数据。

文件操作

在 Node.js 中，进行文件操作时也可以使用 async 和 await 来简化代码。例如，读取一个 JSON 文件并解析其内容：

const fs = require('fs').promises;

async function readJsonFile(filePath) {
    try {
        const data = await fs.readFile(filePath, 'utf8');
        return JSON.parse(data);
    } catch (error) {
        console.error('读取或解析文件出错:', error);
    }
}

readJsonFile('example.json').then(jsonData => {
    if (jsonData) {
        console.log('解析后的 JSON 数据:', jsonData);
    }
});

这里 fs.readFile 的 promises 版本返回一个 Promise，await 等待文件读取完成并获取文件内容，然后将其解析为 JSON 数据。

数据库操作

在与数据库交互时，async 和 await 同样能发挥作用。以使用 mysql2 库进行 MySQL 数据库查询为例：

const mysql = require('mysql2/promise');

async function queryDatabase() {
    try {
        const connection = await mysql.createConnection({
            host: 'localhost',
            user: 'root',
            password: 'password',
            database: 'test'
        });
        const [rows] = await connection.query('SELECT * FROM users');
        await connection.end();
        return rows;
    } catch (error) {
        console.error('数据库查询出错:', error);
    }
}

queryDatabase().then(rows => {
    if (rows) {
        console.log('查询结果:', rows);
    }
});

在这个例子中，mysql.createConnection 和 connection.query 以及 connection.end 都是异步操作，通过 await 可以按顺序执行这些操作，并且在操作出错时能够捕获并处理错误。

性能与优化

虽然 async 和 await 极大地简化了异步代码，但在性能方面也需要注意一些问题。

避免不必要的等待

在一些情况下，不必要的 await 可能会导致性能下降。例如，当多个异步操作之间没有依赖关系时，应该尽量并行执行它们，而不是顺序执行。

async function badPerformance() {
    const result1 = await asyncOperationA();
    const result2 = await asyncOperationB();
    return [result1, result2];
}

async function goodPerformance() {
    const [result1, result2] = await Promise.all([asyncOperationA(), asyncOperationB()]);
    return [result1, result2];
}

在 badPerformance 函数中，asyncOperationB 要等到 asyncOperationA 完成后才开始执行，而在 goodPerformance 函数中，asyncOperationA 和 asyncOperationB 是并行执行的，总的执行时间更短。

错误处理的性能影响

虽然 try...catch 块在处理错误时非常方便，但它也有一定的性能开销。在性能敏感的代码中，应该尽量减少不必要的 try...catch 块。例如，如果可以在 Promise 链中处理错误，就不需要在 async 函数内部使用 try...catch。

async function withUnnecessaryTryCatch() {
    try {
        const result = await addAsync(2, 3);
        return result;
    } catch (error) {
        // 这里的错误可以在调用处处理
        console.error('操作出错:', error);
    }
}

async function withoutUnnecessaryTryCatch() {
    const result = await addAsync(2, 3);
    return result;
}

// 调用处处理错误
withoutUnnecessaryTryCatch().then(result => {
    console.log('结果:', result);
}).catch(error => {
    console.error('操作出错:', error);
});

在 withUnnecessaryTryCatch 函数中，try...catch 块捕获的错误可以在调用处统一处理，这样在 async 函数内部就可以避免不必要的性能开销。

与其他异步编程方式的比较

与回调函数的比较

  • 代码可读性：async 和 await 使异步代码看起来像同步代码，大大提高了代码的可读性。而回调函数在处理多个异步操作时容易出现回调地狱，代码可读性差。
  • 错误处理：async 和 await 可以使用 try...catch 块统一处理错误，更加直观。回调函数需要在每个回调中单独处理错误，代码冗余且容易出错。
  • 维护性：由于 async 和 await 的代码结构更清晰，因此在修改和扩展功能时更加容易维护。回调函数的嵌套结构使得维护成本较高。

与 Promise 的比较

  • 语法简洁性：async 和 await 是基于 Promise 的语法糖，在处理异步操作时语法更加简洁，不需要显式地使用 then 和 catch 方法。
  • 代码执行流程：async 和 await 更符合人类的思维习惯，代码执行流程更接近同步代码，更容易理解。Promise 的链式调用虽然解决了回调地狱问题，但在处理复杂逻辑时，链式调用的代码结构相对较复杂。

总结

async 和 await 是 JavaScript 异步编程中的强大工具，它们基于 Promise 进一步简化了异步代码的编写，提高了代码的可读性和可维护性。通过合理使用 async 和 await，可以在处理网络请求、文件操作、数据库操作等各种异步场景中编写出高效、优雅的代码。同时，在使用过程中需要注意性能优化和错误处理，以确保代码在实际应用中能够稳定、高效地运行。与回调函数和 Promise 相比，async 和 await 在代码可读性、错误处理和维护性等方面都具有明显的优势。掌握 async 和 await 的使用方法，对于 JavaScript 开发者来说是非常重要的技能提升。无论是前端开发还是后端开发，async 和 await 都在各种项目中有着广泛的应用，能够帮助开发者更好地处理异步操作，提升用户体验和系统性能。在实际项目中，根据具体的需求和场景，灵活运用 async 和 await，结合其他异步编程技术，能够编写出高质量的 JavaScript 代码。