async/await

最新推荐文章于 2025-04-26 18:23:02 发布
原创 最新推荐文章于 2025-04-26 18:23:02 发布 · 382 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

async

作为一个关键字放在函数的前面，表示该函数是一个异步函数，意味着该函数的执行不会阻塞后面代码的执行 异步函数的调用跟普通函数一样

在这里插入图片描述

可以看出执行顺序还是函数先执行，但是函数的返回结果是一个Promise对象，要获取Promise的返回值应该用then方法

在这里插入图片描述

此时先输出的就是后面的一串文字，说明异步函数的执行没有阻塞后面的代码执行，async的内部实现原理就是如果该函数中有一个返回值，当调用该函数时，默认会在内部调用Promise.solve() 方法把它转化成一个Promise 对象作为返回，若函数内部抛出错误，则调用Promise.reject()返回一个Promise 对象

在这里插入图片描述
既然async返回的是一个Promise 对象，那么Promise 的所有用法他都可以用，如Promise.catch捕获异常等

await
await即等待，用于等待一个Promise对象。它只能在异步函数 async function中使用，否则会报错

它的返回值不是Promise对象而是Promise对象处理之后的结果

await

表达式会暂停当前 async function的执行，等待Promise 处理完成。若 Promise 正常处理(fulfilled)，其回调的resolve函数参数作为 await 表达式的值，继续执行 async function，若 Promise 处理异常(rejected)，await 表达式会把 Promise 的异常原因抛出。​如果 await 操作符后的表达式的值不是一个 Promise，那么该值将被转换为一个已正常处理的 Promise。

与Promise对比

1、不再需要多层.then方法

假设一个业务分很多步骤完成，并且每个步骤都是异步，依赖上一个步骤的结果。

在这里插入图片描述

在这里插入图片描述

2、可以对Promise进行并行处理

