ES6中async函数与await表达式的基本用法举例

2023年5月27日上午3:50 • JavaScript

下面是关于ES6中async函数与await表达式的基本用法及示例说明的完整攻略。

什么是async函数与await表达式

在ES6中，async函数是用来简化异步代码的一种新语法，它是Generator函数的语法糖。async函数返回一个Promise对象，可以使用then方法添加回调函数。同时，async函数内部可以使用await表达式，它用于等待一个Promise对象的执行结果，并返回执行结果的值。

async函数和await表达式的基本用法

定义async函数

定义一个async函数使用关键字async。下面是一个简单的示例，当asyncTest函数被调用时，它会返回一个Promise对象。

async function asyncTest(){
  return "Hello World"
}

使用await

await表达式只能在async函数中使用，await用于等待一个Promise对象的执行结果，如果Promise对象状态变为resolved，则返回执行结果，否则返回Promise对象状态为rejected的错误信息。

async function asyncTest(){
  let result = await Promise.resolve("Hello World")
  console.log(result)
}

上面示例中，由于Promise对象状态为resolved，所以await表达式返回Promise对象的执行结果"Hello World"，打印出来的结果为"Hello World"。

如果Promise对象状态为rejected，则会抛出错误。比如：

async function asyncTest(){
  try{
    let result = await Promise.reject("Error")
    console.log(result)
  }catch(error){
    console.log(error)
  }
}

上面示例中，由于Promise对象状态为rejected，所以await表达式抛出错误信息"Error"，并被catch语句捕获到，打印出来的结果为"Error"。

示例说明

下面通过两个示例说明async函数和await表达式的基本用法。

示例一：获取用户信息

假设我们需要从服务器获取某个用户的信息，我们可以定义一个getUserInfo函数，调用此函数时，会返回Promise对象，可以使用then方法添加回调函数，并获取到用户信息。getUserInfo函数内部使用了await表达式等待Promise对象的执行结果，并返回执行结果。

async function getUserInfo(userId){
  let response = await fetch(`https://example.com/api/user/${userId}`)
  let data = await response.json()
  return data
}

getUserInfo(1)
  .then(data => {
    console.log(data)
  })
  .catch(error => {
    console.log(error)
  })

上面示例中，getUserInfo函数使用了await表达式等待Promise对象的执行结果，如果获取到了用户信息，则返回用户信息，否则返回错误信息。调用getUserInfo函数时，使用了then方法添加回调函数，并获取到了用户信息。

示例二：上传图片

假设我们需要上传一张图片到服务器，上传完成后需要获取上传结果。我们可以定义一个uploadImage函数，调用此函数时，会返回Promise对象，可以使用then方法添加回调函数，并获取到上传结果。uploadImage函数内部使用了Promise对象进行图片上传，并等待Promise对象的执行结果，并返回上传结果。

async function uploadImage(imageData){
  let formdata = new FormData()
  formdata.append('image', imageData)

  let response = await fetch('https://example.com/api/upload', {
    method: 'POST',
    body: formdata
  })

  let data = await response.json()
  return data
}

let image = document.querySelector('#image').files[0]
uploadImage(image)
  .then(data => {
    console.log(data)
  })
  .catch(error => {
    console.log(error)
  })

上面示例中，uploadImage函数使用了Promise对象进行图片上传，同时使用await表达式等待Promise对象的执行结果，并返回上传结果。调用uploadImage函数时，使用了then方法添加回调函数，并获取到上传结果。