了解js中async-await

简介: 了解async异步函数如何使用并且使用中的注意点

async异步函数

async 关键字用于声明一个异步函数

// 写法一:

async function foo1() {


}

// 写法二:

const foo2 = async () => {


}

// 写法三:

class Foo {

 async bar() {


 }

}

async异步函数与普通函数的区别

1. 返回值

函数的返回值为promise对象

  1. 如果返回值是一个非Promise类型的数据,返回的是一个成功的Promise对象
  2. 如果返回值是一个Promise类型的对象,Promise类型的对象的结果就是这个Promise对象的结果
  3. 抛出异常的话,返回的是一个失败的Promise对象

2. 异常

普通函数:

function foo() {

 console.log("foo function start~")

 console.log("中间代码~")

 throw new Error("error message")

 console.log("foo function end~")

}

foo().catch(err => {

 console.log("error message:", err)

})

console.log("后续还有代码~~~~~")

// 输出抛出异常前面的代码并抛出异常,后面代码不执行

异步函数:

async function foo() {

 console.log("foo function start~")

 console.log("中间代码~")

 // 异步函数中的异常, 会被作为异步函数返回的Promise的reject值的

 throw new Error("error message")

 console.log("foo function end~")

}

foo().catch(err => {

 console.log("error message:", err)

})

console.log("后续还有代码~~~~~")

// 后续代码会被执行,之后打印错误信息

如果我们在async中抛出了异常,那么程序它并不会像普通函数一样报错,而是会作为Promise的reject来传递;

await关键字

await 表达式会暂停整个 async 函数的执行进程并出让其控制权,只有当其等待的基于 promise 的异步操作被兑现或被拒绝之后才会恢复进程。promise 的解决值会被当作该 await 表达式的返回值

function requestData1() {

 return new Promise((resolve, reject) => {

   setTimeout(() => {

     resolve(1111)

   }, 2000);

 })

}


function requestData2() {

 return new Promise((resolve, reject) => {

   setTimeout(() => {

     reject(222)

   }, 3000);

 })

}


async function foo1() {

 // 1.await跟上表达式

 const res1 = await requestData1()

 // 2. await跟上其他值

 const res2 = await 123  // "await" 对此表达式的类型没有影响

 console.log("后面的代码1", res1)

 console.log("后面的代码2", res2)

}

foo1()


// 3.reject值

async function foo2() {

 try {

   const res3 = await requestData2()

   console.log("res3:", res3)

 } catch (error) {

   console.log(error);

 }

}


foo2().catch(err => {

 console.log("err:", err)

})

await 表达式

  1. await右侧的表达式一般为promise对象,但也可以是其他的值
  2. 如果表达式是promise对象,await返回的是promise成功的值
  3. 如果表达式是其他值,直接将此值作为await的返回值
  4. await xxx是同步的,但await下面的代码都是相当于.then里的(微任务)

注意

  1. await必须写在async函数中,但async函数中可以没有await
  2. 如果awaitpromise失败了,就会抛出异常,需要通过try...catch捕获处理
目录
相关文章
el-input的number类型里输入e、+、-符号返回值为空?
el-input的number类型里输入e、+、-符号返回值为空?
618 0
|
机器学习/深度学习 算法 数据挖掘
神经网络训练失败的原因总结 !!
神经网络训练失败的原因总结 !!
350 0
|
算法 数据处理
点云地面点滤波(Progressive Morphological Filter)算法介绍(PCL库)
点云地面点滤波(Progressive Morphological Filter)算法介绍(PCL库)
1746 0
点云地面点滤波(Progressive Morphological Filter)算法介绍(PCL库)
|
11月前
|
数据可视化 前端开发 UED
低代码可视化-Uniapp Cascader级联选择器-代码生成器
Cascader级联选择器是一种常用的UI组件,适用于从具有层级关系的数据中进行选择,如省市区选择、公司层级选择等。它通过分组多列展示选项,支持多级分类、联动选择、搜索与过滤等功能。组件具备自定义样式、禁用选项、清空选项等特性,广泛应用于电商、企业内部系统等场景。代码示例展示了其详细的实现和调用方法。
450 7
低代码可视化-Uniapp Cascader级联选择器-代码生成器
|
存储 自然语言处理 API
基于 Python 的地址解析:自动识别姓名、电话、地址、详细地址与省市区
基于 Python 的地址解析:自动识别姓名、电话、地址、详细地址与省市区
1862 1
|
编解码 Android开发
【Android Studio】使用UI工具绘制,ConstraintLayout 限制性布局,快速上手
本文介绍了Android Studio中使用ConstraintLayout布局的方法,通过创建布局文件、设置控件约束等步骤,快速上手UI设计,并提供了一个TV Launcher界面布局的绘制示例。
311 1
|
关系型数据库 Java 数据库
后端开发之道:从新手到高手的蜕变之旅
在数字时代的浪潮中,后端开发如同一座灯塔,指引着应用程序稳定运行的方向。本文将通过浅显易懂的语言,带领初学者了解后端开发的基本概念、核心技能和职业发展路径。我们将一起探索如何从零基础起步,逐步成长为一名能够独当一面的后端开发高手。无论你是编程新手,还是希望深化后端知识的开发者,这篇文章都将为你的职业之路提供宝贵的指导和启示。
|
Go
Golang 语言怎么避免空指针引发的 panic
Golang 语言怎么避免空指针引发的 panic
239 0
vue3使用vue-router嵌套路由(多级路由)
vue3使用vue-router嵌套路由(多级路由)
1362 0
|
Dart 前端开发 JavaScript
Sass dart-sass 与 node-sass 的区别与选择
Sass dart-sass 与 node-sass 的区别与选择
1134 0