请你谈谈:async与await是如何控制异步操作的执行顺序

2024-08-25 12:44

本文主要是介绍请你谈谈:async与await是如何控制异步操作的执行顺序,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

async/await 是 JavaScript 中用于处理异步操作的一种语法糖,它使得异步代码的编写、阅读和维护变得更加容易和直观。asyncawait 关键字是在 ES2017(ES8)中引入的,旨在简化基于 Promise 的异步操作。

1 async

  • async 是一个函数声明的前缀,用于指定一个函数是异步的(promise.then等回调)。这意味着函数内部可能包含异步操作,如网络请求、文件读取等。
  • 当你将一个函数声明为 async 时,该函数会自动返回一个 Promise。如果函数正常结束(即没有显式返回 Promise 或其他值),它将返回一个解析为 undefined 的 Promise。如果函数通过 return 语句返回了一个值,那么返回的 Promise 将被解析为该值。如果函数内部抛出了异常,返回的 Promise 将被拒绝(rejected),异常值作为拒绝的原因。

当然可以,以下是分别举例说明这三种情况的代码:

1. 函数正常结束,没有显式返回 Promise 或其他值
async function asyncFunctionWithoutReturn() {// 函数体内执行一些操作,但不显式返回任何值console.log('函数执行了,但没有返回值');// 由于没有显式返回,所以函数将隐式返回一个解析为 undefined 的 Promise
}let promise = asyncFunctionWithoutReturn()
promise.then(result => {console.log(result); // 输出:undefined
}).catch(error => {console.error(error); // 这里不会被调用,因为没有抛出异常
});
2. 函数通过 return 语句返回了一个值
async function asyncFunctionWithReturnValue() {// 函数体内执行一些操作,并通过 return 语句返回一个值console.log('函数执行了,并返回了一个值');return 'Hello, async!';// 由于有显式返回,所以函数将返回一个解析为 'Hello, async!' 的 Promise
}let promise = asyncFunctionWithReturnValue()
promise.then(result => {console.log(result); // 输出:Hello, async!
}).catch(error => {console.error(error); // 这里不会被调用,因为没有抛出异常
});
3. 函数内部抛出了异常
async function asyncFunctionThrowsError() {// 函数体内执行一些操作,并抛出一个异常console.log('函数执行中...');throw new Error('出错了!');// 由于抛出了异常,所以函数将返回一个被拒绝的 Promise,异常值作为拒绝的原因
}
let promise = asyncFunctionThrowsError()
promise.then(result => {// 这里不会被调用,因为 Promise 被拒绝了console.log(result);
}).catch(error => {console.error(error.message); // 输出:Error: 出错了!// 捕获到异常,并可以在这里处理它
});

在这三个例子中,我们分别展示了当一个函数被声明为 async 时,它如何根据函数体内的不同情况自动返回一个 Promise。第一个例子展示了没有显式返回任何值时的情况,第二个例子展示了通过 return 语句返回一个值的情况,第三个例子展示了函数内部抛出异常时的情况。这些例子清楚地说明了 async 函数如何处理其返回值和异常。

2 await

await 关键字是 JavaScript 中处理异步操作的一个非常强大的工具,但它确实有一些限制和使用场景:

  1. 只能在 async 函数内部使用await 只能在被 async 关键字声明的函数或方法内部使用。这意味着你不能在普通的同步函数或全局作用域中使用 await

  2. 等待 Promise 完成await 会暂停 async 函数的执行,直到它等待的 Promise 被解决(fulfilled)或拒绝(rejected)。这使得你可以以类似于同步代码的方式来编写异步逻辑。

  3. 返回 Promise 解决的结果:当 await 等待的 Promise 被解决时,await 表达式会返回 Promise 解决的值。这个值可以被赋给变量,或者用于进一步的计算。

  4. 异常处理:如果 await 等待的 Promise 被拒绝,那么 await 表达式会抛出一个异常。这个异常可以被 async 函数内部的 try...catch 语句捕获,就像处理同步代码中的异常一样。

  5. 提升代码可读性:使用 async/await 可以使异步代码更加清晰和易于理解,因为它允许你以更接近同步代码的方式来编写和执行异步逻辑。

  6. 不阻塞主线程:尽管 await 会暂停 async 函数的执行,但它不会阻塞整个 JavaScript 运行时或主线程。JavaScript 运行时可以继续执行其他任务,如事件处理、定时器回调等,直到等待的 Promise 完成。

