async和await的知识点

最新推荐文章于 2023-08-23 15:33:56 发布
最新推荐文章于 2023-08-23 15:33:56 发布
阅读量355 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： js 文章标签： javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lyx9611/article/details/117468750

当在node.js函数中使用async / await时,它是否会阻塞node.js线程,直到它执行下一行代码？

await 后面可以跟任何的JS 表达式。虽然说 await 可以等很多类型的东西，但是它最主要的意图是用来等待 Promise 对象的状态被 resolved。

如果await后面是 promise对象会造成异步函数停止执行并且等待 promise 的解决, 如果await后面是
正常的表达式则立即执行。

1、async或await不会阻止整个解释器，node.js仍然将所有JavaScript作为单线程运行，即使某些代码再async或await上等待，其他事件仍然可以继续运行其事件处理程序（node.js不会被阻止）。
2、 事件队列仍在为其他事件提供服务，是一个事件，解决了一个允许

从逻辑上讲,您可以考虑在执行函数时遇到await关键字时node.js执行的操作如下：

  1. 进行函数调用
  2. 解释器看到该函数被声明为异步,这意味着它将始终返回一个promise.
  3. 解释器开始执行该功能.
  4. 当遇到await关键字时,它会暂停该函数的进一步执行,直到正在等待的promise被解决.
  5. 然后该函数返回一个未解决的promise.
  6. 此时,解释器继续执行函数调用之后的任何内容(通常是fn().then()后面跟着其他代码行). .then()处理程序尚未执行,因为尚未解析承诺.
  7. 在某些时候,这个Javascript序列完成并将控制权返回给解释器.
  8. 解释器现在可以自由地从事件队列中提供其他事件.进入await关键字的原始函数调用仍处于暂停状态,但现在可以处理其他事件.
  9. 在未来的某个时刻,正在等待的原始承诺得到解决.当在事件队列中处理该事件时,先前挂起的函数在等待之后继续在该行上执行.如果还有await语
最低0.47元/天 解锁文章

