目录
1.async/await是什么?
async/await是一种用于处理异步操作的Promise语法糖。
(语法糖:更易读、更简洁或更符合人类思维习惯而设计的一种语法方式)
通过使用async关键字声明一个函数为异步函数(返回值是Promise类型)
使用await关键字等待Promise的解析(完成或拒绝),以同步的方式编写异步操作的代码。
2.async/await基本语法
2.1核心步骤:
- async 修饰函数
- await 等待成功(Promise 对象)
语法:
async function fun() { // await 获取到的是 之后 Promise 对象的成功结果 const res1 = await Promise对象1 const res2 = await Promise对象2 const res3 = await Promise对象3 } //执行fun函数 fun()
async+await举例:
// 获取一个随机数,返回一个Promise对象 function randomNum() { return new Promise<string>((resolve, reject) => { setTimeout(() => { const num = Math.floor(Math.random() * 100) resolve(num.toString()) }, 10) }) } // 定义async函数func,里面使用await等待Promise对象返回结果 async function func() { const num1 = await randomNum() console.log(num1) }
3.async函数和await的特点
3.1 async函数的特点
- async修饰的函数默认返回的是Promise对象,所以可以放到await关键字后面来调用
- async修饰的函数内部return的数据需要使用 await 或者 .then() 或者.catch 来接收
3.2 async函数的特点代码演示
// 1. 准备一个Promise对象 async function getRandom() { let num = Math.floor(Math.random() * 100) return num.toString() // 本质上是返回了一个Promise.Resolve(num.toString()) } // 2. 使用一个异步函数来调用 async function call() { let res = await getRandom() console.log('成功随机数:--->', res) let res1 = await getRandom() console.log('成功随机数:--->', res1) } call()
运行结果:
3.3 await的特点
- await关键字必须放在async修饰的函数中才能使用
- await关键字后面是一个Promise对象,如果是一个普通值会自动转为Promise对象来执行
- await会等待其后面的Promise对象的成功执行状态,将结果值赋值给 = 号前面的变量
如果Promise是失败状态,则不会再往下继续执行
// 1. 准备一个Promise对象
function getRandom() {
return new Promise<string>((resolve, reject) => {
setTimeout(() => {
let num = Math.floor(Math.random() * 100)
// resolve(num.toString())
reject(num.toString())
}, 2000)
})
}
// 2. 使用一个异步函数来调用
async function call() {
let res = await getRandom().catch((err:string) => {
console.log('失败随机数res:--->', err)
})//返回的是reject,所以这里会执行catch,如果不写.catch(),就都不会执行
let res1 = await getRandom()
console.log('成功随机数res1:--->', res1)//这个是不会执行的
}
call()
运行结果:
如果想要执行,需要使用try/catch来捕获错误
// 获取一个随机数,返回一个Promise对象
function randomNum(time:number) {
return new Promise<string>((resolve, reject) => {
setTimeout(() => {
const num = Math.floor(Math.random() * 100)
reject(num.toString())
}, time)
})
}
// 定义async函数func,里面使用await等待Promise对象返回结果
async function func() {
console.log('run---开始')
//由于Promise对象的执行状态为拒绝(失败状态),则后面代码不会再执行
// 我们需要使用try/catch来捕获异常,让代码能够继续往下执行
try {
const num1 = await randomNum(300)
console.log('num1=', num1)
} catch (err) {
console.error('err--->',JSON.stringify(err))
}
console.log('run---结束')
}
func()
运行结果:
4. try/catch捕获错误
上面代码已经大概介绍了try/catch 的基本使用,我把基本语法放这里:
try { // 需要被执行的语句 //一旦出错,就会触发catch中的代码执行 } catch (error) { // error 接收错误信息 // 处理错误信息代码 }
Promise与Async/Await的比较
- promise是ES6,async/await是ES7
- async/await相对于promise来讲,写法更加优雅
- 捕捉错误
- promise错误可以通过.catch来捕捉
- async/await既可以用.then/.catch又可以用try-catch捕捉
- [ArkTs]对Promise的理解-CSDN博客
总结:
虽然async/await在很多情况下可以提供更清晰和简洁的代码,但Promise也有其独特的优势。例如,处理多个并行异步操作时,Promise.all()通常是更好的选择