Matildan
关注
Promise与async/await
yuren_xia的博客
01-19 1633
Promise和是JavaScript中处理异步操作的两种重要方式。
async 函数
cjx1259972299的博客
12-29 802
async，Generator 函数的语法糖。 async 函数就是将 Generator 函数的星号(*)替换成了 async，将 yield 替换成了 await。
ajax async和cache 参数
热门推荐
world_the_begin的博客
07-06 1万+
$.ajax({                         type:"POST",                         async:false,                         cache:false,                         url:webapp+"/appsoftwaredown/appSoftwareDown/fetchSo
react this.setState接收参数 。写成Promise形式。以及async/await和Promise的区别
lzfengquan的博客
07-28 973
同步编程通常来说易于调试和维护，然而，。。“Promises”渐渐成为JavaScript里最重要的一部分，大量的新API都开始promise原理实现。
AJAX初识+async参数的简单使用
J1ANZ
10-18 1264
AJAX初识+async参数的简单使用
async/await函数
ydeway的博客
09-13 1931
基本概念   将async和await看作命令   async/await就是generator函数的语法糖，但对generator函数有部分改进： generator函数执行时返回的是一个Iterator对象，而async/await立即返回一个Promise对象，相当于能够将函数内部的多个异步操作封装成为一个Promise对象。 async/await内部自带执行器，也就是调用后会自动执行，...
详解小程序原生使用ES7 async/await语法
10-18
小程序原生使用ES7 async/await语法是现代JavaScript异步编程的简洁语法糖，它能够使异步代码的书写更加直观和易于理解。async/await是基于Promise的一种语法，可以让异步操作以同步的方式书写，提高代码的可读性...
C#关键字async/await用法
12-23
经过一番的探索，终于搞清楚关键字async/await 在.net4.5之后可用的巧妙之处，在这里记录一下也与大家分享一下个人的心得体会 async：异步执行 await：异步执行中的等待其执行完(最大的优点是它是后台等待，因此不...
Swift 并发编程：Async/Await 特性的使用与场景分析
数字魔方操控师的博客
04-26 1125
Swift 的 Async/Await 特性为开发者提供了一种强大而直观的异步编程方式，极大地改善了异步代码的可读性和可维护性。通过在网络请求、文件读写、数据库操作、多任务并发执行以及与 UI 交互等多种场景中的应用，可以看到 Async/Await 能够有效地简化异步逻辑，提高开发效率。然而，在使用 Async/Await 特性时，开发者也需要注意线程安全、任务取消和性能等方面的问题。
精选资源
[微信小程序] 终于可以愉快的使用 async/await 啦
03-29
这篇文章主要是想说一下 怎么在微信小程序中使用async/await从而逃离回调地狱 背景 最近一直在搞微信小程序 用的语言是TypeScript 小程序的api都是回调形式 用起来就是各种回调嵌套 我个人很不喜欢 所以一直想用...
深入理解async函数——ES6篇
PINGER007的博客
12-12 653
含义及作用 引入了 函数，使得异步操作变得async更加方便。async函数就是将 Generator 函数的星号（*）替换成async，将yield替换成await，仅此而已。async函数对 Generator 函数的改进，体现在以下四点。 内置执行器 更好的语义 更广的适用性 返回值是 Promise 基本用法 async函数返回一个Promise对象，可以使用then方法添加回...
async、await详解
rpf1234的博客
03-10 962
上面这段代码async中使await 摇色子()先执行，等到三秒后执行完再把得到的结果赋值给左边的n，也就是说test函数需要三秒钟才执行完成，所以test函数是异步的，因此前面必须写async？async/await是对Promise的优化:async/await是基于Promise的，是进一步的一种优化，不过在写代码时，Promise本身的API出现得很少，很接近同步代码的写法；await 等待的是一个Promise对象，后面必须跟一个Promise对象，但是不必写then()，直接就可以得到返回值。
Promise、Async/Await 详解
m0_61663332的博客
08-03 5418
Promise、Async/Await 详解，Promise的参数resolve和reject、回调函数.then 和.catch和方法 .all() 和 .race()的使用。以及语法糖async/await的使用方法。
Async 和 Await
终南山守门人
08-28 434
异步方法看上去就像这样： C# 123456public async Task DoSomethingAsync(){  // 在真实世界里，我们会真的去执行一些操作。。。  // 但对于这个示例，我们只是简单的（异步地）等待100毫秒。  await Task.Delay(100);}“async”这个关键字
【JS异步】async 与 await
前端学习博客
04-26 438
async 与 await 文章目录async 与 awaitasync 函数用法await 表达式注意 async 函数 函数的返回值为promise 对象 promise 对象的结果由async 函数执行的返回值决定 async function main() { return 1 } let result = main(); console.log(result); /* Promise [[Prototype]]: Promise [[PromiseState]]: "fulfilled
解决Postman断言中不能使用动态参数的办法
m0_67592130的博客
09-16 333
假若在请求体中使用了内置的动态参数，但我们已知Postman的断言是无法使用内置的动态参数的，为了解决这个问题，我们可以在Pre-request Script中先自定义动态参数，并设置为全局变量，在断言中get一下全局变量，就可以曲线达到断言中使用动态参数的目的了。第一步：在Pre-request Script中自定义时间戳，并将时间戳设置为全局变量。第一步：在Pre-request Script中自定义时间戳，并将时间戳设置为全局变量。第二步：断言中通过获取全局变量的方式获取动态参数。
React Async 项目教程
gitblog_00225的博客
08-27 501
React Async 项目教程 项目介绍 React Async 是一个用于处理异步操作的 React 库。它提供了一系列工具和组件，帮助开发者更轻松地管理异步数据流，如网络请求、定时器等。React Async 的核心优势在于其简洁的 API 和强大的功能，使得异步操作在 React 应用中变得更加直观和易于管理。 项目快速启动 安装 首先，你需要在你的 React 项目中安装 React A...
对于await阻塞的理解
qq_59076775的博客
10-20 2130
await阻塞的理解
Async/Await
最新发布
06-06
### Async/Await 的使用场景及其实现机制 #### 使用场景 Async/Await 是 JavaScript 中处理异步操作的强大工具，广泛应用于需要简化异步代码逻辑的场景。以下是其常见使用场景： 1. **API 请求**：在前端开发中，通常需要通过 `fetch` 或 `axios` 等库发起 HTTP 请求获取数据。使用 Async/Await 可以使代码更简洁、可读性更高[^4]。 ```javascript async function fetchData(url) { try { const response = await fetch(url); const data = await response.json(); return data; } catch (error) { console.error('Error fetching data:', error); } } ``` 2. **数据库操作**：在 Node.js 后端开发中，与数据库交互的操作通常是异步的。Async/Await 能够帮助开发者以同步的方式编写这些异步操作[^2]。 ```javascript async function getUserById(id) { try { const user = await db.query(`SELECT * FROM users WHERE id = $1`, [id]); return user; } catch (error) { console.error('Error querying database:', error); } } ``` 3. **文件读写**：Node.js 提供了许多异步的文件系统操作方法。使用 Async/Await 可以避免回调地狱并提高代码可维护性[^4]。 ```javascript const fs = require('fs').promises; async function readFile(filePath) { try { const data = await fs.readFile(filePath, 'utf8'); return data; } catch (error) { console.error('Error reading file:', error); } } ``` #### 实现机制 Async/Await 的实现基于 Promise，其底层机制可以分为以下两部分： 1. **Async 函数**：当一个函数被声明为 `async` 时，它会返回一个隐式的 Promise 对象。如果函数内部没有显式返回 Promise，则会自动将返回值包装为一个已解决的 Promise[^4]。 ```javascript async function asyncFunction() { return 'Hello World'; } asyncFunction().then(value => console.log(value)); // 输出: Hello World ``` 2. **Await 表达式**：`await` 关键字只能用于 `async` 函数内部，用于暂停当前函数的执行，直到指定的 Promise 被解决或拒绝。一旦 Promise 完成，`await` 将返回其结果[^1]。 ```javascript async function delay(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } async function testDelay() { console.log('Start'); await delay(1000); console.log('End after 1 second'); } testDelay(); ``` 此外，Async/Await 内部按照顺序调用 `await` 表达式，确保每个异步任务按顺序完成[^3]。 #### 错误处理 Async/Await 的错误处理可以通过 `try...catch` 块实现，这种方式比传统的 `.catch()` 方法更加直观和易于理解[^2]。 ```javascript async function handleErrorExample() { try { const result = await someAsyncOperation(); console.log(result); } catch (error) { console.error('An error occurred:', error); } } ``` ### 注意事项 1. Async/Await 不会改变异步操作的本质，只是提供了更简洁的语法[^4]。 2. 在需要并行执行多个异步任务时，应结合 `Promise.all` 使用，而不是简单地串联多个 `await`[^2]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值