200万优质内容无限畅学
ES6中Promise、async和await面试题整理
共同学习，共同成长
08-09 1395
promise是每个前端人必须会接触到的一个知识点,下面这篇文章主要给大家整理了一下关于ES6中Promise、async和await面试题的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
async 和 await 入门知识点总结
weixin_44818729的博客
04-01 190
参考:https://blog.youkuaiyun.com/Likianta/article/details/90123678 https://www.cnblogs.com/xinghun85/p/9937741.html 谢谢博主大大! 1."普通函数", 现在我们用 async 把它们升级为 "异步函数". 一、首先要知道什么是协程、异步。 举个例子：假设有1个洗衣房，里面有10台洗衣...
ES6之async，await
qq_31403519的博客
10-25 148
含义 async 函数是什么？它是 Generator 函数的语法糖，Generator 函数必须要靠执行器才能自执行，而async自带执行器。 //run函数是generator函数的执行器，async函数内置了执行器 function* ge() { yield new Promise((resolve, reject) => { setTimeout(() =>...
async/await
tshjy1的博客
04-01 253
async/await，踩雷，已解决 背景： 在vue项目中，封装http请求方法，后端接口报错约定的是特定的JSON报文格式，且拦截报错内容统一用iview的消息弹框进行渲染，在实际业务功能中接口调用可以省去catch报错的处理。???? /** * 引入axios，创建axios实例 * 封装axios请求拦截器 */ import axios from "axios"; import util from "../utils/util"; // import store from '@/store
async/await 优雅永不过时
CRMEB小程序商城的博客
11-26 2260
引言 async/await是非常棒的语法糖，可以说他是解决异步问题的最终解决方案。从字面意思来理解。async 是异步的意思，而 await 是 等待 ，所以理解 async用于申明一个function是异步的，而 await 用于等待一个异步方法执行完成。 async作用 async声明function是一个异步函数，返回一个promise对象，可以使用 then 方法添加回调函数。async函数内部return语句返回的值，会成为then方法回调函数的参数。 async function test(
async和await异步函数在接口请求失败时代码不会继续向下执行
hs1219462412的博客
04-18 4543
一、遇到的问题 在异步函数中调用接口，使用了async和await，因为接口调用404导致报错，最后函数内的代码不会继续向下执行，从而使其他业务逻辑bug。 // 通过.catch 捕获异常下面的打印才会正常执行到。 // 还可以通过把调用接口的地方用try catch 包裹起来 useEffect(() => { const asyncFn = async () => { const res = await axios({ method: 'get',
浅谈C#中的Async和Await的用法详解
12-31
同样本文的内容也大多是翻译的，只不过加上了自己的理解进行了相关知识点的补充，如果你认为自己的英文水平还不错，大可直接跳转到文章末尾查看原文链接进行阅读。 写在前面 自从C# 5.0时代引入async和await关键字后...
async、await相关知识点
m0_50290552的博客
08-21 475
async 与 await 相关知识点
Python3.5中async_await特性的实现.pdf
08-21
Python是一种广泛使用的高级编程语言，其简洁直观的语法和强大的功能使其在编程领域中有着非常重要的地位。...掌握这些知识点将有助于更好地理解和应用Python中的异步编程技术，进而提升编程效率和程序性能。
async await
weixin_42886895的博客
05-24 310
await 表示函数可以停止运行，等待await 内的函数完成后继续运行函数，而不是await等待，函数继续运行。 async def yyy(): time.sleep(1) async def www(): time.sleep(2) async def xxx(): await yyy() await www() print('xxx') 运行xxx函数不能通过直接调用的方式...
async和await函数中出现报错不会继续执行下去，解决办法
changyana的博客
12-14 4713
预想的是有报错的话只有本条函数不能执行，它下边的函数还会继续执行。但是写出来的代码运行出来的结果是await出现错误了，它下边的函数也不会执行了。应该用catch来接收一下错误，然后后边的代码就可以继续执行了。
Promise 与 async await
lianbao0425的博客
07-30 865
Promise相关问题
await 与其他普通代码的执行顺序
sun13047140038的博客
08-23 783
在等待的过程中，其他代码可以继续执行。在讨论await与其他普通代码的执行顺序时，我们通常指的是在异步编程中，特别是在使用异步/await语法进行JavaScript编程时的情况。这意味着当遇到await时，JavaScript引擎可以暂停当前函数的执行，并在等待的同时执行其他可以执行的任务，从而提高程序的并发性和响应性。3.顺序执行： 尽管await可以让异步操作看起来像同步操作一样，但在异步函数内部，await之前的代码会按照顺序执行，而await之后的代码会在等待的异步操作完成后才会继续执行。
【VUE 在父组件mounted执行完毕之后再执行子组件的mounted】
热门推荐
weixin_52137696的博客
08-19 1万+
VUE 在父组件mounted执行完毕之后再执行子组件的mounted
Axios、Promise、async、await、nextTick
长不大的大灰狼
01-09 1545
Axios、Promise、async、await、nextTick一、Axios1、基本使用2、axios API3、请求方法的别名4、并发5、创建实例6、实例方法7、在Vue项目中进行全局配置二、ES6 Promise 对象三、async和await四、nextTick 一、Axios Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 1、基本使用 GET请求： // 为给定 ID 的 user 创建请求 axios.get('/user?ID=12345
VUE 异步生命周期 async
MISS假老练的博客
10-12 2901
vue 生命周期函数加上了async之后，父子组件的各自生命周期函数的执行顺序发生了变化： 父组件created未加async之前： 父created -> 子created -> 子mounted -> 父mounted 父组件created加上async之后： 父created未执行完 -> 子created -> 子mounted -> 父created执行完 -> 父mounted ...
async/await不阻塞事件
wade3po的博客
04-14 2095
在我的认知中，async/await会等待await返回，那么必然就是同步的，既然是同步的，那么就是会阻塞事件循环。 刚好有个同事问了一个接口并发的问题，看了一下代码，我看见有使用async/await，于是信誓旦旦的说会阻塞，结果打脸了，结果是并不会，看下面代码： async function fn1(){ console.log(1); await pr1(); await pr2(); console.log(2); }; function fn2(){ console.log(
async 与 await (js)
weixin_43677787的博客
01-22 782
async 和 await 用于异步（promise）处理。 async 和await 不能用于生命周期（beforeCreate( 创建前 ，created ( 创建后 ），beforeMount（挂载组件之前）mounted（挂载完组件）beforeUpdate（更新之前），updated（更新后）beforeDestroy（销毁前），destroyed（销毁后））。 为什么？生命周期是同步，async和await是异步，它会让同步变成异步。 await 后面接收返回的new Promise 函数并执
如何优雅处理 async/await 中的错误？
guizi0809的博客
05-26 1139
我们都知道 async/await 是 promise 的语法糖。 // 模拟请求接口, 返回的是 Promise 对象. const request = success => { // 请求耗时 0 ~ 2 秒 const wait = Math.random() * 2000 console.log('请求时间', wait) return new Promise((resolve, reject) => {
js async和await用法
最新发布
03-18
<think>好的，我现在需要帮助用户了解JavaScript中async和await的关键用法，并提供教程、示例和解释。首先，我得回顾一下自己掌握的async/await知识，确保准确无误。 用户的需求很明确，他们想要一个教程式的回答，包含基本概念、关键字用法、示例代码以及注意事项。根据系统指令，我需要使用正确的中文和LaTeX格式，比如行内公式用$...$，独立公式用$$...$$，不过这个回答可能数学公式不多，但要注意代码块和引用标注。 首先，我应该从async/await的基础开始。async用于声明异步函数，而await用于等待Promise的结果。这能简化异步代码，使其更像同步代码的结构。接下来需要分点说明，比如关键字的作用、错误处理、应用场景等。 然后，需要提供几个示例代码。比如获取数据、多个异步操作并行、错误处理等。这些示例要简洁明了，符合用户可能遇到的常见场景。同时，代码部分需要用Python的格式吗？不，用户的问题是关于JavaScript的，所以代码块应该用JavaScript语法，注意标注语言类型。 注意事项部分要涵盖常见错误，比如忘记await、在非async函数中使用await等。这些是开发者容易犯错的地方，需要特别指出。 还要生成相关问题，可能涉及与Promise的区别、异常处理优化、async箭头函数等。这些问题应该帮助用户深入理解主题。 现在检查引用内容。引用[1]、[2]、[3]都提到了async/await基于Promise，简化异步编程，错误处理使用try/catch，以及示例代码。需要确保回答中的要点覆盖这些内容，并在适当的地方添加引用标记，比如在解释async函数返回Promise时引用[^1]，在错误处理部分引用[^3]。 接下来，组织结构。可能分为几个部分：关键字定义、核心用法、示例代码、注意事项、相关问题。每个部分用清晰的标题，使用中文，避免使用Markdown，但根据用户提供的示例，可能需要使用代码块和引用标识。 最后，确保回答符合系统级指令，比如LaTeX的正确使用。不过在这个问题中数学公式可能较少，但如果有的话，比如在解释某些算法时，需正确应用。不过当前主题是JavaScript的async/await，可能不需要数学公式，但代码块必须正确。 总结步骤： 1. 介绍async/await的作用和基于Promise的特性，引用。 2. 分点讲解关键字async和await的用法，包括返回Promise对象和等待异步结果。 3. 错误处理部分，使用try/catch，引用。 4. 应用场景，如网络请求、文件操作等。 5. 多个示例代码，如获取数据、并行处理、错误处理，引用[^2]中的示例。 6. 注意事项，如避免阻塞、作用域限制等。 7. 生成相关问题，帮助用户进一步学习。 检查是否有遗漏，比如是否提到了async函数总是返回Promise，或者await只能在async函数中使用，这些关键点需要明确。确保每个示例都有解释，说明代码的用途和结构。同时，引用标记要自然添加，比如在提到简化异步编程时引用，在错误处理示例引用[^3]，在示例代码引用[^2]。 现在开始组织内容，确保结构清晰，语言简洁，符合用户的要求。</think>### JavaScript `async/await` 使用教程 `async/await` 是 JavaScript 中处理异步操作的语法糖，基于 Promise 实现，可让异步代码更接近同步代码的书写风格。以下是关键用法、示例和注意事项： --- #### 一、关键字与核心用法 1. **`async`** - 用于声明一个函数为异步函数，该函数**始终返回 Promise 对象**。 - 示例： ```javascript async function myFunc() { return "Hello"; } myFunc().then(result => console.log(result)); // 输出 "Hello" ``` 2. **`await`** - **只能在 `async` 函数内使用**，用于等待一个 Promise 完成并返回结果。 - 执行到 `await` 时，会暂停当前函数，直到 Promise 状态变为 `resolved` 或 `rejected`。 - 示例： ```javascript async function fetchData() { const response = await fetch('https://api.example.com/data'); return await response.json(); } ``` --- #### 二、关键场景与示例代码 1. **处理异步请求** 使用 `await` 替代 `.then()` 链式调用，简化代码逻辑： ```javascript async function loadUserData() { try { const response = await fetch('/api/user'); const data = await response.json(); console.log(data); } catch (error) { console.error('加载失败:', error); } } ``` 2. **并行执行多个异步操作** 结合 `Promise.all` 提升效率： ```javascript async function fetchMultipleUrls() { const [data1, data2] = await Promise.all([ fetch('/api/data1').then(res => res.json()), fetch('/api/data2').then(res => res.json()) ]); return { data1, data2 }; } ``` 3. **错误处理** 使用 `try...catch` 捕获异常，避免嵌套回调[^3]： ```javascript async function safeOperation() { try { const result = await riskyAsyncTask(); return result; } catch (error) { console.error('操作失败:', error); throw error; // 可选择重新抛出错误 } } ``` --- #### 三、注意事项 1. **避免阻塞主线程** `await` 会暂停当前函数，但不会阻塞 JavaScript 主线程，其他代码仍可执行。 2. **作用域限制** `await` 只能在 `async` 函数内使用，全局或普通函数中直接使用会报错。 3. **性能优化** 多个无依赖的异步操作应使用 `Promise.all` 并行执行，而非顺序 `await`。 --- #### 四、常见问题示例 1. **在循环中使用 `await`** 错误示例（顺序执行，效率低）： ```javascript for (const url of urls) { const data = await fetch(url); // 每个请求依次执行 } ``` 正确优化（并行执行）： ```javascript const promises = urls.map(url => fetch(url)); const results = await Promise.all(promises); ``` ---
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值