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

2024-08-25 12:44
文章标签 操作 异步 控制 执行 顺序 async await 谈谈

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

async/await 是 JavaScript 中用于处理异步操作的一种语法糖，它使得异步代码的编写、阅读和维护变得更加容易和直观。async 和 await 关键字是在 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/await与fs.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函数内部使用，因此我们将文件读取逻辑封装在了一个名为readFileConcatenate的async函数中。这种方式使得代码更加清晰和易于维护，同时避免了回调地狱的问题。

如果你正在使用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版本中使用。

要使用async和await来确保fun1、fun2、fun3这三个方法按顺序调用，并且每个方法内部都执行一个异步的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();

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

运行这段代码，你会看到控制台按顺序输出了fun1、fun2和fun3的执行结果，每个之间大约间隔1秒（由setTimeout设置）。

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


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

相关文章

Spring Security 基于表达式的权限控制

Spring Security 基于表达式的权限控制

前言 spring security 3.0已经可以使用spring el表达式来控制授权，允许在表达式中使用复杂的布尔逻辑来控制访问的权限。 常见的表达式 Spring Security可用表达式对象的基类是SecurityExpressionRoot。 表达式描述hasRole([role])用户拥有制定的角色时返回true （Spring security默认会带有ROLE_前缀）,去
阅读更多...
maven 编译构建可以执行的jar包

maven 编译构建可以执行的jar包

💝💝💝欢迎莅临我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。 推荐：「stormsha的主页」👈，「stormsha的知识库」👈持续学习，不断总结，共同进步，为了踏实，做好当下事儿~ 专栏导航 Python系列: Python面试题合集，剑指大厂Git系列: Git操作技巧GO
阅读更多...
顺序表之创建，判满，插入，输出

顺序表之创建，判满，插入，输出

文章目录 🍊自我介绍🍊创建一个空的顺序表，为结构体在堆区分配空间🍊插入数据🍊输出数据🍊判断顺序表是否满了，满了返回值1，否则返回0🍊main函数 你的点赞评论就是对博主最大的鼓励 当然喜欢的小伙伴可以：点赞+关注+评论+收藏（一键四连）哦~ 🍊自我介绍   Hello,大家好，我是小珑也要变强（也是小珑），我是易编程·终身成长社群的一名“创始团队·嘉宾”
阅读更多...
js异步提交form表单的解决方案

js异步提交form表单的解决方案

1.定义异步提交表单的方法 （通用方法） /*** 异步提交form表单* @param options {form:form表单元素,success:执行成功后处理函数}* <span style="color:#ff0000;"><strong>@注意 后台接收参数要解码否则中文会导致乱码 如：URLDecoder.decode(param,"UTF-8")</strong></span>
阅读更多...
动手学深度学习【数据操作+数据预处理】

动手学深度学习【数据操作+数据预处理】

import osos.makedirs(os.path.join('.', 'data'), exist_ok=True)data_file = os.path.join('.', 'data', 'house_tiny.csv')with open(data_file, 'w') as f:f.write('NumRooms,Alley,Price\n') # 列名f.write('NA
阅读更多...
jenkins 插件执行shell命令时，提示“Command not found”处理方法

jenkins 插件执行shell命令时，提示“Command not found”处理方法

首先提示找不到“Command not found，可能我们第一反应是查看目标机器是否已支持该命令，不过如果相信能找到这里来的朋友估计遇到的跟我一样，其实目标机器是没有问题的通过一些远程工具执行shell命令是可以执行。奇怪的就是通过jenkinsSSH插件无法执行，经一番折腾各种搜索发现是jenkins没有加载/etc/profile导致。 【解决办法】： 需要在jenkins调用shell脚
阅读更多...
线程的四种操作

线程的四种操作

所属专栏：Java学习        1. 线程的开启 start和run的区别： run：描述了线程要执行的任务，也可以称为线程的入口 start：调用系统函数，真正的在系统内核中创建线程（创建PCB，加入到链表中），此处的start会根据不同的系统，分别调用不同的api，创建好之后的线程，再单独去执行run（所以说，start的本质是调用系统api，系统的api
阅读更多...
控制反转 的种类

控制反转 的种类

之前对控制反转的定义和解释都不是很清晰。最近翻书发现在《Pro Spring 5》（免费电子版在文章最后）有一段非常不错的解释。记录一下，有道翻译贴出来方便查看。如有请直接跳过中文，看后面的原文。 控制反转的类型 控制反转的类型您可能想知道为什么有两种类型的IoC，以及为什么这些类型被进一步划分为不同的实现。这个问题似乎没有明确的答案;当然，不同的类型提供了一定程度的灵活性，但
阅读更多...
Java IO 操作——个人理解

Java IO 操作——个人理解

之前一直Java的IO操作一知半解。今天看到一个便文章觉得很有道理（ 原文章），记录一下。 首先，理解Java的IO操作到底操作的什么内容，过程又是怎么样子。          数据来源的操作： 来源有文件，网络数据。使用File类和Sockets等。这里操作的是数据本身，1,0结构。    File file = new File("path");   字
阅读更多...
web群集--nginx配置文件location匹配符的优先级顺序详解及验证

web群集--nginx配置文件location匹配符的优先级顺序详解及验证

文章目录 前言优先级顺序优先级顺序(详解)1. 精确匹配（Exact Match）2. 正则表达式匹配（Regex Match）3. 前缀匹配（Prefix Match） 匹配规则的综合应用验证优先级 前言 location的作用 在 NGINX 中，location 指令用于定义如何处理特定的请求 URI。由于网站往往需要不同的处理方式来适应各种请求，NGINX 提供了多种匹
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2