在 JavaScript 中,await 关键字用于等待一个 Promise 完成,并且它只能在 async 函数内部使用。await 的行为取决于它右侧的表达式:

  1. 如果表达式是 Promise 对象

    • await 会暂停 async 函数的执行,直到该 Promise 被解决(fulfilled)或拒绝(rejected)。
    • 如果 Promise 被成功解决,await 会返回解决的值。
      在这里插入图片描述 - 如果 Promise 被拒绝,await 会抛出一个异常,这个异常可以通过 try...catch 结构来捕获和处理。在这里插入图片描述
  2. 如果表达式不是 Promise 对象

    • await 会立即返回该表达式的值,而不会等待任何异步操作完成。这是因为非 Promise 类型的值被视为已经解决的 Promise(即其值已经可用)。

3 async与await结合实践

当然,下面是一个典型的回调地狱(Callback Hell)的例子,这个例子通常出现在处理多个异步操作并且每个操作的结果都是下一个操作所需的输入时。我们将使用Node.js的fs模块来模拟文件读取操作,尽管在Node.js v10及更高版本中,推荐使用fs.promises API或util.promisify来避免回调地狱。

回调地狱的例子

假设我们需要按顺序读取三个文件,并将它们的内容拼接起来。使用传统的回调方式,代码可能会像这样:

const fs = require('fs');fs.readFile('file1.txt', 'utf8', (err, data1) => {if (err) throw err;fs.readFile('file2.txt', 'utf8', (err, data2) => {if (err) throw err;fs.readFile('file3.txt', 'utf8', (err, data3) => {if (err) throw err;console.log(data1 + data2 + data3);});});
});

为了解决这个问题,我们可以使用async/awaitfs.promises API(或在较旧版本的Node.js中使用util.promisify转换的fs.readFile)。下面是使用fs.promises API的示例:

const fs = require('fs').promises;async function readFileConcatenate() {try {const data1 = await fs.readFile('file1.txt', 'utf8');const data2 = await fs.readFile('file2.txt', 'utf8');const data3 = await fs.readFile('file3.txt', 'utf8');console.log(data1 + data2 + data3);} catch (error) {console.error('Error reading file:', error);}
}// 调用函数
readFileConcatenate();

在这个async函数中,我们使用了await来等待每个fs.readFile调用的结果。由于await只能在async函数内部使用,因此我们将文件读取逻辑封装在了一个名为readFileConcatenateasync函数中。这种方式使得代码更加清晰和易于维护,同时避免了回调地狱的问题。

如果你正在使用Node.js的较旧版本,并且fs模块没有内置的promises API,你可以使用util.promisify来转换fs.readFile

const fs = require('fs');
const util = require('util');// 转换fs.readFile为返回Promise的函数
const readFile = util.promisify(fs.readFile);async function readFileConcatenate() {try {const data1 = await readFile('file1.txt', 'utf8');const data2 = await readFile('file2.txt', 'utf8');const data3 = await readFile('file3.txt', 'utf8');console.log(data1 + data2 + data3);} catch (error) {console.error('Error reading file:', error);}
}// 调用函数
readFileConcatenate();

这种方式同样有效,并且可以在不支持fs.promises API的Node.js版本中使用。

要使用asyncawait来确保fun1fun2fun3这三个方法按顺序调用,并且每个方法内部都执行一个异步的AJAX请求,你可以首先确保这三个方法都返回Promise。然后,在另一个方法中,你可以使用await来等待每个方法完成后再继续执行下一个。

以下是一个简单的示例,展示了如何实现这一点:

