js中async与await详解

2023-11-17

引言

JavaScript 是一门基于事件驱动和异步编程的语言,而异步编程是 JavaScript 中最常用的编程方式之一。在异步编程中,我们通常使用回调函数或 Promise 对象来处理异步操作的结果。而在 ES2017 中,引入了 async 和 await 关键字,使得异步编程更加简洁和易读。

Promise 对象

在介绍 async await 之前,我们先来了解一下 Promise 对象。Promise 对象是 JavaScript 中处理异步编程的一种机制,它可以将异步操作封装成一个对象,使得异步操作的结果可以像同步操作一样被处理。

一个 Promise 对象表示一个异步操作的最终完成或失败,并且可以将其结果返回给异步操作的调用者。Promise 对象有三种状态:pending(等待中)、fulfilled(已完成)和rejected(已失败)。当一个 Promise 对象处于等待中状态时,它表示异步操作正在进行中;当一个 Promise 对象处于已完成状态时,它表示异步操作已经成功完成;当一个 Promise 对象处于已失败状态时,它表示异步操作已经失败。

在使用 Promise 对象时,我们通常使用 then 方法处理异步操作的结果,或者使用 catch 方法处理异步操作的错误。以下是一个简单的例子,演示如何使用 Promise 对象处理异步操作的结果:

javascript
Copy code
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

在上面的例子中,我们使用 fetch 函数从服务器获取数据,并将其解析为 JSON 格式。然后,我们使用 then 方法处理解析后的数据,或者使用 catch 方法处理错误。

async 函数

async 函数是一种特殊的函数,它的返回值是一个 Promise 对象。使用 async 关键字声明的函数可以在内部使用 await 关键字来等待异步操作完成,并返回一个 Promise 对象。在 async 函数中使用 await 关键字可以让异步操作的结果像同步操作一样被处理,从而避免了回调地狱的问题。

以下是一个简单的例子,演示如何定义和调用 async 函数:

javascript
Copy code
// 定义一个 async 函数
async function getData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

// 调用 async 函数
getData()
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

在上面的例子中,我们先定义了一个名为 getDataasync 函数。在 getData 函数中,我们使用 await 关键字等待从服务器获取数据的异步操作完成,并将结果解析为 JSON 格式。最后,getData 函数返回解析后的数据。

在调用 getData 函数时,我们使用 then 方法处理返回的数据,或者使用 catch 方法处理错误。由于 getData 函数返回的是一个 Promise 对象,因此我们可以使用 Promise 的标准方法来处理返回的结果。

需要注意的是,await 关键字只能在 async 函数中使用,否则会导致语法错误。如果在非 async 函数中使用 await 关键字,会导致语法错误。

await 关键字

await 关键字用于等待一个异步操作完成,并返回异步操作的结果。在使用 await 的时候,需要将其放在一个 async 函数内部。在等待异步操作完成时,JavaScript 引擎会暂停执行当前函数,并等待异步操作完成,然后再继续执行下面的代码。

以下是一个简单的例子,演示如何使用 await:

javascript
Copy code
async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

// 调用 fetchData 函数
fetchData().then(data => {
  console.log(data);
}).catch(error => {
  console.error(error);
});

在上面的例子中,fetchData 函数使用 await 等待 fetch 函数返回的结果,然后再等待将结果解析为 JSON 格式。最后,fetchData 函数返回解析后的数据。在调用 fetchData 函数时,使用 then 方法处理返回的数据,或者使用 catch 方法处理错误。

需要注意的是,await 只能等待返回 Promise 对象的异步函数执行完成,如果等待的不是 Promise 对象,会自动将其转换为 Promise 对象。

总结

asyncawaitJavaScript 中处理异步编程的一种新方式,它们可以让异步操作的结果像同步操作一样被处理,从而使得异步编程更加简洁和易读。在使用 asyncawait 时,需要注意以下几点:

  • async 函数的返回值是一个 Promise 对象;
  • await 关键字只能在 async 函数中使用;
  • await 关键字只能等待返回 Promise 对象的异步函数执行完成;
  • 在使用 await 时,JavaScript 引擎会暂停执行当前函数,直到异步操作完成。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

js中async与await详解 的相关文章

