async和 await 的基本使用

目录

1.async/await是什么？

2.async/await基本语法

3.async函数和await的特点

3.1 async函数的特点

 3.2 async函数的特点代码演示

3.3 await的特点

4. try/catch捕获错误

---

1.async/await是什么？

async/await是一种用于处理异步操作的Promise语法糖。

(语法糖:更易读、更简洁或更符合人类思维习惯而设计的一种语法方式)

通过使用async关键字声明一个函数为异步函数（返回值是Promise类型）

使用await关键字等待Promise的解析（完成或拒绝），以同步的方式编写异步操作的代码。

2.async/await基本语法

2.1核心步骤：

1. async 修饰函数
2. 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函数的特点

1. async修饰的函数默认返回的是Promise对象，所以可以放到await关键字后面来调用
2. 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的特点

1. await关键字必须放在async修饰的函数中才能使用
2. await关键字后面是一个Promise对象，如果是一个普通值会自动转为Promise对象来执行
3. 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的比较

1. promise是ES6，async/await是ES7
2. async/await相对于promise来讲，写法更加优雅
3. 捕捉错误

• promise错误可以通过.catch来捕捉
• async/await既可以用.then/.catch又可以用try-catch捕捉
• [ArkTs]对Promise的理解-CSDN博客

总结：

虽然async/await在很多情况下可以提供更清晰和简洁的代码，但Promise也有其独特的优势。例如，处理多个并行异步操作时，Promise.all()通常是更好的选择