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((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()

 运行结果:

async和 await 的基本使用_第1张图片

3.3 await的特点

  1. await关键字必须放在async修饰的函数中才能使用
  2. await关键字后面是一个Promise对象,如果是一个普通值会自动转为Promise对象来执行
  3. await会等待其后面的Promise对象的成功执行状态,将结果值赋值给 = 号前面的变量

如果Promise是失败状态,则不会再往下继续执行

// 1. 准备一个Promise对象
function getRandom() {
  return new Promise((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((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()

 运行结果:

async和 await 的基本使用_第2张图片

4. try/catch捕获错误

上面代码已经大概介绍了try/catch 的基本使用,我把基本语法放这里:

  try {
    // 需要被执行的语句
    //一旦出错,就会触发catch中的代码执行
  } catch (error) {
    // error 接收错误信息
    // 处理错误信息代码
  }

5.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博客

6.await async 的底层原理 

async/await是一种用于处理异步操作的Promise语法糖,使得编写异步代码变得更加简单和易读。通过使用async关键字声明一个函数为异步函数,并使用await关键字等待Promise的解析(完成或拒绝),以同步的方式编写异步操作的代码。async 函数:

个函数被标记为async 时,它会自动返回一个 Promise。

在async 函数内部,可以使用 await 关键字来等待一个 Promise 的解决。如果 await 后面的表达式不是一个 Promise,它会被自动包装成一个 Promise。

await 等待成功(Promise 对象)

await:当遇到 await 关键字时,函数的执行会暂停,直到 await 后面的 Promise 被解决。如果 Promise 被成功解决, await 表达式的值就是 Promise 的结果;如果 Promise 被拒绝,await 会抛出一个错误。

await 只能在 async 函数内部使用

当async 函数内部执行到一个 await 表达式时,函数的执行会暂停,并将控制权返回给调用者。此时注册一个回调函数,当 await 后面的 Promise 被解决时,这个回调函数会被调用,以继续执行函数的剩余部分。

如果await 后面的 Promise 被拒绝,会抛出一个错误,这个错误会被 try/catch 块捕获,或者如果没有被捕获,会导致整个 Promise 链被拒绝。

总结:

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

你可能感兴趣的:(前端,javascript,开发语言)