随机推荐

  • JPA基本使用

    JPA的基本使用 这段时间看了下JPA 简单的做个笔记吧 1 搭建环境 1 1 application yaml 我用的是Mysql 需要数据库连接驱动 数据源看你心情吧 系统也有默认的数据源 spring datasource url j
  • No module named ‘tensorflow.contrib‘

    1 安装tensorflow pip install tensorflow i https pypi tuna tsinghua edu cn simple 已经安装tensorflow后出现No module named tensorfl
  • actionInvocation.invoke()是什么意思

    关于Struts2的自定义的验证截器 package ch06 struts2 Interceptor import java util Map import com opensymphony xwork2 Action import co
  • c语言编译defined,#if defined(__GNUC__)的意思是不是如果使用的是GCC编译器?

    满意答案 wcctf05 2015 05 22 采纳率 58 等级 8 已帮助 414人 是的 就是编译器选择 参考以下内容 Compiler name and version macros are predefined by all C
  • : You have an error in your SQL syntax; check the manual that corresponds to your MySQL server versi

    出现这种报错的原因一定是sql语句写错了 报错 分析 解决方案 在这种报错的情况下 1 看字段是否写错 2 是否多逗号或者少写逗号 3 sql语句本身语法有没有错误
  • ecere ide安装

    上一篇 无 跨平台Ecere语言 Windows MacOSX Linux BSD Android IDE没什么特别名字 我管它叫ec ide好了 里面的3d例子挺好的 主要opengl 3ds 也有Dx的 图片支持bmp jpg png
  • Python爬虫实战-小说网站爬虫开发

    需求 从http www kanunu8 com book3 6879爬取 动物农场 所有章节的网址 再通过一个多线程爬虫将每一章的内容爬取下来 在本地创建一个 动物农场 文件夹 并将小说中的每一章分别保存到这个文件夹中 每一章保存为一个文
  • 自学Python04-学会Python中的空格

    Python中的空格和其他语言不同 其他语言空格可能会被编译器忽略 但是在这里有严格的语法意义 比如一行正常的代码 如果前面多了空格就出错 所有新语句必须顶格编写 空格何时用 主要用来表示函数 语句 if for in 的结构 def Fi
  • Mybatis-Plus使用或“or”问题,及使用方法

    最近在使用Mybatis Plus 发现在拼接条件的时候 and和or会出问题 比如下面这种 QueryWrapper userWrapper new QueryWrapper userWrapper lambda eq name name
  • 19.STM32睡眠模式

    1 低功耗模式 就是CPU不需要继续执行时候 可以利用低功耗模式来节省功耗 3种低功耗模式 1 睡眠模式内核停止 外设 系统时钟仍然运行 2 停止模式 所有时钟停止 电源工作 但寄存器和SRAM内容保存 3 待机模式 所有内核电源关闭 只有
  • nmake 的 makefile

    宏定义 有些宏定义未用到 ROOT C Program Files x86 Microsoft Visual Studio 8 VC 系统include以及lib根目录 ROOT INCLUDE ROOT Include ROOT atlm
  • Python:Matplotlib数据可视化

    Python Matplotlib数据可视化 一 基础语法与常用参数 1 1基础语法与绘图风格 1 1 1创建画布与创建子图 1 1 2添加画布内容 1 1 3保存与展示图形 1 1 4绘图风格 2 1动态rc参数 2 1 1 线条常用的r
  • 静默安装VC_redist.x64.exe

    始 为了使vs17开发的程序在新装的win10系统跑起来 过程 1 到微软官网 下载运行时库vc redist Download Visual C Redistributable Packages for Visual Studio 201
  • c语言协程[1]_基础协程实现

    协程的本质是利用程序语言语法来实现逻辑上的多任务的编程 很多年前 我在小单片机上一直想跑操作系统 奈何Flash和RAM一直没有合适的 后来想自己怼个操作系统 结果拖延症犯了 到现在也无果 rtt freertos真香 后来一直在想有啥更好
  • devtools热更新报错 javax.management.InstanceAlreadyExistsException: org.springframework.boot:type=Admin

    项目场景 spring boot version 2 4 2 spring cloud version 2020 0 1 spring cloud alibaba version 2021 1 问题描述 在配置过devtools热更新之后
  • (zz)I/O PAD design

    http tw myblog yahoo com Calvin Horng article mid 1272 next 1257 l f fid 5 同事設計一塊電路板 不知道為什麼一通電 主要的IC開始發燙起來 我看了一看IC的Datas
  • fastreport designer.exe界面设置为中文

    fastreport 安装好后 界面默认是英文 在安装时我明明选择了安装中文语言包的 打开designer exe后显示的还是英文 原来要显示中文是需要设置designer exe的 设置如下 1 菜单栏 File gt Select La
  • C语言系列:6、结构

    C语言系列 6 结构 文章目录 C语言系列 6 结构 1 结构的基本知识 2 结构和函数 3 结构数组 4 指向结构的指针 5 自引用结构 6 表查找 7 类型定义 8 联合 9 位字段 结构是一个或多个变量的集合 这些变量可能为不同的类型
  • KEIL仿真调试问题

    Q1 如何使用keil调试程序 A1 第一个表示跳转到下一个程序状态 第二个表示跳转到下一行 在主程序中的时候也是直接跳转到主程序的下一行 第三个表示 watch窗口可以查看变量的数值 Q2 使用MDK进行软件设计时没有使用ST官方的模板而
  • js中async与await详解

    引言 JavaScript 是一门基于事件驱动和异步编程的语言 而异步编程是 JavaScript 中最常用的编程方式之一 在异步编程中 我们通常使用回调函数或 Promise 对象来处理异步操作的结果 而在 ES2017 中 引入了 as