// 假设我们使用fetch API来模拟AJAX请求(你也可以使用XMLHttpRequest或其他库)// fun1 方法,返回一个Promise
function fun1() {return new Promise((resolve, reject) => {// 模拟异步请求setTimeout(() => {console.log('fun1 执行完毕');resolve('fun1的结果');}, 1000); // 假设请求耗时1秒});
}// fun2 方法,同样返回一个Promise
function fun2() {return new Promise((resolve, reject) => {// 模拟异步请求setTimeout(() => {console.log('fun2 执行完毕');resolve('fun2的结果');}, 1000); // 假设请求耗时1秒});
}// fun3 方法,也返回一个Promise
function fun3() {return new Promise((resolve, reject) => {// 模拟异步请求setTimeout(() => {console.log('fun3 执行完毕');resolve('fun3的结果');}, 1000); // 假设请求耗时1秒});
}// 调用这三个方法的函数,使用async和await来确保顺序执行
async function executeFunctionsInOrder() {try {const result1 = await fun1(); // 等待fun1完成console.log('fun1的返回结果:', result1);const result2 = await fun2(); // 等待fun2完成console.log('fun2的返回结果:', result2);const result3 = await fun3(); // 等待fun3完成console.log('fun3的返回结果:', result3);} catch (error) {// 如果有任何一个函数出错,这里会捕获到错误console.error('执行过程中发生错误:', error);}
}// 调用函数
executeFunctionsInOrder();

在这个例子中,fun1fun2fun3都使用了setTimeout来模拟异步操作(例如AJAX请求)。每个函数都返回一个Promise,该Promise在异步操作完成后被解决(resolve)。在executeFunctionsInOrder函数中,我们使用了async关键字来标记该函数为异步函数,这样我们就可以在函数体内使用await来等待每个异步操作的完成。注意,await只能用在async函数内部。

运行这段代码,你会看到控制台按顺序输出了fun1fun2fun3的执行结果,每个之间大约间隔1秒(由setTimeout设置)。

这篇关于请你谈谈:async与await是如何控制异步操作的执行顺序的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1105588

相关文章

C# WinForms存储过程操作数据库的实例讲解

《C#WinForms存储过程操作数据库的实例讲解》:本文主要介绍C#WinForms存储过程操作数据库的实例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、存储过程基础二、C# 调用流程1. 数据库连接配置2. 执行存储过程(增删改)3. 查询数据三、事务处

Java使用Curator进行ZooKeeper操作的详细教程

《Java使用Curator进行ZooKeeper操作的详细教程》ApacheCurator是一个基于ZooKeeper的Java客户端库,它极大地简化了使用ZooKeeper的开发工作,在分布式系统... 目录1、简述2、核心功能2.1 CuratorFramework2.2 Recipes3、示例实践3

Java利用JSONPath操作JSON数据的技术指南

《Java利用JSONPath操作JSON数据的技术指南》JSONPath是一种强大的工具,用于查询和操作JSON数据,类似于SQL的语法,它为处理复杂的JSON数据结构提供了简单且高效... 目录1、简述2、什么是 jsONPath?3、Java 示例3.1 基本查询3.2 过滤查询3.3 递归搜索3.4

Python 中的异步与同步深度解析(实践记录)

《Python中的异步与同步深度解析(实践记录)》在Python编程世界里,异步和同步的概念是理解程序执行流程和性能优化的关键,这篇文章将带你深入了解它们的差异,以及阻塞和非阻塞的特性,同时通过实际... 目录python中的异步与同步:深度解析与实践异步与同步的定义异步同步阻塞与非阻塞的概念阻塞非阻塞同步

Spring定时任务只执行一次的原因分析与解决方案

《Spring定时任务只执行一次的原因分析与解决方案》在使用Spring的@Scheduled定时任务时,你是否遇到过任务只执行一次,后续不再触发的情况?这种情况可能由多种原因导致,如未启用调度、线程... 目录1. 问题背景2. Spring定时任务的基本用法3. 为什么定时任务只执行一次?3.1 未启用

Java 中实现异步的多种方式

《Java中实现异步的多种方式》文章介绍了Java中实现异步处理的几种常见方式,每种方式都有其特点和适用场景,通过选择合适的异步处理方式,可以提高程序的性能和可维护性,感兴趣的朋友一起看看吧... 目录1. 线程池(ExecutorService)2. CompletableFuture3. ForkJoi

Python使用DrissionPage中ChromiumPage进行自动化网页操作

《Python使用DrissionPage中ChromiumPage进行自动化网页操作》DrissionPage作为一款轻量级且功能强大的浏览器自动化库,为开发者提供了丰富的功能支持,本文将使用Dri... 目录前言一、ChromiumPage基础操作1.初始化Drission 和 ChromiumPage

利用Go语言开发文件操作工具轻松处理所有文件

《利用Go语言开发文件操作工具轻松处理所有文件》在后端开发中,文件操作是一个非常常见但又容易出错的场景,本文小编要向大家介绍一个强大的Go语言文件操作工具库,它能帮你轻松处理各种文件操作场景... 目录为什么需要这个工具?核心功能详解1. 文件/目录存javascript在性检查2. 批量创建目录3. 文件

Python异步编程中asyncio.gather的并发控制详解

《Python异步编程中asyncio.gather的并发控制详解》在Python异步编程生态中,asyncio.gather是并发任务调度的核心工具,本文将通过实际场景和代码示例,展示如何结合信号量... 目录一、asyncio.gather的原始行为解析二、信号量控制法:给并发装上"节流阀"三、进阶控制

Redis中管道操作pipeline的实现

《Redis中管道操作pipeline的实现》RedisPipeline是一种优化客户端与服务器通信的技术,通过批量发送和接收命令减少网络往返次数,提高命令执行效率,本文就来介绍一下Redis中管道操... 目录什么是pipeline场景一:我要向Redis新增大批量的数据分批处理事务( MULTI/EXE